vue 开发插件 一

vue 插件开发，官网简单说了一下，需要暴露一个install 方法，这个是固定，然后就是在调用的时候
通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() ，这个大概就是vue官网提供的。
现在的目的是基于以上，我们开发一个vue的插件，
实现目标 （弹框提示）

• 提示内容自定义html的标签插入
• 提示内容纯文本
• 点击按钮 关闭弹框
• 点击按钮 支持回调方法
• 支持内容 左、右、居中对齐
• 添加class 样式名
• 按钮名称自定义
• 弹框提示名称自定义标题

分析一下，这个弹框插件，分为两大块
一个是结构、布局的html代码用vue的组建编写
一个对外提供install 插件是逻辑编写也就是交互吧

搭建框架跑流程

先把框架搭建起来，基于webpack基础打包开发的，如果没看的希望去看一下《webpack 之vue 初级打包》
在src目录下新建component 存放弹框的内容组件
alert/index.vue

<template>
  <div>
      {{message}}
  </div>
</template>
<script>
export default {
  name:'Alert',
  props:{
    message:{
      type:String,
      default:'弹框内容测试！'
    }
  }
}
</script>

vue组件框架搭建好，用来展示弹框内容，后续完善
接着
在src录下建一个目录plugins 新建插件js dialog.js
写入基本代码,暴露一个install 方法 然后用官网提供的Vue.mixin({}) // 3. 注入组件选项 去实现
把组件放关系到插件里面

import Alert  from '../component/alert/index.vue'; // 引入组建
let $alert = null;
export default {
  install (Vue,props = { visible: false }){
    const AlertComponent = Vue.extend(Alert); //构造器创建子类
    $alert = new AlertComponent({
      el: document.createElement('div'),
      propsData: {
        ...props
      }
    });
    document.body.appendChild($alert.$el);
    Vue.mixin({
      created() {
      },
      methods: {
        $alert() {
            console.log('插件搭建');
        }
      },
    });
  }
}

编写 app.vue 调用插件页面

<template>
  <div class="single"  @click="tFn()">{{msg}}</div>
</template>
<script>
export default {
  name:'app',
  data() {
    return {
      msg:'木子聊前端'
    }
  },
  methods: {
    tFn (){
      // 插件可以直接this 调用
      this.$alert();
    }
  },
}
</script>
<style lang='less'>
  .single{
    color: red;
    font-size: 30px;
  }
</style>

期待到结果是，点击‘ 木子聊前端’ 在控制台输出 插件内容
编写 main.js, 目录结构和上一篇《webpack 之vue 初级打包》 保持一致

import Vue from 'vue';
import App from './App.vue';
import alert from './plugins/dialog.js';
Vue.use(alert);
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

运行一下

npm run dev

打包成功
在浏览器打开index.html 检查一下组件到内容是否现实在页面上
如图表示框架搭建好了。插件也基本了解完了。

如果只想了解插件到组成和开发流程到这里就结束。接下来完善交互

完善弹框组件

弹框布局和样式

布局需求：1. 弹框标题，内容，按钮
2：背景，弹框上下左右居中
完善 alert/index.vue template 模版结构，定义好calss名称

<template>
  <div class="mask mask-dialog">
    <div class="dialog">
      <div class="dialog-title"></div>
      <div class="dialog-content">{{message}}</div>
      <div class="dialog-btn"><button class="primary">确定</button></div>
    </div>  
  </div>
</template>

在搭建框架到时候只是定义了message，其他地方按钮和标题也要定义，后面接着完善，这一步先把布局弄起来，
样式部分 继续
完善 alert/index.vue 在底部添加less css预处理样式

<style lang='less'>
.mask{
    position:fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2000;
    background: rgba(0,0,0,.4);
}
.mask-dialog {
    z-index: 2100;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}
.dialog {
    width: 320px;
    padding-top:20px;
    text-align: center;
    background: #fff;
    border-radius: 12px;
    .dialog-title {
        padding: 0 4px 18px;
        font-size: 24px;
        line-height: 33px;
    }
  .dialog-content {
    padding: 0 20px 20px;
  }
  .dialog-btn{
     display: flex;
     border-top: 1px solid rgba(0,0,0,.1);
    button {
        display: block;
        font-size: 24px;
        line-height: 64px;
        background: 0 0;
        border: none;
        flex: 1;
       &.primary{
         font-weight: 700;
         color: #cca663
      }
    }
  }
}  
</style>

由于没有热部署，现在需要 手动 npm run dev 看效果

看上去已经不错的布局和样式，上下左右都居中了，背景也已经出现。

完善组件的js和参数处理

vue中通过 Prop 向子组件传递数据，父级通过属性传递给子组件，子组件通过prop 接受属性并处理，这样就可以动态获取标题，内容，和按钮，从而实现自定义
期望点击‘确定’按钮，关闭弹框，从而实现关闭的时候回调其他方法。
vue 提供一个内建机制$emit 方法，传递给父级一个监听事件。即可实现关闭和回调的相关方法，剩下的就放到父级，交给插件处理
完善alert/index.vue js 部分，template 模版可以依据js 填充

<script>
export default {
  name:'Alert',
  props:{
    message:{
      type:String,
      default:''
    },
    title:{
      type:String,
      default:''
    },
    useHtml:{
      type:Boolean,
      default:false
    },
    button:{
      type:String,
      default:'确定'
    },
    visible:{
      type:Boolean,
      default:false
    },
    // 内容 对齐方式
    align: {
      type: String,
      default: 'center'
    },
    // 动态添加class
    cusClass:{
      type: String,
      default:''
    }
  },
  computed: {
    styleA(){
       return `text-align:${this.align}`;
    }
  },
  methods: {
    onButCk (e){
      this.$emit('but-click',e);
    }
  },
}
</script>

至此，弹框组件全部完成。
篇幅太长，下一篇继续完善插件编写，从而实现弹框交互的完整
《vue 开发插件二》