VUE 之封装自己的vue插件

大家好！我叫戴向天

QQ群：602504799

如若有不理解的，可加QQ群进行咨询了解

写自己的vue插件的好处是，方便调用，方便管理，可以随处使用，甚至不管哪个项目都可以使用.并且调用的方法也很简单：this.xxxx()

第一步：创建vue-plugIn.js文件（名字可自定义：例如：Clover-vue-plugIn.js。自己方便记住就好）
内容：

// 根据需求进行引入
import efficacy from './efficacy'		// 效验方法
import cache from './localStorage'	// 缓存方法
import { Dialog } from 'vant'		// vant的方法
import PlatformConfig from './platformConfig'		// 自己项目配置
import { backendPath, port, ProjectName } from './base'	// 自己基础配置
const PlugIn = {}

PlugIn.install = function (Vue, option) {
  Vue.mixin({
    methods: {
      $Dialog: Dialog,
      $confirm: Dialog.confirm,
      efficacy,
      cache: () => cache,
      getType (o, s) {
        let t = Object.prototype.toString.call(o).split(' ')[1]
        t = t
          .substring(0, t.length - 1)
          .trim()
          .toLowerCase()
        if (
          t === 'object' &&
          Object.prototype.toString.call(o).toLowerCase() ===
          '[object object]' &&
          !o.length
        ) { t = 'json' }
        return s ? t === s : t
      },
      getUrl (url) {
        return `${backendPath}${port}/${ProjectName}/picture/${url}`
      },
      goPage (url, params) {
        this.$router.push(url, params)
      },
      goBack () {
        this.$router.go(-1) // 返回上一层
      },
      getLinkMap () {
        return PlatformConfig.links
      }
    }
  })
}

export default PlugIn

第二步：引入

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import PlugIn from '@/assets/libs/vue-plugIn'		// 引入自己写的插件
Vue.use(PlugIn)	//进行使用
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

使用：

const type = this.getType("VUE 之 封装自己的vue插件“)
console.log("type=>",type)

VUE 之 封装自己的vue插件

猜你喜欢

VUE 之封装自己的vue插件