vue2.x自定义指令

最新推荐文章于 2024-06-27 11:01:07 发布
最新推荐文章于 2024-06-27 11:01:07 发布
阅读量202 收藏
点赞数
分类专栏： vue2.0 文章标签： vue2.0自定义指令
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tangkebo/article/details/86519727
版权

直接复制粘贴代码即可使用：

点击表格显示输入框，点击其它空白处消失。

<!DOCTYPE html>

<html>

 

<head>

<meta charset="UTF-8" />

<title>Hello React!</title>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

<style>

table{border-right:1px solid black;border-bottom:1px solid black}

table td{border-left:1px solid black;border-top:1px solid black;}

.skyblue{

background: skyblue;

}

/*

css 注释：

只对table td设置左与上边框；

对table设置右与下边框；

为了便于截图，我们将css 注释说明换行排版

*/

</style>

</head>

 

<body>

钩子函数

指令定义函数提供了几个钩子函数（可选）：

 

bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。

 

inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。

 

update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。

 

componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。

 

unbind: 只调用一次， 指令与元素解绑时调用。

 

<div id="app">

<h2>点击表格</h2>

<div style="position: relative">

<table width="400" border="0" cellspacing="0" cellpadding="0" v-clickoutside="handleClose">

<tr>

<td width="105">站名</td>

<td width="100">网址</td>

<td width="100">说明</td>

<td width="100">说明</td>

 

</tr>

<tr ref="tableTr" class="table-d-tr" v-for="(item,k) in tableData" :key="k" :data-k="k">

<td style="color:#9F6CAF;font-weight:bold;padding:8px;line-height: 1.42857143;">

{{item['dataWeek']}}

</td>

<td v-for="j in 3" :data-j="j">

<span style="display: inline-block;width: 100%; height: 46px;line-height: 46px;" :class="{skyblue:item['date'+(j-1)].skyblue}"

@click="openInput(k, j, item, $event)">{{ item['date'+(j-1)].value }}</span>

</td>

</tr>

</table>

<div ref="childPopover" style="position: absolute;background: #fff;border: 1px solid blanchedalmond;text-align:center;box-sizing: border-box; box-shadow: 0px 1px 2px #9E9E9E;" v-show="childPopoverShow">

<input ref="popoverInput" type="text" style="width:60px;" v-model="popoverValue">

<div style=" margin-top: 3px;">

<button @click="applyOk">确定</button>

<button @click="applyCancel">取消</button>

 

</div>

</div>

</div>

 

</div>

<script>

 

Vue.directive('clickoutside', {

bind(el, binding, vnode) {

function documentHandler(e) {

// 这里判断点击的元素是否是本身，是本身，则返回

if (el.contains(e.target)) {

return false;

}

// 判断指令中是否绑定了函数

if (binding.expression) {

// 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法

binding.value(e);

}

}

// 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听

el.__vueClickOutside__ = documentHandler;

document.addEventListener("click", documentHandler);

},

unbind(el, binding) {

// 解除事件监听

document.removeEventListener("click", el.__vueClickOutside__);

delete el.__vueClickOutside__;

}

})

 

