vue自定义指令v-focus、v-color

YeahNing

已于 2022-11-25 19:05:35 修改

阅读量420

点赞数

文章标签： vue.js javascript 前端

于 2022-11-25 19:00:54 首次发布

本文链接：https://blog.csdn.net/weixin_45990664/article/details/128042959

版权

1.布局创建自定义指令

在这里插入图片描述

directives: {
    focus: {
      // 指令的定义
      inserted: function (el) {
        el.focus(); // 页面加载完成之后自动让输入框获取到焦点的小功能
      },
    },

    color: {
      // 指令的定义
      inserted: function (el, binding) {
        el.style.color = binding.value; // 字体换颜色
      },
    },
  },

2.全局创建自定义指令

在这里插入图片描述

// 注册一个全局自定义指令 `v-focus`
Vue.directive("focus", {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus(); // 页面加载完成之后自动让输入框获取到焦点的小功能
  },
});