在使用element的confirm时，没有可以勾选“不在提示”的功能，现在的需求是可以根据需求关闭confirm的提示

  • confirm组件hasDConfirm.vue
 1 <template>
 2   <div class="YConfirm">
 3     <el-dialog :title="content.title" width="20%" :close-on-click-modal="false" :visible="dialogVisible" >
 4       {{ content.content }}
 5       <div slot="footer" class="dialog-footer">
 6         <el-checkbox v-model="noShow">记住我的选择</el-checkbox>
 7         <el-button @click="YConfirmCencel(noShow)">{{ content.cencelBtnName }}</el-button>
 8         <el-button type="primary" @click="YConfirmSure(noShow)">{{ content.confirmBtnName }}</el-button>
 9       </div>
10     </el-dialog>
11   </div>
12 </template>
13 
14 <script>
15 export default {
16   name: 'YConfirm',
17   data() {
18     return {
19       dialogVisible: true,
20       content: {
21         title: '',
22         content: '',
23         cencelBtnName: '',
24         confirmBtnName: ''
25       },
26       formLabelWidth: '120px',
27       noShow: false
28     }
29   },
30   methods: {
31     YConfirmCencel() {
32 
33     },
34     YConfirmSure() {
35 
36     }
37   }
38 }
39 </script>
40 
41 <style scoped>
42 
43 </style>
  • 同目录下创建index.js文件

　　　　该文件目的是把组件导出，同时判断是否选择了“不在提示”。vue.extend() 使用基础的VUE构造器，创建一个子类，参数是一个包含组件选项的对象使用extend是为了从接口动态渲染组件模板

import Vue from 'vue'
import hasDConfirm from './index.vue'
let hasDConfirmConstructor = Vue.extend(hasDConfirm)
let theHasDConfirm = function (content) {
  return new Promise((res, rej) => {
    let hasDConfirmDom = new hasDConfirmConstructor({
      el: document.createElement('div')
    })
    document.body.appendChild(hasDConfirmDom.$el)
    hasDConfirmDom.content = content
    hasDConfirmDom.YConfirmCencel = function(noShow) {
      rej({ noShow })
      hasDConfirmDom.dialogVisible = false
    }
    hasDConfirmDom.YConfirmSure = function(noShow) {
      res({ noShow })
      hasDConfirmDom.dialogVisible = false
    }
  })
}

export default theHasDConfirm
  • main.js
import hasDConfirm from './component/hasDConfirm/index'
Vue.prototype.$hasDConfirm = hasDConfirm
  • 使用
this.$hasDConfirm({
          title: '确定删除',
          content: '确定删除',
          cencelBtnName: '取消',
          confirmBtnName: '确认',
        })
          .then(res => {
            // 进行删除操作
            this.deleteGraphic(this.mapView.popup.selectedFeature)
            // 记录默认选项
            this.noShowDelConfirm = res.noShow
          })
          .catch(() => {
          })