vue自定义指令

Vue官网自定义指令: https://cn.vuejs.org/v2/guide/custom-directive.html

==========================================================================

demo1: 自定义指令实现input聚焦效果

<template>
  <div class="father">
    <div>测试input聚焦效果</div>
    <!-- 有聚焦效果 -->
    <!-- 在input 标签里面直接 使用  v-focus指令,实现自动聚焦-->
    <input type="text" v-focus />
    <!-- 无聚焦效果 -->
    <input type="text" />
  </div>
</template>

<script>
export default {
  directives: {
    focus: {
      // 指令的定义
      inserted: function (el) {
        el.focus()
      },
    },
  },
}
</script>

<style>
</style>

 

posted @ 2020-12-05 22:37  Kobe_bk  阅读(76)  评论(0编辑  收藏  举报