基于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>