<p class="ql-align-center"><strong>第一步</strong></p><p>&lt;template&gt;</p><p>&nbsp;&nbsp;&lt;div v-show="isShow"&gt;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="alert"&gt;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="flex"&gt;{{msg}}&lt;/div&gt;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div v-if="type === 'alert'"&gt;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="btnCommon success" @click="close()"&gt;确定&lt;/div&gt;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div v-else class="space-round"&gt;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="btnCommon cancel" @click="cancelEvent()"&gt;取消&lt;/div&gt;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="btnCommon success" @click="successEvent()"&gt;确定&lt;/div&gt;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="mask" @click="closeMask"&gt;&lt;/div&gt;</p><p>&nbsp;&nbsp;&lt;/div&gt;</p><p>&lt;/template&gt;</p><p><br></p><p>&lt;script&gt;</p><p>export default {</p><p>&nbsp;&nbsp;name: "alert",</p><p>&nbsp;&nbsp;props: {</p><p>&nbsp;&nbsp;&nbsp;&nbsp;type: {</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: String,</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;default: 'alert'</p><p>&nbsp;&nbsp;&nbsp;&nbsp;},</p><p>&nbsp;&nbsp;&nbsp;&nbsp;msg: {</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: String,</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;default: ''</p><p>&nbsp;&nbsp;&nbsp;&nbsp;},</p><p>&nbsp;&nbsp;&nbsp;&nbsp;isShow: {</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: Boolean,</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;default: false</p><p>&nbsp;&nbsp;&nbsp;&nbsp;},</p><p>&nbsp;&nbsp;&nbsp;&nbsp;success: {</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: Function,</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;default: () =&gt; {</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log('点击了success');</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</p><p>&nbsp;&nbsp;&nbsp;&nbsp;},</p><p>&nbsp;&nbsp;&nbsp;&nbsp;cancel: {</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type: Function,</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;default: () =&gt; {</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log('点击了cancel');</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</p><p>&nbsp;&nbsp;&nbsp;&nbsp;},</p><p>&nbsp;&nbsp;},</p><p>&nbsp;&nbsp;methods: {</p><p>&nbsp;&nbsp;&nbsp;&nbsp;close () {</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.isShow = false;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;},</p><p>&nbsp;&nbsp;&nbsp;&nbsp;closeMask () {</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (this.type === 'alert') this.close();</p><p>&nbsp;&nbsp;&nbsp;&nbsp;},</p><p>&nbsp;&nbsp;&nbsp;&nbsp;cancelEvent () {</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.cancel();</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.close();</p><p>&nbsp;&nbsp;&nbsp;&nbsp;},</p><p>&nbsp;&nbsp;&nbsp;&nbsp;successEvent () {</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.success();</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.close();</p><p>&nbsp;&nbsp;&nbsp;&nbsp;}</p><p>&nbsp;&nbsp;}</p><p>};</p><p>&lt;/script&gt;</p><p><br></p><p>&lt;style lang="scss" scoped&gt;</p><p>&nbsp;&nbsp;$btn-main: #009688;</p><p>&nbsp;&nbsp;$btn-dark: darken($btn-main, 5%);</p><p>&nbsp;&nbsp;.alert {</p><p>&nbsp;&nbsp;&nbsp;&nbsp;width: 300px;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;height: 150px;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;position: fixed;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;background: #fff;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;border-radius: 6px;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;left: calc(50% - 150px);</p><p>&nbsp;&nbsp;&nbsp;&nbsp;top: calc(50% - 75px);</p><p>&nbsp;&nbsp;&nbsp;&nbsp;padding: 20px 10px;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;box-shadow: 0 5px 8px rgba(0, 0, 0, .05);</p><p>&nbsp;&nbsp;&nbsp;&nbsp;z-index: 99;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;display: flex;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;flex-flow: column nowrap;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;justify-content: center;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;align-items: center;</p><p>&nbsp;&nbsp;}</p><p>&nbsp;&nbsp;.flex {</p><p>&nbsp;&nbsp;&nbsp;&nbsp;flex: 1;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;display: flex;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;justify-content: center;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;align-items: center;</p><p>&nbsp;&nbsp;}</p><p>&nbsp;&nbsp;.space-round {</p><p>&nbsp;&nbsp;&nbsp;&nbsp;display: flex;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;flex-flow: row wrap;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;justify-content: space-around;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;align-items: center;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;width: 100%;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;padding: 0 10px;</p><p>&nbsp;&nbsp;}</p><p>&nbsp;&nbsp;.btnCommon {</p><p>&nbsp;&nbsp;&nbsp;&nbsp;width: 105px;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;height: 32px;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;text-align: center;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;line-height: 32px;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;border-radius: 6px;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&amp;.success {</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background: $btn-main;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: #fff;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&amp;:hover {</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background: $btn-dark;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cursor: pointer;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&amp;.cancel {</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background: #ededed;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: #333;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;}</p><p>&nbsp;&nbsp;}</p><p>&nbsp;&nbsp;.mask {</p><p>&nbsp;&nbsp;&nbsp;&nbsp;position: fixed;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;width: 100%;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;height: 100%;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;background: rgba(0, 0, 0, .4);</p><p>&nbsp;&nbsp;&nbsp;&nbsp;left: 0;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;top: 0;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;overflow: hidden;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;z-index: 9;</p><p>&nbsp;&nbsp;}</p><p>&lt;/style&gt;</p><p><br></p><p class="ql-align-center"><strong>第二步</strong></p><p class="ql-align-justify"><strong>import AlertComponent from './alert.vue';</strong></p><p class="ql-align-justify"><strong>const Alert = {};</strong></p><p class="ql-align-justify"><strong>/** 2020-2-18 0018</strong></p><p class="ql-align-justify"><strong>&nbsp;*作者: 八仔</strong></p><p class="ql-align-justify"><strong>&nbsp;*功能: 公共弹窗插件实例方法</strong></p><p class="ql-align-justify"><strong>&nbsp;*参数:</strong></p><p class="ql-align-justify"><strong>&nbsp;*/</strong></p><p class="ql-align-justify"><strong>Alert.install = Vue =&gt; {</strong></p><p class="ql-align-justify"><strong>&nbsp;&nbsp;const AlertConstructor = Vue.extend(AlertComponent);</strong></p><p class="ql-align-justify"><strong>&nbsp;&nbsp;const instance = new AlertConstructor();</strong></p><p class="ql-align-justify"><strong>&nbsp;&nbsp;instance.$mount(document.createElement('div'));</strong></p><p class="ql-align-justify"><strong>&nbsp;&nbsp;document.body.appendChild(instance.$el);</strong></p><p class="ql-align-justify"><strong>&nbsp;&nbsp;// 4. 添加实例方法</strong></p><p class="ql-align-justify"><strong>&nbsp;&nbsp;Vue.prototype.$alert = (msg) =&gt; {</strong></p><p class="ql-align-justify"><strong>&nbsp;&nbsp;&nbsp;&nbsp;// 逻辑...</strong></p><p class="ql-align-justify"><strong>&nbsp;&nbsp;&nbsp;&nbsp;instance.type = 'alert';</strong></p><p class="ql-align-justify"><strong>&nbsp;&nbsp;&nbsp;&nbsp;instance.msg = msg;</strong></p><p class="ql-align-justify"><strong>&nbsp;&nbsp;&nbsp;&nbsp;instance.isShow = true;</strong></p><p class="ql-align-justify"><strong>&nbsp;&nbsp;};</strong></p><p class="ql-align-justify"><strong>&nbsp;&nbsp;Vue.prototype.$confirm = (msg, success, cancel) =&gt; {</strong></p><p class="ql-align-justify"><strong>&nbsp;&nbsp;&nbsp;&nbsp;// 逻辑...</strong></p><p class="ql-align-justify"><strong>&nbsp;&nbsp;&nbsp;&nbsp;instance.type = 'confirm';</strong></p><p class="ql-align-justify"><strong>&nbsp;&nbsp;&nbsp;&nbsp;instance.msg = msg;</strong></p><p class="ql-align-justify"><strong>&nbsp;&nbsp;&nbsp;&nbsp;instance.isShow = true;</strong></p><p class="ql-align-justify"><strong>&nbsp;&nbsp;&nbsp;&nbsp;if (typeof success !== 'undefined') {</strong></p><p class="ql-align-justify"><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;instance.success = success;</strong></p><p class="ql-align-justify"><strong>&nbsp;&nbsp;&nbsp;&nbsp;}</strong></p><p class="ql-align-justify"><strong>&nbsp;&nbsp;&nbsp;&nbsp;if (typeof cancel !== 'undefined') {</strong></p><p class="ql-align-justify"><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;instance.cancel = cancel;</strong></p><p class="ql-align-justify"><strong>&nbsp;&nbsp;&nbsp;&nbsp;}</strong></p><p class="ql-align-justify"><strong>&nbsp;&nbsp;};</strong></p><p class="ql-align-justify"><strong>};</strong></p><p class="ql-align-justify"><strong>export default Alert;</strong></p><p class="ql-align-justify"><br></p><p class="ql-align-center"><strong>第三步</strong></p><p class="ql-align-justify"><strong>import Alert from './components/modules/alert';</strong></p><p class="ql-align-justify"><br></p><p class="ql-align-justify"><strong>Vue.use(Alert);</strong></p><p><br></p>