饿了么常用组件

居中 会自动消失

image-20211105133206045

this.$message('这是一条消息提示');
this.$message({
    message: '恭喜你,这是一条成功消息',
    type: 'success'
});
this.$message({
    message: '警告哦,这是一条警告消息',
    type: 'warning'
});
this.$message.error('错了哦,这是一条错误消息');

右上角 会自动消失

image-20211105133110898

Element 为 Notification 组件准备了四种通知类型:success, warning, info, error。通过type字段来设置,除此以外的值将被忽略。同时,我们也为 Notification 的各种 type 注册了方法,可以在不传入type字段的情况下像open3和open4那样直接调用。

this.$notify({
    title: '成功',
    message: '这是一条成功的提示消息',
    type: 'success'
});
this.$notify({
    title: '警告',
    message: '这是一条警告的提示消息',
    type: 'warning'
});
this.$notify.info({
    title: '消息',
    message: '这是一条消息的提示消息'
});
this.$notify.error({
    title: '错误',
    message: '这是一条错误的提示消息'
});

时间选择器

<el-date-picker
v-model="ruleForm.time"
type="datetime"
placeholder="选择日期时间"
value-format="yyyy-MM-dd HH:mm:ss"
                />

上传文件

<el-upload
        slot="button"
        class="upload-demo"
        action="https://jsonplaceholder.typicode.com/posts/"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        multiple
        :limit="1"
        :on-exceed="handleExceed"
        :file-list="fileList"
      >
        <!--        <el-button slot="button" class="filter-item" type="primary" icon="el-icon-upload2" :loading="false">导入</el-button>-->
        <el-button  type="primary" icon="el-icon-upload2">点击上传</el-button>
      </el-upload>

button 组件之间会有换行问题

.upload-demo {
  display: inline-block;
}
posted @ 2021-11-05 15:33  李广龙  阅读(971)  评论(0)    收藏  举报