<!-- 頁面提示彈框 -->
<template>
? ? <el-dialog
? ? ? :visible.sync="show"
? ? ? class="page-dialog-wrapper"
? ? ? custom-class="page-dialog-component"
? ? ? :width="width"
? ? ? :append-to-body="true"
? ? ? :show-close="false"
? ? ? :close-on-click-modal="false">
? ? ? <div class="container">
? ? ? ? <div class="title">
? ? ? ? ? <slot name='title-icon'>
? ? ? ? ? ? <i
? ? ? ? ? ? ? :class="titleIcon"
? ? ? ? ? ? ? v-if="titleIcon">
? ? ? ? ? ? </i>
? ? ? ? ? </slot>
? ? ? ? ? {{title}}
? ? ? ? ? <i
? ? ? ? ? ? class="el-icon-close close-btn"
? ? ? ? ? ? @click="close"
? ? ? ? ? ? v-if="showClose">
? ? ? ? ? </i>
? ? ? ? </div>
? ? ? ? <div class="content">
? ? ? ? ? <slot>
? ? ? ? ? ? <div class="text" v-html="message"></div>
? ? ? ? ? </slot>
? ? ? ? ? <div class="btns" v-if="showConfirm || showCancel">
? ? ? ? ? ? <el-button
? ? ? ? ? ? ? class="btn cancel"
? ? ? ? ? ? ? @click="close"
? ? ? ? ? ? ? v-if="showCancel">
? ? ? ? ? ? ? {{cancelText}}
? ? ? ? ? ? </el-button>
? ? ? ? ? ? <el-button
? ? ? ? ? ? ? class="btn"
? ? ? ? ? ? ? @click="confirm"
? ? ? ? ? ? ? v-if="showConfirm">
? ? ? ? ? ? ? {{confirmText}}
? ? ? ? ? ? </el-button>
? ? ? ? ? </div>
? ? ? ? </div>
? ? ? </div>
? ? </el-dialog>
</template>

<script>
/**
?* slot：
?* ?default：提示文本區(qū)域，默認
?* ?title-icon：標題前面的icon
?* function：
?* ?confirm：確認按鈕點擊
?* ?close：取消及關閉按鈕點擊
?*/
export default {
? name: 'PageDialogComponent',
? components: {},
? props: {
? ? show: { // 隱藏顯示
? ? ? type: Boolean,
? ? ? default: false,
? ? },
? ? width: { // 寬度
? ? ? type: String,
? ? ? default: '600px',
? ? },
? ? title: { // 標題
? ? ? type: String,
? ? ? default: '提示',
? ? },
? ? titleIcon: { // 標題icon
? ? ? type: String,
? ? ? default: '',
? ? },
? ? showCancel: { // 是否顯示取消按鈕
? ? ? type: Boolean,
? ? ? default: false,
? ? },
? ? cancelText: { // 取消按鈕文本
? ? ? type: String,
? ? ? default: '取消',
? ? },
? ? showConfirm: { // 是否顯示確認按鈕
? ? ? type: Boolean,
? ? ? default: true,
? ? },
? ? confirmText: { // 確認按鈕文本
? ? ? type: String,
? ? ? default: '確定',
? ? },
? ? message: { // 提示內(nèi)容
? ? ? type: String,
? ? ? default: '這里是提示語',
? ? },
? ? showClose: { // 是否顯示關閉按鈕
? ? ? type: Boolean,
? ? ? default: true,
? ? },
? },
? methods: {
? ? // 確定
? ? confirm() {
? ? ? this.$emit('confirm');
? ? },
? ? // 關閉
? ? close() {
? ? ? this.$emit('close');
? ? },
? },
};
</script>

<style lang='less' scoped>
// 樣式區(qū)
</style>

import vue from 'vue';
// 這里就是我們剛剛創(chuàng)建的那個靜態(tài)組件
import pageDialog from './PageDialog.vue';
// 返回一個 擴展實例構(gòu)造器
const DialogConstructor = vue.extend(pageDialog);
// 定義彈出組件的函數(shù)
function showDialog(options) {
? return new Promise((resolve, reject) => {
? ? const dialogDom = new DialogConstructor({
? ? ? el: document.createElement('div'),
? ? });
? ? dialogDom.width = options.width || dialogDom.width;
? ? dialogDom.title = options.title || dialogDom.title;
? ? dialogDom.titleIcon = options.titleIcon || dialogDom.titleIcon;
? ? dialogDom.showCancel = options.showCancel || dialogDom.showCancel;
? ? dialogDom.cancelText = options.cancelText || dialogDom.cancelText;
? ? dialogDom.showConfirm = options.showConfirm || dialogDom.showConfirm;
? ? dialogDom.confirmText = options.confirmText || dialogDom.confirmText;
? ? dialogDom.message = options.message || dialogDom.message;
? ? dialogDom.showClose = options.showClose || dialogDom.showClose;
? ? dialogDom.show = true;
? ? document.body.appendChild(dialogDom.$el);
? ? dialogDom.confirm = function () { // 確定按鈕
? ? ? resolve();
? ? ? dialogDom.show = false;
? ? };
? ? dialogDom.close = function () { // 取消按鈕
? ? ? reject();
? ? ? dialogDom.show = false;
? ? };
? });
}
// 注冊為全局組件的函數(shù)
function registryDialog() {
? // 將組件注冊到 vue 的 原型鏈里去,
? // 這樣就可以在所有 vue 的實例里面使用 this.$pageDialog()
? vue.prototype.$pageDialog = showDialog;
}
export default registryDialog;

import pageDialog from '../components/page-dialog/index';
Vue.use(pageDialog)

? ? <!-- 刪除前提示 -->
? ? <page-dialog
? ? :show="showDialog"
? ? showCancel
? ? message="確認刪除已選產(chǎn)品？"
? ? @confirm="deleteChoose"
? ? @close="showDialog = false"/>

? ? ? ? this.$pageDialog({
? ? ? ? ? message: '審核后的訂單有部分發(fā)生變化，確定按調(diào)整后訂單支付？',
? ? ? ? ? showCancel: true,
? ? ? ? ? cancelText: '我在想想',
? ? ? ? }).then(() => {
? ? ? ? // 搞事情
? ? ? ? }).catch(() => {
? ? ? ? // 搞事情
? ? ? ? });

Vue.prototype.langs = function lang(en, id, zh) {
? const L = this.language
? switch (L) {
? ? case 'en':
? ? ? return en || ''
? ? case 'id':
? ? ? return id || ''
? ? case 'zh':
? ? ? return zh || ''
? }
}

new Vue({
? el: '#app',
? router,
? store,
? test, // 比如這個就是js文件,放到vue上面
? components: { App },
? template: '<App/>'
})

import testA from '@/A'
Vue.component('testA ', testA )