vue插件开发

插件通常用来为 Vue 添加全局功能

 

使用插件

通过 Vue 的全局方法 Vue.use() 使用，

当然，在使用这个方法之前，你的 Vue 实例 必须已经初始化完成

import myPlugin from './plugIn/myPlugin'
 
// 该方法，会调用 myPlugin 的 install 方法
 
Vue.use(myPlugin)

开发插件 （写一个 confirm 例子）

定义 confirm template

<template>
  <div class="confirm_warp" @click="closeCallBack(false)" id="confirm" v-if="show" >
        <div class="count" @click.stop="">
            <div class="confirm_header">
                <slot name="confirm_header">{{config.title}}</slot>
            </div>
            <div class="confirm_body">
                    <div v-if="config.vnode && config.vnode!=''" v-html="config.vnode"></div>
                    <span v-else>{{config.content}}</span>
                <!-- <slot name="confirm_body"></slot> -->
            </div>
            <div class="confirm_footer">
                <span class="sure" v-if="config.r_btn && config.r_btn!=''"  @click="sureCallBack(true)">{{config.r_btn}}</span>
                <span class="close" v-if="config.l_btn && config.l_btn!=''" @click="closeCallBack(false)">{{config.l_btn}}</span>
            </div>
        </div>
  </div>
</template>

<script>
export default {
  name: '',
  data() { 
    return {
        show: false
    }
  },
  props: {
      confirmOption:{
          type:Object,
          default:()=>{
              return {
                'title':'提示',
                'content':'',
                'r_btn':'继续',
                'l_btn':'取消',
              }
          }
      }
  },
  components:{
  },
  mounted() {

  },
  methods:{
    //   取消按钮
    close_confrim(){
        this.$emit('close_confrim')
    },
    // 确认按钮
    sure_confrim(){
        this.$emit('sure_confrim')
    }
  },
 }
</script>

<style scoped>
.confirm_warp{background-color: rgba(0, 0, 0, 0.5);position: fixed;top: 0px;left: 0px;width: 100%;height: 100%;z-index: 1111;}
.confirm_warp .count{min-width: 360px;position: absolute;top: 50%;left: 50%;transform: translateX(-50%) translateY(-50%);background-color: #ffffff;border-radius: 4px;}
.confirm_warp .count .confirm_body{padding: 20px;min-height: 40px;}
.confirm_warp .count .confirm_footer{padding: 20px;min-height: 40px;text-align: center;}
.confirm_warp .count .confirm_footer span{display: inline-block;font-size: 14px;padding: 4px 25px;cursor: pointer;border-radius: 2px;}
.confirm_warp .count .confirm_footer .sure{background-color: #E62679;color: #ffffff;}
.confirm_warp .count .confirm_footer .close{background-color: #ffffff;color: #E62679;border: 1px solid #E62679;padding: 3px 25px;margin-left: 20px;}

</style>

定义 Confirm.js

import confirmIn from './confirmIndex.vue'

import Vue from 'vue'
/*
 *    this.$lstconfirm({
        title:'这是什么东西~',//标题
        r_btn:'确定',//左侧按钮
        l_btn:'取消',//右侧按钮
        vnode:'<span>饿哦是内容区域</span>',//内容自定义部分
        content:"我也不知道这是什么东西啊！！！"//内容文本
      }).then(res=>{
          console.log(res)//点击按钮回调函数
      })
 */

let confirmIndex = {};

confirmIndex.install = function (Vue,options) {
    const confirmIndexConstructor = Vue.extend(confirmIn);

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

    Vue.prototype.$lstconfirm = (config) => {

        // 这里 return 一个 Promise 
        // 在项目中使用的时候，就可以进行链式调用了~
        return new Promise((resolve,reject) => {
            instance.config = config;

            instance.show = true;

            instance.sureCallBack = () => {
                instance.show = false;
                resolve(true)
            }

            instance.closeCallBack = () => {
                instance.show = false;
                resolve(false)
            }
        })
    }
    // 将这个实例挂载在我创建的div上
    // 并将此div加入全局挂载点内部

    instance.$mount(document.createElement('div'))
 
    document.body.appendChild(instance.$el)

}

export default confirmIndex;

目录结构

 

 在main.js安装

// 引入自定义confirm 提示框
import confirmIndex from './plugin/confirm/confirmIndex'
Vue.use(confirmIndex)

在项目中使用

this.$lstconfirm({
        title:'这是什么东西~',//标题
        r_btn:'确定',//左侧按钮
        l_btn:'取消',//右侧按钮
        vnode:'<span>饿哦是内容区域</span>',//内容自定义部分
        content:"我也不知道这是什么东西啊！！！"//内容文本
      }).then(res=>{
          console.log(res)//点击按钮回调函数
      })