실제 프로젝트 개발에서는 복사 및 붙여넣기, 입력 상자 흔들림 방지, 입력 상자 특수 문자 금지, 권한 확인, 배경 워터마크, 끌어서 놓기 등과 같은 사용자 지정 지침이 자주 사용됩니다.
지휘란 참으로 우아한 존재이다.
Vue3에서 일반적인 사용자 지정 지시문을 정의하는 방법에 대한 자세한 지침은 공식 웹사이트(https://cn.vuejs.org/guide/reusability/custom-directives.html)를 참조하세요.
사용자 지정 지시문은 유사한 구성 요소 수명 주기 후크가 포함된 개체에 의해 정의됩니다. 후크 함수는 명령어가 바인딩된 요소를 매개변수로 받습니다.
사용자 정의 지시어 선택적 후크
const myDirective = {
// 在绑定元素的 attribute 前
// 或事件监听器应用前调用
created(el, binding, vnode, prevVnode) {
// 下面会介绍各个参数的细节
},
// 在元素被插入到 DOM 前调用
beforeMount(el, binding, vnode, prevVnode) {
},
// 在绑定元素的父组件
// 及他自己的所有子节点都挂载完成后调用
mounted(el, binding, vnode, prevVnode) {
},
// 绑定元素的父组件更新前调用
beforeUpdate(el, binding, vnode, prevVnode) {
},
// 在绑定元素的父组件
// 及他自己的所有子节点都更新后调用
updated(el, binding, vnode, prevVnode) {
},
// 绑定元素的父组件卸载前调用
beforeUnmount(el, binding, vnode, prevVnode) {
},
// 绑定元素的父组件卸载后调用
unmounted(el, binding, vnode, prevVnode) {
}
}
후크 매개변수
명령의 후크는 다음 매개변수를 전달합니다.
-
el: 지시문이 바인딩되는 요소입니다. 이는 DOM을 직접 조작하는 데 사용할 수 있습니다. -
binding: 다음 속성을 포함하는 개체입니다.value: 명령어에 전달된 값입니다. 예를 들어,v-my-directive="1 + 1"에서 값은2입니다.oldValue: 이전 값은beforeUpdate및updated에서만 사용할 수 있습니다. 값이 변경되는지 여부에 관계없이 사용할 수 있습니다.arg: 명령에 전달된 매개변수(있는 경우). 예를 들어v-my-directive:foo에서 매개변수는"foo"입니다.modifiers: 수정자를 포함하는 객체(있는 경우). 예를 들어,v-my-directive.foo.bar에서 수정자 개체는{ foo: true, bar: true }입니다.instance: 이 지시어를 사용하는 구성 요소 인스턴스입니다.dir: 명령어의 정의 개체입니다.
-
vnode: 바인딩된 요소의 기본 VNode를 나타냅니다. -
prevNode: 이전 렌더링에서 지시문이 바인딩된 요소를 나타내는 VNode입니다.beforeUpdate및updated후크에서만 사용할 수 있습니다.
다음은 필수 요소에 사용자 정의 워터마크를 추가하고 이 워터마크 명령을 전역적으로 등록하는 방법을 설명하는 사용자 정의 명령의 예입니다.
사용자 정의 워터마크 명령
어제 캔버스를 배웠고 우연히 워터마크 명령을 사용하여 연습하게 되었습니다. 주요 아이디어는 다음과 같습니다.
- 캔버스 캔버스 생성
- 캔버스에 워터마크를 그리고,
- 워터마크를 추가해야 하는 요소에 background-image 속성을 추가합니다. 속성값은 캔버스를 통해 생성된 base64입니다.
준비
먼저 src에 새 지시어 폴더를 만듭니다.
watermark.ts는 워터마크 명령어 코드입니다.
index.ts는 명령어의 통합 내보내기입니다.
watermark.ts
import {
DirectiveBinding } from 'vue'
// 水印
export default {
mounted(el: HTMLElement, binding: DirectiveBinding) {
let txt = 'hello world'
let style = {
}
if (binding && binding.value) {
txt = binding.value.txt
style = binding.value.style
}
genWatermark(el, txt, style)
}
}
interface CanvasTextStyle {
font?: string
color?: string
}
function genWatermark(el: HTMLElement, txt: string, style?: CanvasTextStyle) {
const defaultStyle = {
font: '14px arial',
color: 'rgba(0,0,0,0.2)'
}
let canvas = <HTMLCanvasElement>document.createElement('canvas')
let ctx = <CanvasRenderingContext2D>canvas.getContext('2d')
ctx.translate(150, 75)
ctx.rotate((Math.PI / 180) * 25)
ctx.translate(-150, -75)
ctx.font = style?.font || defaultStyle.font
ctx.fillStyle = style?.color || defaultStyle.color
ctx.textAlign = 'center'
ctx.textBaseline = 'middle'
ctx.fillText(txt, canvas.width / 2, canvas.height / 2)
el.style.backgroundImage = `url(${
canvas.toDataURL('image/png')})`
}
글로벌 등록 지침
사용 편의성을 위해 워터마크 명령을 전역적으로 등록하도록 선택했습니다.
먼저 index.ts를 통해 균일하게 내보냅니다.
지시문/index.ts
import {
App } from 'vue'
import color from './color'
import watermark from './watermark'
export default (app: App) => {
app.directive('color', color)
app.directive('watermark', watermark)
}
main.ts에서 가져오기
import App from './App.vue'
const app = createApp(App)
...
// 注册指令
import directive from './directive'
directive(app)
app.mount('#app')
마지막으로 컴포넌트 사용에서
<div v-watermark></div>
<div
v-watermark="{
txt: 'mocha vue3 system',
style: {
font: '10px gothic',
color: 'rgba(255,80,0,0.5)'
}
}"
></div>
아직 원하는 효과와 최종 결과물이 조금 다르지만 아쉽게도 제가 캔버스에 능숙하지 못해서 이렇게 깔끔하게 정리할 수 밖에 없네요.
물론 하나의 명령으로는 요구 사항을 충족할 수 없습니다. 다음으로 더 일반적인 명령이 이 프로젝트에 추가될 것입니다. 또 어떤 명령이 매우 유용하다고 생각하십니까?