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

  • 相关阅读:
    laravel框架——保存用户登陆信息(session)
    laravel框架——增删改查
    laravel框架——表单验证
    laravel框架——上传、下载文件
    Forms & HTML 组件
    phantomJS+Python 隐形浏览器
    Python idle中lxml 解析HTML时中文乱码解决
    python 根据字符串语句进行操作再造函数(evec和eval方法)
    python通过LXML库读取xml命名空间
    Python通过lxml库遍历xml通过xpath查询(标签,属性名称,属性值,标签对属性)
  • 原文地址:https://www.cnblogs.com/lalalagq/p/9919508.html
Copyright © 2011-2022 走看看