ホームページ > 記事 > ウェブフロントエンド > Vue での 8 つの実践的なカスタム命令 (共有)
Vue での 8 つの実践的なカスタム命令 (共有)
- 青灯夜游転載
- 2020-12-21 09:26:332203ブラウズ
Vue では、コア関数 (v-model および v-show) のデフォルトの組み込み命令に加えて、カスタム命令の登録も可能です。この値は、開発者が特定のシナリオで通常の DOM 要素を操作する必要がある場合に役立ちます。
関連する推奨事項: 「vue.js チュートリアル 」
Vue カスタム命令には、グローバル登録とローカル登録の 2 つの方法があります。まずはグローバル ディレクティブの登録方法を見てみましょう。Vue.directive( id, [定義] ) を通じてグローバル ディレクティブを登録します。次に、エントリ ファイルで Vue.use() 呼び出しを行います。
バッチ登録手順。新しい directives/index.js ファイルを作成します。
import copy from './copy'
import longpress from './longpress'
// 自定义指令
const directives = {
copy,
longpress,
}
export default {
install(Vue) {
Object.keys(directives).forEach((key) => {
Vue.directive(key, directives[key])
})
},
}
main.js# に
import Vue from 'vue' import Directives from './JS/directives' Vue.use(Directives)を導入して呼び出します。 ## 命令定義関数には、いくつかのフック関数が用意されています (オプション):
- bind: 1 回だけ呼び出され、命令が初めて要素にバインドされるときに呼び出されます。バインド時に一度実行され、アクションを初期化します。
- inserted: バインドされた要素が親ノードに挿入されるときに呼び出されます (親ノードが存在する限り呼び出すことができ、必ずしもドキュメント内にある必要はありません)。
- update: バインディング値が変更されるかどうかに関係なく、バインドされた要素が配置されているテンプレートが更新されるときに呼び出されます。アップデート前後のバインディング値を比較してみます。
- componentUpdated: バインドされた要素が配置されているテンプレートが更新サイクルを完了すると呼び出されます。
- unbind: 命令が要素からバインドされていないときに、1 回だけ呼び出されます。
- 手順をコピーして貼り付けます
- v-copy
- v-longpress
- v-debounce
- v-emoji
##画像の遅延読み込みv-LazyLoad -
権限検証手順v-premission -
ページウォーターマークの実装v-waterMarker -
ドラッグ アンド ドロップ コマンドv-draggable -
##v-copy
- タグを動的に作成し、
- readOnly
属性を設定して、表示領域の外に移動しますになります。 コピーされた値は、textarea タグの - value
属性に割り当てられ、bodySelected 値に挿入されます。textarea をコピーして -
body -
に挿入したtextareaを削除します。初回呼び出し時にイベントをバインドして削除します。バインド解除時のイベント - 使用法: v-copy
const copy = {
bind(el, { value }) {
el.$value = value
el.handler = () => {
if (!el.$value) {
// 值为空的时候，给出提示。可根据项目UI仔细设计
console.log('无复制内容')
return
}
// 动态创建 textarea 标签
const textarea = document.createElement('textarea')
// 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘，同时将 textarea 移出可视区域
textarea.readOnly = 'readonly'
textarea.style.position = 'absolute'
textarea.style.left = '-9999px'
// 将要 copy 的值赋给 textarea 标签的 value 属性
textarea.value = el.$value
// 将 textarea 插入到 body 中
document.body.appendChild(textarea)
// 选中值并复制
textarea.select()
const result = document.execCommand('Copy')
if (result) {
console.log('复制成功') // 可根据项目UI仔细设计
}
document.body.removeChild(textarea)
}
// 绑定点击事件，就是所谓的一键 copy 啦
el.addEventListener('click', el.handler)
},
// 当传进来的值更新的时候触发
componentUpdated(el, { value }) {
el.$value = value
},
// 指令与元素解绑的时候，移除事件绑定
unbind(el) {
el.removeEventListener('click', el.handler)
},
}
export default copy
<template>
<button>复制</button>
</template>
<script> export default {
data() {
return {
copyText: 'a copy directives',
}
},
}
</script>
v-longpress に追加します。要件:長押しを実現するには、ユーザーはボタンを数秒間押し続けて、対応するイベントをトリガーする必要がありますアイデア:
タイマーを作成し、2 秒後に機能を実行します
- ユーザーがボタンを押すと、
- mousedown イベントがトリガーされてタイマーが開始され、ユーザーがボタンを放すと、
- mouseout
イベントが呼び出されます。mouseup イベントが 2 秒以内にトリガーされた場合は、タイマーをクリアし、通常のクリック イベントとして扱います。 タイマーが 2 秒以内にクリアされない場合は、長押しであると判定された場合、関連付けられた機能を実行することができる。 モバイル側で - touchstart 、
- touchend
イベントを検討します<pre class="brush:php;toolbar:false">const longpress = { bind: function (el, binding, vNode) { if (typeof binding.value !== 'function') { throw 'callback must be a function' } // 定义变量 let pressTimer = null // 创建计时器（ 2秒后执行函数 ） let start = (e) => { if (e.type === 'click' && e.button !== 0) { return } if (pressTimer === null) { pressTimer = setTimeout(() => { handler() }, 2000) } } // 取消计时器 let cancel = (e) => { if (pressTimer !== null) { clearTimeout(pressTimer) pressTimer = null } } // 运行函数 const handler = (e) => { binding.value(e) } // 添加事件监听器 el.addEventListener('mousedown', start) el.addEventListener('touchstart', start) // 取消计时器 el.addEventListener('click', cancel) el.addEventListener('mouseout', cancel) el.addEventListener('touchend', cancel) el.addEventListener('touchcancel', cancel) }, // 当传进来的值更新的时候触发 componentUpdated(el, { value }) { el.$value = value }, // 指令与元素解绑的时候，移除事件绑定 unbind(el) { el.removeEventListener('click', el.handler) }, } export default longpress</pre>使用: v-longpress# を Dom # に追加します# およびコールバック関数
<template>
<button>长按</button>
</template>
<script>
export default {
methods: {
longpress () {
alert('长按指令生效')
}
}
}
</script>
v-debounce背景: 開発中、一部の送信ボタンと保存ボタンが短期間に複数回クリックされることがあります。その結果、複数の繰り返しリクエストが発生します。バックエンド インターフェイスはデータの混乱を引き起こします。たとえば、新しいフォームの送信ボタンを複数回クリックすると、複数の重複データが追加されます。
要件: ボタンが短時間に複数回クリックされることを防ぎ、手ぶれ補正機能を使用して、指定された時間内でのクリックを 1 回のみに制限します。
アイデア:
遅延実行メソッドを定義します。遅延時間内にメソッドが再度呼び出された場合、実行時間は再計算されます。 時間をクリックメソッドにバインドします。const debounce = { inserted: function (el, binding) { let timer el.addEventListener('keyup', () => { if (timer) { clearTimeout(timer) } timer = setTimeout(() => { binding.value() }, 1000) }) }, } export default debounce使用法: - v-debounce とコールバック関数を Dom に追加します
<template>
<button>防抖</button>
</template>
<script>
export default {
methods: {
debounceClick () {
console.log('只触发一次')
}
}
}
</script>
v-emoji背景: 開発中フォーム入力絵文字や特殊文字は入力できない、数字や文字だけしか入力できないなど、入力内容に制限があることがよくあります。
通常の方法では、各フォームの
on-changeイベントを処理します。
<template>
<input>
</template>
<script> export default {
methods: {
vaidateEmoji() {
var reg = /[^u4E00-u9FA5|d|a-zA-Z|rns,.?!，。？！…—&$=()-+/*{}[]]|s/g
this.note = this.note.replace(reg, '')
},
},
} </script>
このコードは比較的大きく、保守が難しいため、この問題を解決するにはコマンドをカスタマイズする必要があります。 要件: 正規表現に基づいてフォーム入力ルールを処理するためのカスタム命令を設計します。以下では、例として絵文字と特殊文字の入力を禁止します。
let findEle = (parent, type) => {
return parent.tagName.toLowerCase() === type ? parent : parent.querySelector(type)
}
const trigger = (el, type) => {
const e = document.createEvent('HTMLEvents')
e.initEvent(type, true, true)
el.dispatchEvent(e)
}
const emoji = {
bind: function (el, binding, vnode) {
// 正则规则可根据需求自定义
var regRule = /[^u4E00-u9FA5|d|a-zA-Z|rns,.?!，。？！…—&$=()-+/*{}[]]|s/g
let $inp = findEle(el, 'input')
el.$inp = $inp
$inp.handle = function () {
let val = $inp.value
$inp.value = val.replace(regRule, '')
trigger($inp, 'input')
}
$inp.addEventListener('keyup', $inp.handle)
},
unbind: function (el) {
el.$inp.removeEventListener('keyup', el.$inp.handle)
},
}
export default emoji
使用法: 検証が必要な入力ボックスに
v-emojiを追加します。
<template> <input> </template>
v-LazyLoad 背景: 電子コマーシャル内プロジェクトには、バナー広告画像、メニュー ナビゲーション画像、Meituan などの販売者リストのヘッダー画像など、多数の画像が含まれることがよくあります。画像が多すぎたり、画像サイズが大きすぎたりすると、ページの読み込み速度に影響し、ユーザー エクスペリエンスが低下することがよくあるため、画像の遅延読み込みを最適化することが不可欠です。
要件: ブラウザーの表示領域にのみ画像を読み込むように、遅延画像読み込み命令を実装します。 ＃＃＃＃＃＃考え：＃＃＃
图片懒加载的原理主要是判断当前图片是否到了可视区域这一核心逻辑实现的
拿到所有的图片 Dom ，遍历每个图片判断当前图片是否到了可视区范围内
如果到了就设置图片的 src 属性，否则显示默认图片
图片懒加载的原理主要是判断当前图片是否到了可视区域这一核心逻辑实现的
拿到所有的图片 Dom ，遍历每个图片判断当前图片是否到了可视区范围内
如果到了就设置图片的 src 属性，否则显示默认图片
图片懒加载有两种方式可以实现，一是绑定 srcoll 事件进行监听，二是使用 IntersectionObserver 判断图片是否到了可视区域，但是有浏览器兼容性问题。
下面封装一个懒加载指令兼容两种方法，判断浏览器是否支持 IntersectionObserver API，如果支持就使用 IntersectionObserver 实现懒加载，否则则使用 srcoll 事件监听 + 节流的方法实现。
const LazyLoad = {
// install方法
install(Vue, options) {
const defaultSrc = options.default
Vue.directive('lazy', {
bind(el, binding) {
LazyLoad.init(el, binding.value, defaultSrc)
},
inserted(el) {
if (IntersectionObserver) {
LazyLoad.observe(el)
} else {
LazyLoad.listenerScroll(el)
}
},
})
},
// 初始化
init(el, val, def) {
el.setAttribute('src', val)
el.setAttribute('src', def)
},
// 利用IntersectionObserver监听el
observe(el) {
var io = new IntersectionObserver((entries) => {
const realSrc = el.dataset.src
if (entries[0].isIntersecting) {
if (realSrc) {
el.src = realSrc
el.removeAttribute('src')
}
}
})
io.observe(el)
},
// 监听scroll事件
listenerScroll(el) {
const handler = LazyLoad.throttle(LazyLoad.load, 300)
LazyLoad.load(el)
window.addEventListener('scroll', () => {
handler(el)
})
},
// 加载真实图片
load(el) {
const windowHeight = document.documentElement.clientHeight
const elTop = el.getBoundingClientRect().top
const elBtm = el.getBoundingClientRect().bottom
const realSrc = el.dataset.src
if (elTop - windowHeight 0) {
if (realSrc) {
el.src = realSrc
el.removeAttribute('src')
}
}
},
// 节流
throttle(fn, delay) {
let timer
let prevTime
return function (...args) {
const currTime = Date.now()
const context = this
if (!prevTime) prevTime = currTime
clearTimeout(timer)
if (currTime - prevTime > delay) {
prevTime = currTime
fn.apply(context, args)
clearTimeout(timer)
return
}
timer = setTimeout(function () {
prevTime = Date.now()
timer = null
fn.apply(context, args)
}, delay)
}
},
}
export default LazyLoad
使用，将组件内 标签的 src 换成 v-LazyLoad
<img alt="Vue での 8 つの実践的なカスタム命令 (共有)" >
v-permission
背景：在一些后台管理系统，我们可能需要根据用户角色进行一些操作权限的判断，很多时候我们都是粗暴地给一个元素添加 v-if / v-show 来进行显示隐藏，但如果判断条件繁琐且多个地方需要判断，这种方式的代码不仅不优雅而且冗余。针对这种情况，我们可以通过全局自定义指令来处理。
需求：自定义一个权限指令，对需要权限判断的 Dom 进行显示隐藏。
思路：
- 自定义一个权限数组
- 判断用户的权限是否在这个数组内，如果是则显示，否则则移除 Dom
function checkArray(key) {
let arr = ['1', '2', '3', '4']
let index = arr.indexOf(key)
if (index > -1) {
return true // 有权限
} else {
return false // 无权限
}
}
const permission = {
inserted: function (el, binding) {
let permission = binding.value // 获取到 v-permission的值
if (permission) {
let hasPermission = checkArray(permission)
if (!hasPermission) {
// 没有权限 移除Dom元素
el.parentNode && el.parentNode.removeChild(el)
}
}
},
}
export default permission
使用：给 v-permission 赋值判断即可
<div> <!-- 显示 --> <button>权限按钮1</button> <!-- 不显示 --> <button>权限按钮2</button> </div>
vue-waterMarker
需求：给整个页面添加背景水印
思路：
- 使用
canvas特性生成base64格式的图片文件，设置其字体大小，颜色等。 - 将其设置为背景图片，从而实现页面或组件水印效果
function addWaterMarker(str, parentNode, font, textColor) {
// 水印文字，父元素，字体，文字颜色
var can = document.createElement('canvas')
parentNode.appendChild(can)
can.width = 200
can.height = 150
can.style.display = 'none'
var cans = can.getContext('2d')
cans.rotate((-20 * Math.PI) / 180)
cans.font = font || '16px Microsoft JhengHei'
cans.fillStyle = textColor || 'rgba(180, 180, 180, 0.3)'
cans.textAlign = 'left'
cans.textBaseline = 'Middle'
cans.fillText(str, can.width / 10, can.height / 2)
parentNode.style.backgroundImage = 'url(' + can.toDataURL('image/png') + ')'
}
const waterMarker = {
bind: function (el, binding) {
addWaterMarker(binding.value.text, el, binding.value.font, binding.value.textColor)
},
}
export default waterMarker
使用，设置水印文案，颜色，字体大小即可
<template> <div></div> </template>
效果如图所示
v-draggable
需求：实现一个拖拽指令，可在页面可视区域任意拖拽元素。
思路：
设置需要拖拽的元素为相对定位，其父元素为绝对定位。
鼠标按下
(onmousedown)时记录目标元素当前的left和top值。鼠标移动
(onmousemove)时计算每次移动的横向距离和纵向距离的变化值，并改变元素的left和top值鼠标松开
(onmouseup)时完成一次拖拽
const draggable = {
inserted: function (el) {
el.style.cursor = 'move'
el.onmousedown = function (e) {
let disx = e.pageX - el.offsetLeft
let disy = e.pageY - el.offsetTop
document.onmousemove = function (e) {
let x = e.pageX - disx
let y = e.pageY - disy
let maxX = document.body.clientWidth - parseInt(window.getComputedStyle(el).width)
let maxY = document.body.clientHeight - parseInt(window.getComputedStyle(el).height)
if (x maxX) {
x = maxX
}
if (y maxY) {
y = maxY
}
el.style.left = x + 'px'
el.style.top = y + 'px'
}
document.onmouseup = function () {
document.onmousemove = document.onmouseup = null
}
}
},
}
export default draggable
使用: 在 Dom 上加上 v-draggable 即可
<template> <div></div> </template>
所有指令源码地址：https://github.com/Michael-lzg/v-directives
相关推荐：
更多编程相关知识，请访问：编程教学！！
以上がVue での 8 つの実践的なカスタム命令 (共有)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事はsegmentfault.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。