【关键词】
操作DOM、自定义指令
【问题背景】
在快应用中，有些情况下我们需要对 DOM 元素进行访问，或者在元素创建、更新、销毁过程中处理相应的业务逻辑，通过快应用文档中现有的方法实现不了，我们需要使用自定义指令去完成我们想要的操作，这里就介绍下快应用中如何去使用自定义指令。
【实现方案】
1、 定义全局指令
当我们需要在多个页面或组件中使用某个自定义指令时，可以在 app.ux 中定义 directives 对象，directives 对象中可以定义多个自定义指令。定义后，在该应用下的所有页面、组件中，都可以使用这个指令。
App.ux相关代码的示例如下
<script>
export default {
directives: {
focus: {
mounted(el) {
// 获取到el对象，在原生插入到父节点后执行focus方法获得焦点
el.focus()
}
},
// ...其他全局指令定义
}
}
</script>
Hello.ux中
<template>
<div>
<input dir:focus></input>
</div>
</template>
上面的例子，我们在 app.ux 中定义了一个全局 focus 的指令。在页面或组件中，只需要在元素上增加 dir:focus（dir: 为自定义指令固定前缀，focus 为全局中定义的指令名称）就能应用该指令，当页面加载后， input 元素将会自动获得焦点。
2、定义页面、组件指令
页面、组件的指令定义和全局定义方式一致，同样是增加 directives 对象进行自定义指令定义。
Hello.ux
<template>
<div>
<text dir:textmounted="{{ message }}">message: "{{ message }}"</text>
</div>
</template>
<script>
export default {
directives: {
textmounted: {
mounted(el, binding) {
console.log(el) // text的DOM对象
console.log(binding) // text绑定的指令信息：{name: "textmounted", data: "Hello"}
}
}
},
data: {
message: 'Hello'
}
}
</script>
3、指令钩子函数
自定义指令定义对象可以提供如下的钩子函数
Mounted：所在元素创建并且插入父节点之后调用。
Update：所在元素更新时调用。如果元素同时更新了 N 个次（如同时更新了元素的 N 个属性、或 N 个样式），会调用 N 次，并且每次回调参数中都会有相应的更新信息。
Destroy：所在元素销毁后调用。
示例代码：
<template>
<div>
<text dir:report="{{ name }}">用户名称: {{ name }}</text>
</div>
</template>
<script>
export default {
directives: {
report: {
mounted(el, binding) {
console.log(el) // text的DOM对象
console.log(binding) // text绑定的指令信息：{name: "report", data: "小白"}
}
}
},
data: {
name: '小白'
}
}
</script>
注意：
1、 使用 model 指令需要快应用引擎版本>=1100 且 hap-toolkit 版本>=1.9.5。
2、 子组件的根节点使用指令时，不要与父组件引入组件标志位上使用同名的自定义指令。