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>

View Code