nuxt.js中自定义组件并使用

在nuxt.js中自定义并使用ui组件

效果展示：

新建一个vue文件，用于编写组件的样式布局

<template>
    <div v-show="show">
        <div  class="delete_mod pdb-0">
          <p class="font-36 pd-md tc fwb bdb">错误信息</p>
          <div class="pd-big tc mgt-sm">
            <p class="font-32">{{config.message}}</p>
          </div>
          <div class="pd-md">
            <button class="btn-submit-raduis font-32" @click="hideDiaLog">关闭</button>
          </div>
        </div>
        <div  class="cq-fixed"></div>
    </div>
</template>
<script>
export default {
    data(){
        return{
          show:false,
          config:{message:""}
        }
    },
    mounted() {
      this.show = false
    },
    methods:{
      hideDiaLog(){

      }
    }
}
</script>
<style>

#show {
  display: block;
}
#hidden {
  display: none;
}
</style>

新建一个js用于组件的封装

import showDialog from "@/components/showDialog/showDialog.vue"
import { Toast } from "vant";

import Vue from 'vue'

let Dialog = {};

Dialog.install = function(Vue) {

    const showDialogConstructor = Vue.extend(showDialog)

    // 生成一个该子类的实例
    const instance = new showDialogConstructor();

    Vue.prototype.$myDialog = (config) => {
        // 这里 return 一个 Promise 
        // 在项目中使用的时候，就可以进行链式调用了
        return new Promise((resolve, reject) => {
            console.log(config)
            Toast.clear()
            if (config.message) {
                instance.config = config;
                instance.show = true;
                instance.hideDiaLog = () => {
                    Toast.clear()
                    instance.show = false;
                    resolve(true)
                }
            }
        })
    }
    // 将这个实例挂载在我创建的div上
    // 并将此div加入全局挂载点内部
    instance.$mount(document.createElement('div'))
    document.body.appendChild(instance.$el)
}
//向外暴露一个show方法，可通过dialog.show()调用ui组件
Dialog.show = function(config) {
    return Vue.prototype.$myDialog(config)
}
export default Dialog

新建一个dialog.js用于使用ui组件

import Vue from 'vue'
import Dialog from "@/components/showDialog/showDialog.js"

Vue.use(Dialog)

在nuxt.config.js中的plugin中引入该插件