vue(element-ui)删除前提示弹窗this.$confirm

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue(element-ui)删除前提示弹窗this.$confirm相关的知识,希望对你有一定的参考价值。

参考技术A import MessageBox from 'element-ui'
Vue.prototype.$confirm = MessageBox.confirm

confirmResult返回结果是字符串,取消是cancel,确定是confirm

vue 弹窗如何嵌入其它页面

直接上代码。

代码使用的是Element-ui。

A页面(父页面)

将B页面当作组件引入。

import taskLogList from '../dialogPage/index.vue'
export default   
  components:
      dialogPage
    ,
...

将组件引入放到HTML代码中

 <dialogPage 
    v-if="formPageVisible" 
    ref="formPageRef" 
    :queryId="logDialog.queryId">
</dialogPage >

代码说明

queryId:自定义的传值参数。 目的是将值从父页面传递到子页面去。

formPageVisible:显示参数。

在调用当前弹窗的方法里面进行如下设置


methods:
    ...

    /**
    * 弹窗方法
    */
    showLog(obj)

        //显示
        this.formPageVisible = true;

        //赋值
        this.queryId= obj.queryId;

        //调用子页面方法
        this.$nextTick(()=>
            
          this.$refs.formPageRef.getlist();
        )
      

基本上A页面已经可以退休了。

下面B页面开始上场。

B页面(子页面)

B页面主要的工作是两个。

1、获取A页面的传值

2、方法的实现。

1、获取A页面的传值

传值的话,在Vue中。一般在props中进行设置。

 export default 
    props: 
      queryId:
        type: String,
        default: '',
      ,
    ,
 ...

在这个里面,queryId是前面传递过来的参数。

2、方法的实现。

省略....

对了,记得把B页面设置为dialog。否则弹窗的效果可能不能实现哦。

留个小问题,如何把B页面的操作结果返回给A页面呢?

以上是关于vue(element-ui)删除前提示弹窗this.$confirm的主要内容,如果未能解决你的问题,请参考以下文章

element-ui dialog设置为点击弹窗以外的区域不关闭弹窗

element-ui弹窗组件再次打开时残留上次打开时的数据

Vue中element-ui的resetFields()方法重置表单无效问题及解决办法

vue 弹窗如何嵌入其它页面

vue 弹窗如何嵌入其它页面

elementui弹框中表格数据选择后关闭很慢