vue全局和局部自定义属性v-xxx

ue全局和局部自定义属性v-xxx
一局部自定义属性v-xxx,写在需要的组件内

<template>
  <div class="container">
    <h1>局部:自定义指令</h1>

    <!-- 局部自定义指令 -->
    <input type="text" v-aaa="numb" />
    <button @click="numb++">numb++</button>

    <div class="box" v-move></div>
  </div>
</template>

<script>
export default {
  // 自定义指令:对使用该指令 dom节点 做dom简单操作
  directives: {
    // v-自定义指令名称:v-aaa
    aaa: {
      inserted(el) {
        // 虚拟dom第一次渲染到页面是成为真实dom节点 执行
        //   el: 对使用该指令 真实dom节点
        el.focus();
      },
      update(el, obj) {
        // 自定义指令对应 数据/标签 更新时, 此方法执行
        //   el: 对使用该指令 真实dom节点
        //   obj:传入的数据对象,里面可以获取传入的数据值
        // console.log(obj);
        // obj里有个属性value
        el.style.width = 100 + obj.value + "px";
      },
    },
  },
};
</script>

<style scoped>
.container {
  height: 600px;
  border: 1px solid #ccc;
  position: relative;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  position: absolute;
  top: 200px;
  left: 0px;
}
</style>

二,全局自定义属性v-xxx,既然是全局,就要写在main.js里,重要的事情说三遍,写在main.js里,写在main.js里,写在main.js里,写在main.js里,写在main.js里

// 全局指令:背景色就会随机变:在任何组件内都可以使用
Vue.directive("bgc", {
  inserted(el) {
    let a = () => Math.floor(Math.random() * 256);
    el.style.backgroundColor = `rgb(${a()},${a()},${a()})`;

    // 拓展:给dom注册事件 
  },
});
Vue.directive("move", {
  inserted(el) {
    let father = el.parentNode;
    let mx_ = father.offsetWidth - el.offsetWidth;
    let my_ = father.offsetHeight - el.offsetHeight;
    el.onmousedown = function(e) {
      let x = e.offsetX;
      let y = e.offsetY;
      father.onmousemove = function(e) {
        let mx = e.clientX - x;
        let my = e.clientY - y;

        mx = mx > mx_ ? mx_ : mx;
        my = my > my_ ? my_ : my;

        mx = mx < 0 ? 0 : mx;
        my = my < 0 ? 0 : my

        el.style.left = mx + 'px';
        el.style.top = my + 'px';
      }
    }

    el.onmouseup = function() {
      father.onmousemove = null;
    }
  },
});


参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:深蓝海洋 设计师:CSDN官方博客 返回首页

打赏作者

古迪红尘

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值