vue 自定义指令 input框计算输入字数

export default {install(vue) {vue.directive('limit-count', {bind: function(el) {vue.nextTick(() => {el.style.position = 'relative'const target = el.getElementsByTagName('input')[0] || el.getElementsByTagName('textarea')[0]// 修改文本域样式，避免计数器被输入文字遮挡const textarea = el.getElementsByClassName('el-textarea__inner')[0]if (textarea) {textarea.style.border = `none`textarea.style.marginBottom = '20px'textarea.style.resize = 'none'el.style.border = '1px solid #DCDFE6'el.style.borderRadius = '4px'textarea.onfocus = function() {el.style.border = '1px solid #035BED'}textarea.onblur = function() {el.style.border = '1px solid #DCDFE6'}}let maxlength = 0// 创建插入计数器显示元素const createSpan = document.createElement('div')createSpan.className = 'ysx-limit-' + Date.now()if (target) {maxlength = target.getAttribute('maxlength')createSpan.innerHTML = `${target.value.length}/${maxlength}`if (maxlength) {el.appendChild(createSpan)const cssText = el.getElementsByTagName('input')[0] ? 'padding: 0 5px;position: absolute;height: 100%;right: 5px;top: 0;text-align: center;color: #A5A5A5; font-size: 12px;transition: all .3s;pointer-events: none;' : 'position: absolute; font-size: 12px; bottom: 5px; right: 5px;text-align: center;color: #A5A5A5; line-height: 12px;background:#fff;pointer-events: none;'createSpan.style.cssText = cssText}}el.targetEle = createSpanel.Currentlength = maxlength})},update(el, binding) {vue.nextTick(() => {if (binding.value) {el.targetEle.innerHTML = `${binding.value.length}/${el.Currentlength}`const targetwidth = el.targetEle.clientWidth// 计算计数器宽度，改变父元素的paddingRight避免文字遮挡if (el.className.includes('el-input')) {const input = el.getElementsByClassName('el-input__inner')[0]if (input) {input.style.paddingRight = `${targetwidth + 5}px`}}} else {el.targetEle.innerHTML = `${0}/${el.Currentlength}`}})}})}
}

vue 自定义指令 input框计算输入字数相关推荐

vue自定义组件数据双向绑定，获取vue自定义组件input框输入的值
1.首先创建一个自定义组件 Vue.component('test-component',{template:`<div id="el"><input @inpu ...
Vue 自定义指令解决IOS webview input 获取焦点被键盘遮挡
Vue 自定义指令解决IOS webview input 获取焦点被键盘遮挡创建自定义指令在使用input的地方添加自定义指令,记录一下还有优化空间. vue 文件 <div id=&qu ...
vue 自定义指令（directive）实例
一.内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href v-bind:class v-bind:title v-bind:bb 2.v-on:用于监听DOM事件: 例 ...
clientsideevents能定义几个click事件_分享8个非常实用的Vue自定义指令
作者:lzg9527 https://juejin.cn/post/6906028995133833230 在 Vue,除了核心功能默认内置的指令 ( v-model 和 v-show ),Vue 也 ...
9、Vue自定义指令
Vue自定义指令 1.vue指令和自定义指令 2.使用自定义指令 2.1.全局注册 2.2.局部注册 3.钩子函数 1.vue指令和自定义指令什么是指令? v-model.v-bind.v-on.v ...
29.VUE自定义指令directive和inserted
VUE自定义指令directive和inserted 1.什么事自定义指令 1.2使用自定义指令的方式 2.设置自定义组件 2.1 设置全局指令 2.2 设置私有指令 2.3 钩子函数 3. 案例 1 ...
vue 自定义指令 directive 全局 directives 局部 inserted update
vue 自定义指令需求效果全局 - 自定义指令代码局部 - 自定义指令代码自定义命令传值效果代码问点需求获取标签,扩展额外的功能效果全局 - 自定义指令代码 // mai ...
vue自定义指令封装节流_Vue自定义指令封装节流函数的方法示例
节流函数是web前端开发中经常用到的一个开发技巧,在input实时搜索,滚动事件等,为了避免过多消耗性能,我们都会使用节流函数.在<JavaScript高级程序设计>一书中有这样的一个例子 ...
vue自定义指令(详细)
局部自定义指令自定义指令可以调用 5个函数,4个参数函数: * bind:只调用一次,指令第一次绑定到元素时调用.在这里可以进行一次性的初始化设置. * inserted:被绑定元素插入父节点时调 ...

vue 自定义指令 input框计算输入字数

vue 自定义指令 input框计算输入字数相关推荐

最新文章

热门文章