首页 > 其他分享 >Vue插件

Vue插件

时间:2022-09-30 14:00:45浏览次数:60  
标签:插件 Vue confirm text myPlugin dialog

Vue插件

插件作用

插件通常用来为 Vue 添加全局功能

例如:
1、添加全局资源:指令/过滤器/过渡等。如 vue-touch
2、通过全局混入来添加一些组件选项。
3、添加 Vue 实例方法,通过把它们添加到 Vue.prototype 上实现。
4、一个库,提供自己的 API,同时提供上面提到的一个或多个功能。如 vue-router

开发

Vue官方规定插件必须暴露一个install方法,方法第一个参数为Vue实例

// myPlugin.js
export default function install (Vue) {
    Vue.prototype.$plugin = 'myPlugin'
}
// 或者
export default myPlugin = {
    install (Vue) {
        Vue.prototype.$plugin = 'myPlugin'
    }
}

// main.js
import myPlugin from '@/plugins/myPlugin'
Vue.use(myPlugin)  // 作用:调用myPlugin中install方法

插件示例

使用插件方式封装 element-ui messageBox,实现全局页面内调用

// dialogPlugin.js
export const dialogPlugin = {
  install(Vue) {
    function dialog({
      text,
      confirm,
      cancel,
      confirmButtonText = '确定',
      cancelButtonText = '取消',
      type = 'warning',
      title = '提示',
      center = false
    }) {
      if (!text) {
        throw new Error(`text is require`)
      }
      Vue.prototype.$confirm(text, title, {
        confirmButtonText,
        cancelButtonText,
        type,
        center
      }).then(() => {
        confirm && confirm()
      }).catch(() => {
        cancel && cancel()
      })
    }
    Vue.prototype.$dialog = dialog
  }
}

// main.js
import { dialogPlugin } from '@/plugins/dialog';
Vue.use(dialogPlugin)

// index.vue
this.$dialog({ text: 'xxxxx xxxx', title: 'xxxx', confirm: () => { console.log('xxx') } })

标签:插件,Vue,confirm,text,myPlugin,dialog
From: https://www.cnblogs.com/zh1q1/p/16744682.html

相关文章

  • spotbugs插件汉化
    spotbugs-translatespotbugs汉化,目前使用百度翻译进行机翻已经汉化好的插件(使用IDEA的InstallPluginfromDisk选择zip文件再重新安装):https://github.com/tyzou/spotb......
  • Vue实现防抖
    data(){return{//用于保存防抖的定时器timeout:null,}}methods:{//防抖函数debounce(fn,delay){if(this.......
  • 【面试题】888- Vue3.0 高频出现的几道面试题
    1.Vue3.0性能提升主要是通过哪几方面体现的?1.响应式系统提升vue2在初始化的时候,对data中的每个属性使用definepropery调用getter和setter使之变为响应式对象。如果属性值......
  • Vue3 从入门到入土(TypeScript接口)
    前言在上一章,我们就写过简单的接口,本章更深入的了解接口接口是对象的状态(属性)和行为(方法)的抽象(描述)接口以例子来了解,我们有这样的需求定义一个对象存放用......
  • 【尚硅谷】Vue2.x组件化编码学习笔记--渐进式的JS框架
    Vue组件化编码​​一、使用Vue-cli创建项目​​​​1.1说明​​​​1.2创建Vue项目​​​​1.2.1如何修改端口以及自动运行​​​​1.3Vue-cli创建的项目的目录结构​​......
  • Vue面试题27:为什么要使用路由懒加载?(总结自B站up主‘前端杨村长’视频,仅供自用学习)
    这是一道应用题。当打包应用时,JavaScript包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问时才加载对应组件,这样就会更加......
  • new Vue的时候到底做了什么
    Vue加载流程1.初始化的第一阶段是Vue实例也就是vm对象创建前后:首先Vue进行生命周期,事件初始化发生在beforeCreate生命周期函数前,然后进行数据监测和数据代理的初始化,也就是......
  • VUE2速成-5(插件及打包)
    文章目录​​一、Vue的插件大全​​​​二、Vue插件举例​​​​1.轮播图插件(vue-awesome-swiper)​​​​2.UI组件库(ElementUI)​​​​三、vue-cli打包部署​​一、Vue的......
  • VUE2速成-3(路由进一步及Ajax请求)
    文章目录​​一、路由进一步​​​​1.命名路由​​​​2.重定向和别名​​​​3.HTML5History模式​​​​4.导航守卫​​​​4.1全局前置守卫​​​​4.2全局后置......
  • new Vue的时候到底做了什么
    Vue加载流程1.初始化的第一阶段是Vue实例也就是vm对象创建前后:首先Vue进行生命周期,事件初始化发生在beforeCreate生命周期函数前,然后进行数据监测和数据代理的初始化,也就......