问题简述：

一个复用的弹窗如下，仅首次使用有效，之后打开使用时，底部的按钮怎么点击都没有反应了

第一次使用后无法再次触发mounted

思路：

1. 样式上的问题
2. 值的问题：弹窗显示的控制值不对，表单数据没重置
3. 按钮事件触发问题

• 第一步：样式上

     确认按钮所在的元素，没有遮挡层级等干扰，有就提升层级  

     例如：z-index：10000

• 第二步：值的问题

1. 检查控制弹窗的布尔值，是否正确，可以打印或者监听
2. 检查弹窗中的处理值是否正确，是否有效重置等问题 

   :destroy-on-close="ture" 关闭弹窗后清空值

   为确保关闭 清空值 也可设置  this.$refs.[表单].resetFields()

• 第三步：按钮触发

如果前2步发现问题并没改善，不要慌，同道中人┭┮﹏┭┮

试试给按钮点击事件加上 .native  ； 例如 @click.native ="函数"

我走到这一步，问题妥善解决了(*^▽^*)

• 附上代码

<template>
    <div @click.native="openMasterDialog">打开弹窗</div>
   <el-dialog title="媒体文件修改"
               width="40%"
               :visible.sync="dialogVisible"
               :destroy-on-close="true"
               @close="closeMasterDialog"
               >
      <el-form label-width="80px" :model="form" ref="ruleForm">
        <el-form-item label="文件名">
          <el-input v-model="form.name"
                    placeholder="请输入新的名称" />
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click.native="closeMasterDialog" >取 消</el-button>
        <el-button type="primary"
                   @click.native="submitMaster">确 定</el-button>
      </div>
    </el-dialog>
</template>

export default {
    data () {
        return {
          dialogVisible: false,
          form: {
            name:3
            },
     }
    },
    methods: {
        openMasterDialog () {
          this.dialogVisible = true;
          // console.log("打开弹窗",this.dialogVisible)
        },
        closeMasterDialog () {
          this.$refs.ruleForm.resetFields()
          this.dialogVisible = false;
        },
         submitMaster () {
          this.closeMasterDialog ()
           // 处理
        },
    }
}

如果不是弹窗中使用也可以参考思路，欢迎讨论