var vm = new Vue({

el: '#app',

data: {

childPopoverShow: false,

message: '自定义指令',

color: 'red',

popoverValue: '',

handleDate: [],

handleTempDate: [],

tableData: (function () {

let n = 7;

let arrs = [];

for (let index = 0; index < n; index++) {

let arr = {

dataWeek: getWeek(index + 1),

date0: {

value: "1",

skyblue: false

},

date1: {

value: "2",

skyblue: false

},

date2: {

value: "3",

skyblue: false

}

};

arrs[index] = arr;

}

return arrs;

 

function getWeek(d) {

switch (d) {

case 7:

return "星期日";

break;

case 1:

return "星期一";

break;

case 2:

return "星期二";

break;

case 3:

return "星期三";

break;

case 4:

return "星期四";

break;

case 5:

return "星期五";

break;

case 6:

return "星期六";

break;

}

}

})()

},

methods: {

openInput(k, j, item, event) {

//注意：event.currentTarget

let ele = event.currentTarget;

let w = ele.parentNode.offsetWidth;

let h = ele.parentNode.offsetHeight;

let a = JSON.stringify(this.tableData);

let obj = JSON.parse(a);

let left = ele.parentNode.offsetLeft;

if (this.handleDate.length != 0) {

let oldDateName = this.handleDate[0];

let oldK = this.handleDate[1];

this.handleTempDate = ["date" + (j - 1), k];

this.handleDate.length = 0;

obj[oldK][oldDateName]["skyblue"] = false;

} else {

if (this.handleTempDate.length != 0) {

// console.log(obj)

obj[this.handleTempDate[1]][this.handleTempDate[0]]["skyblue"] = false;

}

this.handleDate = ["date" + (j - 1), k];

}

 

if (this.handleColumn != k) {

obj = this.clearSkyblue(obj, this.handleColumn);

this.$set(this.tableData, this.handleColumn, obj[this.handleColumn]);

}

this.popoverValue = "";

this.handleColumn = k;

obj[k]["date" + (j - 1)]["skyblue"] = true;

 

this.$refs["childPopover"].style.left = left - (100 - w) / 2 + "px";

this.$refs['childPopover'].style.top = h * (k + 1.5) + 'px';

this.$refs["childPopover"].setAttribute("data-x", k);

this.$refs["childPopover"].setAttribute("data-y", j);

this.childPopoverShow = true;

this.$set(this.tableData, k, obj[k]);

setTimeout(() => {

this.$refs["popoverInput"].focus();

}, 100);

 

},

clearSkyblue(data, k) {

// for(let i = 0;i<data.length;i++){

if (!k || k == "") return data;

let element = data[k];

for (let j = 0; j < 3; j++) {

element["date" + j]["skyblue"] = false;

}

data[k] = element;

return data;

// }

},

 

handleClose(e) {

var isChildPopover = this.$refs["childPopover"].contains(e.target);

if (isChildPopover) {

return false;

}

this.applyCancel();

},

applyCancel() {

this.$refs["popoverInput"].blur();

this.childPopoverShow = false;

this.cancelSkyblue();

},

cancelSkyblue() {

for (let j = 0; j < this.tableData.length; j++) {

let element = this.tableData[j];

for (let i = 0; i < 3; i++) {

element["date" + i]["skyblue"] = false;

}

}

},

applyOk() {

let k = this.$refs["childPopover"].getAttribute("data-x");

let j = this.$refs["childPopover"].getAttribute("data-y");

let obj = JSON.parse(JSON.stringify(this.tableData));

// console.log(this.popoverValue)

if (this.popoverValue < 0 || this.popoverValue > 100 || this.popoverValue == "" || !this.popoverValue) {

this.applyCancel();

// this.$alert('商品上架数量在0~100之间', '友情提示', {

// confirmButtonText: '确定',

// type: 'warning'

// });

return false;

}

obj[k]["date" + (j - 1)]["value"] = this.popoverValue;

obj[k].dataWeek = this.getWeek(Number(k) + 1);

this.$set(this.tableData, k, obj[k]);

this.applyCancel();

},

getWeek(d) {

switch (d) {

case 7:

return "星期日";

break;

case 1:

return "星期一";

break;

case 2:

return "星期二";

break;

case 3:

return "星期三";

break;

case 4:

return "星期四";

break;

case 5:

return "星期五";

break;

case 6:

return "星期六";

break;

}

}

}

})

</script>

 

</body>

 

</html>

