首页 > 其他分享 >Vue插件

Vue插件

时间:2023-12-21 22:44:07浏览次数:36  
标签:插件 Vue binding value element plugins

功能:用于增强vue

本质:包含install方法的一个对象,install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据。   定义插件(新建一个plugins.js文件):
export default {
    install(Vue,x,y,z){
        console.log(x,y,z)
        //全局过滤器
        Vue.filter('mySlice',function(value){
            return value.slice(0,4)
        })

        //定义全局指令
        Vue.directive('fbind',{
            //指令与元素成功绑定时(一上来)
            bind(element,binding){
                element.value = binding.value
            },
            //指令所在元素被插入页面时
            inserted(element,binding){
                element.focus()
            },
            //指令所在的模板被重新解析时
            update(element,binding){
                element.value = binding.value
            }
        })

        //定义混入
        Vue.mixin({
            data() {
                return {
                    x:100,
                    y:200
                }
            },
        })

        //给Vue原型上添加一个方法(vm和vc就都能用了)
        Vue.prototype.hello = ()=>{alert('你好啊')}
    }
}

 

引入和使用插件

//引入插件
import plugins from './plugins'

//使用插件
Vue.use(plugins,1,2,3)

 

 

 

 

 

标签:插件,Vue,binding,value,element,plugins
From: https://www.cnblogs.com/yucongblog/p/17920291.html

相关文章

  • Vue3实现电商放大镜效果
    效果实现:功能拆解:左侧滑块跟随鼠标移动右则大图放大效果实现鼠标移入控制滑块和大图显示隐藏滑块跟随鼠标移动思路:获取到当前的鼠标在盒子内的相对位置(useMouseInElement),控制滑块跟随鼠标移动(left/top)获取鼠标相对位置控制滑块跟随移动有效移动范围内的计算逻辑......
  • vue-quill
    官网:https://vueup.github.io/vue-quill/引入vue-quill当前版本:"@vueup/vue-quill":"^1.2.0"npminstall@vueup/vue-quill@latest全局设置import{QuillEditor}from'@vueup/vue-quill';constapp=createApp(App);app.component(......
  • vue3 + vant4 :form表单中,搭配 Popup 和 Field 实现vant-picker组件,设置默认值及默认选
    环境:vue3,vant4背景:Picker作为用于辅助表单填写,搭配Popup和Field。页面需要给picker设置默认值,city为温州,但是在popup弹出时,picker没有选中温州这个选项,还时停留在杭州。解决方案:看了很多解决方案,设置default-indexset,ColumnIndex。都尝试了,还是不行。而且这些方法,其实在v......
  • 记录--Vue自动生成组件名
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助unplugin-generate-component-name一款用于以文件夹名或者setup标签写入名字来自动生成Vue组件名的插件。项目地址功能......
  • vue+element 上传文件及文件夹
    有需求需要做一个上传压缩包及文件夹的需求,记性不好,记录一下。HTML使用的element的upload和form表单,dropdown下拉菜单<div><el-col:span="24"><el-form-itemlabel="材料路径:"prop="fileName"><el-col:span="21&qu......
  • django+vue实现文件夹上传
    最近学django的文件上下传,网上的文件夹上下传压根没有,找了好几个,报错一大堆,没有一个能用,花里胡哨,可气!!!下面这个方法是我刚刚用过的,分享给大家。前端vue非常简单,template部分<inputtype="file"id="twos"webkitdirectory/><el-buttontype="primary"@click="sumfolder">文件夹......
  • vue3--使用ref获取Dom元素
    vue2中,ref使用:在div元素上绑定了ref属性,并命名为hello,接下来我们直接使用this.$refs.hello的方式就可以获取到该DOM元素了。<template><divid="app"><divref="hello">Vue2,ref获取dom元素</div></div></template><script>......
  • 基于vue3和elementplus实现的自定义table组件
    基于vue3和elementplus实现的自定义table组件,集成查询工具栏分页,可通过配置直接实现基础的列表页基于vue3和elementplus实现的自定义table组件,集成查询工具栏分页,可通过配置直接实现基础的列表页目录结构如下:类型声明:declaretypeDictType={value:string|boolean|n......
  • vue3 + xlsx 实现 excel 导入web页面解析成json数据
    vue3+xlsx实现excel导入web页面并解析成json数据fileIipt动态创建的标签,一定要用户点击事件触发,不然文件选择框的弹出会被拦截,无法弹出。意思就是下面这段关键代码要用一个事件区触发执行,不能主动执行(比如:vue的钩子)import*asXLSXfrom'xlsx'//v:"^0.18.5"letfil......
  • avue select多选 格式化列的内容
    AVUE  formatter用来格式化列内容formatter:(val,value,label)=>{letarr=val.invoiceType.split(',');letstr='';for(letindex=0;index<arr.length;index++){......