Vue设置全局指令之随机背景颜色

最新推荐文章于 2024-02-05 16:20:20 发布

旭很不戳

最新推荐文章于 2024-02-05 16:20:20 发布

阅读量610

点赞数

分类专栏：设置全局指令文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/zx960103/article/details/119189111

版权

设置全局指令专栏收录该内容

4 篇文章

订阅专栏

这篇博客介绍了如何在Vue中创建一个名为'bgc'的自定义指令，该指令使得任何绑定此指令的组件背景色都能随机变化。通过在插入元素时应用JavaScript的Math.random()函数来动态生成RGB颜色值，从而实现背景色的随机变换。此外，还提及了如何扩展此指令为DOM元素注册事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 全局指令：背景色就会随机变:在任何组件内都可以使用
Vue.directive("bgc", {
  // 使用时给标签添加v-bgc就可以了
  inserted(el) {
    let a = () => Math.floor(Math.random() * 256);
    el.style.backgroundColor = `rgb(${a()},${a()},${a()})`;
    // 拓展：给dom注册事件 
  },
});
// 拿走直接在脚手架中用