ホームページ > 記事 > ウェブフロントエンド > Vue で知っておく価値のある 4 つのカスタム命令 (実践的な共有)
Vue で知っておく価値のある 4 つのカスタム命令 (実践的な共有)
- 青灯夜游転載
- 2021-12-15 19:35:282098ブラウズ
デフォルトのコア ディレクティブ (v-model および v-show) に加えて、Vue ではカスタム ディレクティブの登録も可能です。この記事では、実践的な vue カスタム手順を 4 つ紹介します。
#4 つの実践的な vue カスタム手順
#1、v -drag
- 要素のオフセット = マウスのスライド - の後の座標マウスが最初に要素をクリックしたとき、最初にクリックしたときの要素と表示領域の上部および左端との間の距離。
- 表示領域を境界として使用し、表示領域内でのドラッグを制限します。 [関連する推奨事項:「
- vue.js チュートリアル 」]
Vue.directive('drag', {
inserted(el) {
let header = el.querySelector('.dialog_header')
header.style.cssText += ';cursor:move;'
header.onmousedown = function (e) {
//获取当前可视区域宽、高
let clientWidth = document.documentElement.clientWidth
let clientHeight = document.documentElement.clientHeight
//获取自身宽高
let elWidth = el.getBoundingClientRect().width
let elHeight = el.getBoundingClientRect().height
//获取当前距离可视区域的top、left
let elTop = el.getBoundingClientRect().top
let elLeft = el.getBoundingClientRect().left
//获取点击时候的坐标
let startX = e.pageX
let startY = e.pageY
document.onmousemove = function (e) {
//元素偏移量 = 鼠标滑动后的坐标 - 鼠标初始点击元素时的坐标 + 初始点击时元素距离可视区域的top、left
let moveX = e.pageX - startX + elLeft
let moveY = e.pageY - startY + elTop
//将可视区域作为边界，限制在可视区域里面拖拽
if ((moveX + elWidth) > clientWidth || moveX < 0 || (moveY + elHeight) > clientHeight || moveY < 0) {
return
}
el.style.cssText += 'top:' + moveY + 'px;left:' + moveX + 'px;'
}
document.onmouseup = function () {
document.onmousemove = null
document.onmouseup = null
}
}
}
})
##2, v-wordlimit要件: 背景フィールドは長さを制限し、中国語と英語を区別します (中国語の場合は 2 バイト、英語の場合は 1 バイト)。したがって、入力ボックスは入力される単語の数を制限し、バイト数を区別する必要があり、入力された単語の数をエコーする必要があります。
アイデア:
1 バイトの Regular/[\x00-\xff]/g- 文字制限を囲む要素を作成し、レイアウトをテキストエリアに配置します入力ボックスで、
- は 1 バイトの入力文字 enLen と 2 バイトの cnLen をそれぞれ計算し、後続の文字列切り捨て処理に使用されます
- 入力文字数が制限を超えた場合単語数、切り捨て処理; substr(0,enLen cnLen)
- インターフェイスは入力ボックスの値を更新するか、入力ボックスの値を初期化し、正しいバイト数をエコーする必要があります
- コード:
Vue.directive('wordlimit',{
bind(el,binding){
console.log('bind');
let { value } = binding
Vue.nextTick(() =>{
//找到输入框是textarea框还是input框
let current = 0
let arr = Array.prototype.slice.call(el.children)
for (let i = 0; i < arr.length; i++) {
if(arr[i].tagName=='TEXTAREA' || arr[i].tagName=='INPUT'){
current = i
}
}
//更新当前输入框的字节数
el.children[el.children.length-1].innerHTML = el.children[current].value.replace(/[^\x00-\xff]/g,'**').length +'/'+value//eslint-disable-line
})
},
update(el,binding){
console.log('update');
let { value } = binding
Vue.nextTick(() =>{
//找到输入框是textarea框还是input框
let current = 0
let arr = Array.prototype.slice.call(el.children)
for (let i = 0; i < arr.length; i++) {
if(arr[i].tagName=='TEXTAREA' || arr[i].tagName=='INPUT'){
current = i
}
}
//更新当前输入框的字节数
el.children[el.children.length-1].innerHTML = el.children[current].value.replace(/[^\x00-\xff]/g,'**').length +'/'+value//eslint-disable-line
})
},
inserted(el,binding){
console.log('inserted');
let { value } = binding
//找到输入框是textarea框还是input框
let current = 0
let arr = Array.prototype.slice.call(el.children)
for (let i = 0; i < arr.length; i++) {
if(arr[i].tagName=='TEXTAREA' || arr[i].tagName=='INPUT'){
current = i
}
}
//创建包裹字数限制的元素，并定位布局在textarea和input框上
let div = document.createElement('div')
if(el.children[current].tagName=='TEXTAREA'){//是textarea，定位在右下角
div.style = 'color:#909399;position:absolute;font-size:12px;bottom:5px;right:10px;'
}else{
let styStr = ''
if(!el.classList.contains('is-disabled')){//input框不是置灰的状态则添加背景颜色
styStr = 'background:#fff;'
}
div.style = 'color:#909399;position:absolute;font-size:12px;bottom:2px;right:10px;line-height:28px;height:28px;'+styStr
}
div.innerHTML = '0/'+ value
el.appendChild(div)
el.children[current].style.paddingRight = '60px'
el.oninput = () =>{
let val = el.children[current].value
val = val.replace(/[^\x00-\xff]/g,'**') //eslint-disable-line
// 字数限制的盒子插入到el后是最后一个元素
el.children[el.children.length-1].innerHTML = val.length + '/' + value
if(val.length>value){
let cnLen = 0 //一个字节的字数
let enLen = 0 //两个字节的字数
if(val.match(/[^**]/g) && val.match(/[^**]/g).length){
enLen = val.match(/[^**]/g).length // 计算一个字节的字数
//一个字节两个字节都有的情况
if((value - val.match(/[^**]/g).length)>0){
cnLen = Math.floor((value - val.match(/[^**]/g).length)/2)
}else{
cnLen = 0
}
}else{ //全部两个字节的情况
enLen = 0
cnLen = Math.floor(value/2)
}
if(enLen>value){
enLen = value
}
//超过限定字节数则截取
el.children[current].value = el.children[current].value.substr(0,enLen+cnLen)
//更新当前输入框的字节数
el.children[el.children.length-1].innerHTML = el.children[current].value.replace(/[^\x00-\xff]/g,'**').length +'/'+value//eslint-disable-line
}
}
},
})使用:
<el-input type="textarea" rows="3" v-wordlimit="20" v-model="value"></el-input>
3、v-anthor要件: 要素 (通常はタイトル、サブタイトルなど) をクリックすると、アニメーションが対応するコンテンツ ブロックまでスクロールします。
アイデア:
タイマーは window.scrollBy- #IE を考慮しない場合は、直接 window.scrollBy({ top: ,left:0,behavior:'smooth' })
- を使用します。
- コード:
Vue.directive('anchor',{
inserted(el,binding){
let { value } = binding
let timer = null
el.addEventListener('click',function(){
// 当前元素距离可视区域顶部的距离
let currentTop = el.getBoundingClientRect().top
animateScroll(currentTop)
},false)
function animateScroll(currentTop){
if(timer){
clearInterval(timer)
}
let c = 9
timer = setInterval(() =>{
if(c==0){
clearInterval(timer)
}
c--
window.scrollBy(0,(currentTop-value)/10)
},16.7)
}
}
})使用: <div class="box" v-anchor="20" style="color:red;">是的</div>4、
v-hasRole ##要件: システムに応じて、対応する要素をロールに追加または削除します。コード:
Vue.directive('hasRole',{
inserted(el,binding){
let { value } = binding
let roles = JSON.parse(sessionStorage.getItem('userInfo')).roleIds
if(value && value instanceof Array && value.length>0){
let hasPermission = value.includes(roles)
if(!hasPermission){
el.parentNode && el.parentNode.removeChild(el)
}
}else{
throw new Error(`请检查指令绑定的表达式，正确格式例如 v-hasRole="['admin','reviewer']"`)
}
}
})プログラミング関連の知識の詳細については、次のサイトを参照してください:
プログラミング入門! ！
以上がVue で知っておく価値のある 4 つのカスタム命令 (実践的な共有)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事はjuejin.cnで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。