记录一下vue.js 自定义指令 -- 输入框字数长度限制
//css
.valLengthCounter {
position: absolute;
right: 5px;
font-size: 12px;
color: #888;
display: none;
}
//JavaScript
Vue.directive('limitation', {
bind: function(el, binding) {
},
inserted: function(el, binding) {
$(el).css('transition',' all 0.3s')
$(el).css('width',' 100%')
var counter = $("<span class='valLengthCounter '></span>")
$(el).attr('maxlength', binding.value)
$(el).parent('div').css({
'position': 'relative',
'display': 'flex',
'align-items': 'center',
'justify-content': 'space-between'
})
$(el).parent('div').append(counter)
$(el).siblings('.valLengthCounter').text($(el).val().length + '/' + binding.value)
el.addEventListener('keyup', function() {
curLength = $(el).val().length
$(el).siblings('.valLengthCounter').text($(el).val().length + '/' + binding.value)
})
el.addEventListener("focus", function() {
$(el).siblings('.valLengthCounter').fadeIn(300)
// cleaner.css('right', counter.width() + 30)
$(el).css('paddingRight', $(el).siblings('.valLengthCounter').width() + 20)
})
el.addEventListener("blur", function() {
$(el).siblings('.valLengthCounter').fadeOut(300)
// cleaner.css('right', 5)
$(el).css('paddingRight', 0)
})
}
})
