vue自定义弹窗

代码狂暴者

已于 2022-03-16 16:22:27 修改

阅读量2.5k

点赞数

文章标签： vue.js elementui javascript

于 2022-03-15 16:20:43 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_57463074/article/details/123505426

版权

本文介绍了如何在Vue.js中使用elementui组件库创建dialog弹出对话框。内容包括dialog的基本用法和属性，并展示了done()方法用于发布后自动关闭弹窗的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

dialog弹出对话框

vue做的富文本框

<el-dialog title="文本框"
                     :visible.sync="textboxs"
                     width="70%"
                     :before-close="handleClose"
                     lock-scroll>
          <avue-ueditor v-model="text"
                        :options="options"
                        ></avue-ueditor>
          <span class="avue-ueditor__code">{{text}}</span>
 <div class="pull-auto"  style="text-align: center;margin-top:20px;">
              <el-button size="small"  type="primary" @click="textsubmitUpload">发布</el-button>
              <el-button size="small"  @click="textClose">取 消</el-button>
            </div>
          </el-dialog>

效果图：

done() 发布以后自动关闭弹窗

 textsubmitUpload(){
           // this.textrow
            putObj(this.textrow).then(data => {
              this.$message.success('发布成功')
              done() //发布以后自动关闭弹窗
            }).catch(() => {
              loading();
            });
          },

dialog基本用法及其属性：新人成长之入门Vue.js弹窗Dialog介绍（二） - 唐大博 - 博客园 (cnblogs.com)