当前位置：网站首页 > 技术分类 > 正文

超实用:Vue 自定义指令合集（vue自定义指令和自定义组件）

ztj100 2024-10-27 18:34 66 浏览 0 评论

在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。

你可以将一些 css 样式抽象到指令中，也可以将一些 js 操作放到指令中去执行。就使用上来说，指令不用像组件一样需要引入和注册，注册后使用非常简洁方便。

对于在项目中常用到的指令，在此做了一个合集介绍。

元素点击范围扩展指令 v-expandClick

使用该指令可以隐式的扩展元素的点击范围，由于借用伪元素实现，故不会影响元素在页面上的排列布局。

可传入的参数为：上右下左扩展的范围，单位 px，默认向外扩展 10px。

文本内容复制指令 v-copy

使用该指令可以复制元素的文本内容（指令支持单击复制 v-copy、双击复制 v-copy.dblclick、点击icon复制 v-copy.icon 三种模式），不传参数时，默认使用单击复制。

元素全屏指令 v-screenfull

全屏指令，点击元素进行全屏/退出全屏的操作。支持元素后面是否插入 element-ui 的全屏图标 el-icon-full-screen。

元素说明指令 v-tooltip

为元素添加说明，如同 element-ui 的 el-tooltip（问号 icon 在鼠标覆盖后，展示说明文字）。

文字超出省略指令 v-ellipsis

使用该指令当文字内容超出宽度（默认 100 px）时自动变为省略形式。等同于使用 css：

width: 100px;

whiteSpace: nowrap

overflow: hidden;

textOverflow: ellipsis;

回到顶部指令 v-backtop

使用该指令可以让页面或指定元素回到顶部。

可选指定元素，如果不指定则全局页面回到顶部。可选在元素偏移多少 px 后显示 backtop 元素；还可以在模板中任何元素上使用新的元素 v-backtop property。

也可以这样使用，表示为一直显示绑定指令的元素，并且是全局页面回到顶部：

空状态指令 v-empty

使用该指令可以显示缺省的空状态。可以传入默认图片（可选，默认无图片）、默认文字内容（可选，默认为暂无数据）、以及标示是否显示空状态（必选）。

徽标指令 v-badge

使用该指令在元素右上角显示徽标。

支持配置徽标的背景颜色、徽标形状；支持传入徽标上显示的数字。

拖拽指令 v-drag

使用该指令可以对元素进行拖拽。

响应缩放指令 v-resize

使用该指令可以响应元素宽高改变时执行的方法。

如何使用这些指令？

为了便于管理指令，我们将每个指令都存在于单独的 js 文件中，你可以像这样将指令 import 进来后注册指令：

或者你可以直接使用 Vue.deirect 进行注册。

vue dispatch

上一篇：高质量 Vue.js 自定义美化滚动条VueScroll
下一篇：Vue进阶(七十三):commits与dispatch

超实用:Vue 自定义指令合集（vue自定义指令和自定义组件）

元素点击范围扩展指令 v-expandClick

文本内容复制指令 v-copy

元素全屏指令 v-screenfull

元素说明指令 v-tooltip

文字超出省略指令 v-ellipsis

回到顶部指令 v-backtop

空状态指令 v-empty

徽标指令 v-badge

拖拽指令 v-drag

响应缩放指令 v-resize

如何使用这些指令？

相关推荐

取消回复欢迎你发表评论:

Vue自定义Hook示例:useUrlState（vue中的自定义指令如何使用）

Vue-实现自定义插件弹窗（vue 实现弹窗）

MySQL中这14个小玩意，让人眼前一亮!

旗舰机新标杆 OPPO Find X2系列正式发布售价5499元起

什么是幂等?分布式锁如何实现业务幂等?

手把手教你搞定菜单权限设计，精确到按钮级别，建议收藏

详解MySQL 字符串拼接之concat\concat_ws\group_concat

如何发个 npm 包?

如何快速切换node版本?利用n包快速切换nodejs版本

【Python机器学习系列】建立多层感知机模型预测心脏疾病

超实用:Vue 自定义指令合集（vue自定义指令和自定义组件）

元素点击范围扩展指令 v-expandClick

文本内容复制指令 v-copy

元素全屏指令 v-screenfull

元素说明指令 v-tooltip

文字超出省略指令 v-ellipsis

回到顶部指令 v-backtop

空状态指令 v-empty

徽标指令 v-badge

拖拽指令 v-drag

响应缩放指令 v-resize

如何使用这些指令？

相关推荐

取消回复欢迎 你 发表评论:

Vue自定义Hook示例:useUrlState（vue中的自定义指令如何使用）

Vue-实现自定义插件弹窗（vue 实现弹窗）

MySQL中这14个小玩意，让人眼前一亮!

旗舰机新标杆 OPPO Find X2系列正式发布 售价5499元起

什么是幂等?分布式锁如何实现业务幂等?

手把手教你搞定菜单权限设计，精确到按钮级别，建议收藏

详解MySQL 字符串拼接之concat\concat_ws\group_concat

如何发个 npm 包?

如何快速切换node版本?利用n包快速切换nodejs版本

【Python机器学习系列】建立多层感知机模型预测心脏疾病

取消回复欢迎你发表评论:

旗舰机新标杆 OPPO Find X2系列正式发布售价5499元起