【快应用】如何在快应用中使用自定义指令

【关键词】

操作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、 子组件的根节点使用指令时,不要与父组件引入组件标志位上使用同名的自定义指令。