// 默认导出,一个文件只能默认导出一次
export default {
len(el, binds) {
el.style.color = el.value.trim().length > 3 ? 'red' : '#000'
if (el.value.trim().length > 3) {
if (el.parentNode.lastChild.nodeName != 'SPAN') {
let span = document.createElement('span')
span.innerHTML = '字数超长了'
el.parentNode.appendChild(span)
}
} else {
if (el.parentNode.lastChild.nodeName == 'SPAN') {
el.parentNode.removeChild(el.parentNode.lastChild)
}
}
}
}
调用
<!-- 支持es6模块化 -->
<script type="module">
import validator from './js/Validator.js'
// 全局指令定义
// 参数1:书写指令名称,不要加v-
// 参数2:对象(标准写法) | 函数(简写,它是bind和update合成体)
// 回调函数中的参数2,它就是用来获取指令参入的参数
Vue.directive('len', validator.len)