Vue2.0里面的element组件库的MessageBox 弹框问题

发布于 2022-09-04 10:22:27 字数 1043 浏览 19 评论 0

先上这个组件库的地址吧 http://element.eleme.io/#/zh-...
clipboard.png

这种内容自定义的alert是这个组件库给出的,我现在想把这个中间的文字换成他提供的其他组件。
有各位Vue大牛知道如何将这个message中内容换成这个组件库里面给出的其他组件呢

<template>
  <el-button type="text" @click="open4">点击打开 Message Box</el-button>
</template>

<script>
  export default {
    methods: {
      open4() {
        this.$msgbox({
          title: '消息',
          message: '这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容',
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(action => {
          this.$message({
            type: 'info',
            message: 'action: ' + action
          });
        });
      },
    }
  }
</script>

以上为代码,感谢给位大牛给出您宝贵的意见!!!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

孤云独去闲 2022-09-11 10:22:27

用 dialog 组件即可

若有似无的小暗淡 2022-09-11 10:22:27
this.$msgbox({
    title: '上传文件',
    center: true,
    message: 
      <el-upload
        class="upload-demo"
        drag
        action="/upload"
        accept={temVM.accept}
        multiple={temVM.multiple}
        // onChange 不好使
        // before-upload={onChange}
        file-list={temVM.fileList}
        http-request={temVM.onRequest}
        before-remove={temVM.onRemove} >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">{temVM.tip}</div>
      </el-upload>,
    showConfirmButton: true,
    showCancelButton: false
  }).catch(() => {
    this.$message.info('取消上传')
  })
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文