tang丶有年
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue.js自定义指令学习使用详解
10-16
Vue.js自定义指令是Vue框架中的一个重要特性，它允许开发者扩展Vue的内置指令，创建自己的指令逻辑以满足特定需求。在本文中，我们将深入探讨Vue.js自定义指令的使用方法，以及如何通过不同钩子函数实现特定功能。 ...
vue2.x select2 指令封装详解
08-29
总结，Vue 2.x 的 Select2 指令封装是通过自定义指令实现组件与 Vue 数据模型的集成，利用 Vue 的生命周期钩子和事件处理机制来保持组件状态与数据的一致性。这种方法允许开发者在享受 Vue 的便利性的同时，充分利用...
Vue2.x自定义指令
茴香馅饺子~的博客
02-25 216
vue2.x自定义指令的书写~~~~
vue2.x 自定义指令
qq_42744920的博客
09-08 252
vue2.x 自定义指令
基于Element Plus的vClickOutside点击其他的地方关闭弹窗，并且添加多个忽略DOM元素
最新发布
程先生的博客
06-27 503
ClickOutside,vClickOutside,忽略，
【VUE】vue2.x与vue3.x中自定义指令详解
编码世界
12-05 3325
vue自定义指令(2.x丨3.x)可以帮助我们实现需要操作，比如防抖、节流、懒加载、输入框自动聚焦等等，使用起来非常方便，比如vue自带的v-text、v-html、v-show、v-if等等。
vue2.x与vue3.x中自定义指令详解
zz130428的博客
12-24 1617
vue自定义指令(2.x丨3.x)可以帮助我们实现需要操作，比如防抖、节流、懒加载、输入框自动聚焦等等，使用起来非常方便，比如vue自带的v-text、v-html、v-show、v-if等等。局部自定义指令：只在组件内有效全局自定义指令：所有组件都有效bind：只会调用一次，指令 第一次 绑定到元素时会调用inserted：被绑定元素插入父节点时调用。update：元素第一次绑定不会触发，绑定的值发生更新触发，可能发生在其子节点更新之前。
Vue2.x自定义指令实现header吸顶效果
tangpinger的博客
05-26 216
在有些场景中，我们需要实现一个header在向下滑动到一定距离时自动出现，否则隐藏，我们可以使用Vue2.x的自定义指令来实现。实现方法就是，在自定义指令中给window监听一个scroll事件，判断滚动的位置，设置组件的隐藏显示。
Vue2.x自定义指令 & mixin & plugin
weixin_44288627的博客
09-03 212
Vue2.x自定义指令 & mixin & plugin一、自定义指令二、mixins混入三、plugin插件 一、自定义指令 出了常见的v-for 、v-on等vue自带的指令，我们还可以去自定义指令。 比如我现在做个选项卡切换功能，希望视图和逻辑完全分离，于是定义个自定义指令，该指令可以复用，那么： vue文件： <template> <div class="parent" v-nav-cur="{ curIndex,className:'nav-ite
vue自定义指令(vue 2.x)
树上骑个猴的博客
08-22 117
自定义指令： 声明时不用加"v-"，使用时候要加"v-" 注意所有vue调用的函数都不要写箭头函数，就写普通函数就行了： vue的指令，可以接受4个参数，我们用前两个参数就好了： 定义和使用一个全局指令（Vue.directive） 定义一个局部指令(directives) 局部指令的使用 ...
Vue2.x 自定义权限指令以及自动注册
u014520406的博客
06-17 409
自定义权限组件
Vue2.x 常用自定义指令directives
Hassan的小博客!
05-31 794
文章目录v-expandClick ----元素点击范围扩展指令v-copy ----文本内容复制指令v-screenfull ----元素全屏指令v-tooltip ----元素说明指令v-ellipsis ----文字超出省略指令v-backtop ----元素点击回到顶部指令v-empty ----空状态指令v-badge ----元素徽标指令v-draggable ----元素拖拽指令v-resize ----响应缩放指令v-format ----字符串整形指令v-LazyLo
vue2.x自定义v-loading指令
weixin_44659286的博客
12-26 842
（vue3.x自定义v-loading思路类似） directive.js import Loading from './loading'; import Vue from 'vue'; const loadingDirective = { inserted(el, binding){ const loading = Vue.extend(Loading); el.instance = new loading({ el: document.crea
Vue2.x Todo之自定义指令实现自动聚焦的方法
10-17
我们希望用户双击 todo 进入编辑状态后输入框自动获取焦点，而不是需要先手动点一下。这篇文章主要介绍了Vue 2.x Todo之自定义指令实现自动聚焦,非常具有实用价值，需要的朋友可以参考下
vue3.x中使用cesium，vue3.x+Cesium
05-04
执行`vue create my-vue3-cesium-project`命令，然后选择自定义配置，这将允许你手动调整项目结构和配置。 2. **Webpack配置**: Cesium是一个大型库，包含大量的静态资源，因此需要对webpack配置进行调整。你需要...
【ESLint】Vue2/3 项目中的 ESLint + Prettier 代码检测格式化风格指南
tangkebo的博客
03-04 3951
Vue2/3 项目中的 ESLint + Prettier 代码检测格式化风格指南 因为平时都是使用 VSCode ESLint + Prettier 检测格式化不规范代码，但是随着接手的项目越来越多，需要统一每个项目的代码规范，于是在此分享vue项目的几种代码格式化风格(default,standard,airbnb,prettier)的基本区别以及修改为prettier风格。 对比肉眼可见的格式化风格差异，并且以字符串单/双引号，每行结尾有无分号，object对象最后一项有无尾逗号作为判断依据 VSC
vue源码学习（4）vm.$mount()
tangkebo的博客
10-10 1643
1. vm.$mount的使用 vm.$mount的作用：手动地挂载一个未挂载的实例到元素上 vm.$mount官网示例 vm.$mount的源码 //原函数 // Vue.prototype.$mount = function ( // el, // hydrating // ) { // el = el && inBrowser ? query(el) : undefined; // return mountComponent(this, el, hydrating)
多个table表格使用v-if切换展示时，会导致table表格渲染内容混淆
tangkebo的博客
09-26 618
问题：多个table表格使用v-if切换展示时，会导致table表格渲染内容出错 解决方法：给table加个 key 产生原因：vue在渲染组件的时候, 会先按照key判断是否是同一组件，如果没有则按照标签名，这样会导致渲染 el-table组件的时候， 多个被识别成同一个导致渲染内容混淆 ...
vue源码学习（3）Vue.nextTick()
tangkebo的博客
09-29 318
1. Vue.nextTick的使用 Vue.nextTick的使用的作用: Vue.nextTick官网示例 Vue.nextTick和平时代码中使用的this.$nextTick原理一样: //$nextTick 源码 Vue.prototype.$nextTick = function (fn) { return nextTick(fn, this) }; ... //Vue.nextTick源码部分 var callbacks = [] var pending = false var use
Vue.js 2.x API：配置与错误处理
Vue.js 2.x API 概述 Vue.js 是一个轻量级、高性能的前端JavaScript框架，用于构建用户界面。Vue.js 2.x 版本带来了许多优化和新特性，其中包括改进的API。以下是对Vue.js 2.x API的一些关键点的详细解释： 1. 全局...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值