在使用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(() => {
          })