zoukankan      html  css  js  c++  java
  • 如何制作一个类似jquery插件的vue插件

    vue拿来写插件,会不会太那啥?

    请跟我念,“不会,符合业务需求才是你的老板最想要的。”

    如何封装一个可以全局调用的vue插件

    其原理其实相当简单,通过new Vue(vueComponentConstructor)您可以轻松的建立一个vue实例,在该实例上您可以操作方法、操作数据、监听数据变化,使用各种钩子,对开发者而言并没有任何阻碍。

    我们生产了一个实例后该如何操作

    请跟我来,写一个实现。首先,我们先写一个vue组件。

    // vue组件 A.vue
    <template>
      <el-dialog title="选择文件夹" :visible.sync="visible" @close="close">
        <div class="dirtree">
          <el-tree
            :props="dirtree"
            :load="loadDir"
            :render-content="refresh"
            :expand-on-click-node="false"
            @node-click="selectDir"
            lazy
          >
          </el-tree>
        </div>
        <el-button type="success" @click="ensureSelectedDir">确定</el-button>
        <el-button @click="cancelSelectedDir">取消</el-button>
      </el-dialog>
    </template>
    
    <script>
    import api from '@/api'
    export default {
      data () {
        return {
          dirtree: {
            label: function (data, node) {
              return data.name
            },
            data: null,
            isLeaf: true
          },
          visible: false,
          selectedDir: ''
        }
      },
      methods: {
        close () {
            this.$nextTick(() => {
              // 关闭时销毁元素
              this.$destroy(true)
              this.$el.parentNode.removeChild(this.$el)
            })
        },
        ensureSelectedDir () {
        },
    
        cancelSelectedDir () {
        },
    
        selectDir (data) {
        },
    
        refreshDirData ($event, ctx) {
        },
    
        loadDir (node, resolve) {
        },
    
        refresh (h, ctx) {
        }
      }
    }
    </script>
    

    当然,如果您的构建系统不支持vue-loader和webpack,您也可以使用以下写法

    
    export default const Dialog = {
        name: 'xxx',
        template: `
            <div>
                // some template
            </div>
        `,
        data () {
            return {}
        },
        methods: {}
    }
    

    第二步,生产api出口

    
    // 生成调用方法
    import Vue from 'vue'
    import A from './A.vue'
    
    let AConstructor = Vue.extend(A)
    
    export default function (options = {}) {
      let instance = new AConstructor({
        data: options // 混入初始化数据,也可以直接通过merge的方式把数据插入实例对象上
      })
      instance.vm = instance.$mount()
      document.body.appendChild(instance.vm.$el)
      instance.vm.visible = true // 一些生成后的data成员操作
      return instance.vm
    }
    
    

    您可以将其生成单一实例,也可以每次调用生成不同实例,在关闭时调用$destroy配合destroyed或者beforeDestroy对存在页面上的vm.$el进行销毁。

    一些提示

    您可以将实例引用挂载到任何您想挂载的地方方便调用,您也可以使用Promise配合vue实例里的自定义方法或者其他方法实现promise链或者async await的灵活写法。这都取决于您。

    原文地址:https://segmentfault.com/a/1190000014150243

  • 相关阅读:
    笨办法29IF语句
    笨办法28布尔表达式
    笨办法27记住逻辑
    笨办法26恭喜你,可以进行一次考试了
    笨办法25更多更多的练习
    笨办法23复制文件
    成功转移(✿◡‿◡)
    笨办法22到目前为止你学到了什么?
    vue.js
    webpack-优化
  • 原文地址:https://www.cnblogs.com/lalalagq/p/9919508.html
Copyright © 2011-2022 走看看