0.1.1 • Published 2 years ago
vue-myplugin-ljt v0.1.1
基于elementui的二次封装
基于element-ui,需要先安装element-ui并引入样式。
个人学习使用,仅供参考
Project setup
npm i vue-myplugin-ljt
1、输入框
功能
1.绑定值,采用 :value 进行数据的双向绑定 2.必填项,添加 MustInput 属性,则输入框为黄底带必填icon的输入框 3.回车跳下一个 设置 focusNext 属性,绑定要跳转的下一个输入框的ref,即可实现按回车跳转下一个输入框,可自定义跳转顺序
<my-Input focusNext="next" :value="test" MustInput></my-Input>
<my-Input :value="test" MustInput></my-Input>
<my-Input ref="next" focusNext="search" :value="test" MustInput></my-Input>
2、按钮
功能
可以通过@rightClick实现右击事件
3、文本
功能
1.可以通过color、font、bold、align属性直接设置样式 2.可以通过@rightClick实现右击事件
4、自定义指定
(1)聚焦 v-directive
<my-Input v-directive :value="test"></my-Input>
(2) 防抖 v-debounce
防抖指令 单位时间只触发最后一次
@param {Function} fn - 执行事件
@param {?String|"click"} event - 事件类型 例:"click"
@param {?Number|500} time - 间隔时间
@param {Array} binding.value - [fn,event,time]
直接使用: <XXX v-debounce="reset]">刷新</XXX>
配置事件,间隔时间: <button v-debounce="[reset,'click',500]">刷新</button>
事件传递参数则: <button v-debounce="[()=>reset(param),`click`,500]">刷新</button>
(3) 节流 v-throttle
节流指令 一段时间内首次触发时立即执行,此时间段内再次触发,不会执行!
@param {Function} fn - 执行事件
@param {?String|"click"} event - 事件类型 例:"click"
@param {?Number|500} time - 间隔时间
@param {Array} binding.value - [fn,event,time]
直接使用: <XXX v-throttle="reset]">刷新</XXX>
配置事件,间隔时间: <button v-throttle="[reset,'click',500]">刷新</button>
事件传递参数则: <button v-throttle="[()=>reset(param),`click`,500]">刷新</button>
(4) 添加水印 v-waterMarker
可以设置text、font、textColor
<div style="width: 100px; height: 100px;border: 1px solid #ccc;position: relative;" v-waterMarker="{text: '测试', textColor: 'pink'}"></div>