VUE+ElementUI多格式的message消息提示

 vue:

        <el-button type="primary" @click="cantDelete">无法删除</el-button>

method:

cantDelete(val) {
      const h = this.$createElement;
      this.$message({
        message: h('p', null, [
          h('span', {style: 'color: #E6A23C'}, '无法删除!'),
          h('strong', {style: 'color: #F56C6C'}, val),
          h('span', {style: 'color: #E6A23C'}, '  仍在被使用'),
        ]),
        type: 'warning'
      });
    },

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue和Element UI中,你可以使用`el-upload`组件来实现头像上传的功能。以下是一个简单的示例代码: ```vue <template> <div> <el-upload class="avatar-uploader" action="/upload" :show-file-list="false" :before-upload="beforeUpload" :on-success="handleSuccess" :on-error="handleError" > <img v-if="imageUrl" :src="imageUrl" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload> </div> </template> <script> export default { data() { return { imageUrl: '' }; }, methods: { beforeUpload(file) { // 在上传之前的钩子函数中可以进行一些验证操作,如文件类型、大小等 const isJPG = file.type === 'image/jpeg'; const isPNG = file.type === 'image/png'; const isLt2M = file.size / 1024 / 1024 < 2; if (!isJPG && !isPNG) { this.$message.error('只能上传 JPG/PNG 格式的图片'); return false; } if (!isLt2M) { this.$message.error('图片大小不能超过 2MB'); return false; } }, handleSuccess(response) { // 上传成功的回调函数,可以在这里处理返回的数据 this.imageUrl = response.data.url; }, handleError() { // 上传失败的回调函数 this.$message.error('上传头像失败'); } } }; </script> <style scoped> .avatar-uploader { display: flex; align-items: center; justify-content: center; width: 120px; height: 120px; border-radius: 50%; overflow: hidden; background-color: #f5f5f5; cursor: pointer; } .avatar { width: 100%; height: 100%; } .avatar-uploader-icon { font-size: 28px; color: #8c939d; } </style> ``` 在上述代码中,我们使用了`el-upload`组件来创建一个头像上传的区域。通过设置`action`属性来指定上传的接口地址,通过设置`before-upload`钩子函数来进行文件验证,通过设置`on-success`和`on-error`回调函数来处理上传成功和失败的情况。 在`handleSuccess`函数中,我们可以通过接口返回的数据来更新头像的URL,并在模板中使用`<img>`标签来显示头像。如果上传失败,则在`handleError`函数中给出错误提示。 希望这个示例对你有帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值