mydirective
v-myimg: (单位:px) v-myimg:width,height (图片的宽高, 默认width=200,height=200) v-myimg:width,height.click (启用点击事件) v-myimg:width,height.key (启用键盘上下键事件) v-myimg:width,height.key.click (可以同时启动) v-myimg:width,height.key.click="n" (可以同时启用) n: { max: 1, (最大步进值,默认是1, 0< max) step: 0.3, (步进值,默认是0.3, 0< step) cardinal: 1 (步进基值,默认是1, 0<= cardinal) //非必要可不传 }
v-myfocus:
每个界面只能有一个v-myfocus,多个会在最后一个添加v-myfocus的元素上体现
v-myupload:
v-myupload.click="n"(开启.click点击图片的蒙层可以放大图片)
n: {
size: 0, (图片的最大kB)
type: '', (图片的类型)
file: [], (展示的所选图片的数据,类型是数组)
multiple: true, (true时,开启多选,默认为单选)
height: 100, (li的高度设置,宽度会以原图片的宽高比自动设置, 建议使用) //宽高可以同时设置
width: 100 (li的宽度设置,高度会以原图片的宽高比自动设置, 不建议使用)
}
在css中可以在直接操作<li />标签的样式
设置时记得添加 !importants
v-mydrag:
添加的元素可以拖拽
v-myenterfocus:
回车切换input框焦点指令,
将指令放在想要切换焦点的input标签的共有父级上,
切记配合element的时间框有bug(可以把时间框放在其他input的夫级元素外)
mytitlebothfun
封装的头像设置 v-mytitlebothfun="n" n: { file: [], (展示的所选图片的数据,类型是数组) filename: '' (得到文件的名称) }
myscroll
上滑触底触发函数 v-myscroll="n" n: { fun: function, (名为className的标签触底时触发的函数) date: number (防抖时间) className: string (实际滑动的标签class的名称) }
Project setup
npm install
引入方式
// 全部引入
import {directive} from '../lib/index' Vue.use(directive)
// 按需引入
import {scrollfun} from '../lib/index' // 示例 Vue.directive('myscroll',scrollfun)
Compiles and hot-reloads for development
npm run serve
Compiles and minifies for production
npm run build
Lints and fixes files
npm run lint