* [元素点击范围扩展指令 v-expandClick](https://blog.csdn.net/weixin_45888412/article/details/118574856#_vexpandClick_6)
* [文本内容复制指令 v-copy](https://blog.csdn.net/weixin_45888412/article/details/118574856#_vcopy_41)
* [元素全屏指令 v-screenfull](https://blog.csdn.net/weixin_45888412/article/details/118574856#_vscreenfull_101)
* [文字超出省略指令 v-ellipsis](https://blog.csdn.net/weixin_45888412/article/details/118574856#_vellipsis_198)
* [回到顶部指令 v-backtop](https://blog.csdn.net/weixin_45888412/article/details/118574856#_vbacktop_232)
* [空状态指令 v-empty](https://blog.csdn.net/weixin_45888412/article/details/118574856#_vempty_288)
* [徽标指令 v-badge](https://blog.csdn.net/weixin_45888412/article/details/118574856#_vbadge_338)
* [拖拽指令 v-drag](https://blog.csdn.net/weixin_45888412/article/details/118574856#_vdrag_401)
* [响应缩放指令 v-resize](https://blog.csdn.net/weixin_45888412/article/details/118574856#_vresize_432)
* [字符串整形指令 v-format](https://blog.csdn.net/weixin_45888412/article/details/118574856#_vformat_466)
* [如何使用这些指令？](https://blog.csdn.net/weixin_45888412/article/details/118574856#_513)
### 元素点击范围扩展指令 v-expandClick
使用该指令可以隐式的扩展元素的点击范围，由于借用伪元素实现，故不会影响元素在页面上的排列布局。
可传入的参数为：上右下左扩展的范围，单位 px，默认向外扩展 10px。指令的代码如下：
参数 Attributes：
然后你可以在模板中任何元素上使用新的v-expandClick，如下：
### 文本内容复制指令 v-copy
使用该指令可以复制元素的文本内容（指令支持单击复制`v-copy`、双击复制`v-copy.dblclick`、点击icon复制`v-copy.icon`三种模式），不传参数时，默认使用单击复制
指令的代码如下：
参数 Attributes：
然后你可以在模板中任何元素上使用新的`v-copy``property`，如下：
### 元素全屏指令 v-screenfull
全屏指令，点击元素进行全屏/退出全屏的操作。支持元素后面是否插入`element-ui`的全屏图标`el-icon-full-screen`。
指令的代码如下：
参数 Attributes：
然后你可以在模板中任何元素上使用新的 v-screenfull，如下：
指令的代码如下：
参数 Attributes：
然后你可以在模板中任何元素上使用新的 v-tooltip，如下：
举例：
为指令传入`element-ui`支持的参数：
### 文字超出省略指令 v-ellipsis
使用该指令当文字内容超出宽度（默认 100 px）时自动变为省略形式。等同于使用 css：
使用指令效果：
指令的代码如下：
参数 Attributes：
然后你可以在模板中任何元素上使用新的`v-ellipsi`，如下：
### 回到顶部指令 v-backtop
使用该指令可以让页面或指定元素回到顶部。
可选指定元素，如果不指定则全局页面回到顶部。可选在元素偏移多少 px 后显示 backtop 元素，例如在滚动 400px 后显示回到顶部按钮。
指令的代码如下：
参数 Attributes：
然后你可以在模板中任何元素上使用新的`v-backtop`，如下表示在 id 为 app 的元素滚动 400px 后显示绑定指令的元素：
也可以这样使用，表示为一直显示绑定指令的元素，并且是全局页面回到顶部：
### 空状态指令 v-empty
使用该指令可以显示缺省的空状态。可以传入默认图片（可选，默认无图片）、默认文字内容（可选，默认为暂无数据）、以及标示是否显示空状态（必选）。
指令的代码如下：
参数 Attributes：
然后你可以在模板中任何元素上使用新的`v-empty`，如下传入对象 emptyValue：
需要传入一个参数对象，例如显示文字为：暂无列表，图片路径为`../../assets/images/blue_big.png`，控制标示`visible`：
### 徽标指令 v-badge
使用该指令在元素右上角显示徽标。
支持配置徽标的背景颜色、徽标形状；支持传入徽标上显示的数字。
指令的代码如下：
参数 Attributes：
然后你可以在模板中任何元素上使用新的`v-badge`，如下：
### 拖拽指令 v-drag
使用该指令可以对元素进行拖拽。
指令的代码如下：
然后你可以在模板中任何元素上使用新的`v-drag``property`，如下：
### 响应缩放指令 v-resize
使用该指令可以响应元素宽高改变时执行的方法。
指令的代码如下：
参数 Attributes：
然后你可以在模板中任何元素上使用新的 v-resize property，如下：
// 传入 resize() 方法
### 字符串整形指令 v-format
使用该指令可以修改字符串，如使用`v-format.toFixed`保留两位小数、`v-format.price`将内容变成金额（每三位逗号分隔），可以同时使用，如`v-format.toFixed.price`。
例如将数字`243112.331`变成`243112.33`，或`243,112.33`。
指令的代码如下：
参数 Attributes：
然后你可以在模板中任何元素上使用新的`v-format``property`，如下：
### 如何使用这些指令？
为了便于管理指令，我们将每个指令都存在于单独的 js 文件中。在项目的 src 下建一个 directives 目录，目录下新建 index.js 文件用于引入并注册指令。
`directives`目录下新建`ellipsis.js`文件：
`directives`的`index.js`文件中引入 ellipsis 指令并注册：
最后在`mian.js`中引入`index.js`文件：
这样就可以正常使用这些指令了：
- markdown
- 前端技术
- fiddler抓包
- thingjs项目设计
- 目录结构
- thingjs 模型
- 开发规范
- thingjs引入vuejs
- uniapp性能优化
- 防抖与节流
- uniapp 使用高德地图做路径规划不生效解决方法
- 5个CSS编程坏习惯
- echarts 刮刮乐
- jquery轮播图
- uniapp滚动问题
- 5 个不常提及的 HTML 技巧
- Http 缓存简介
- canvas像素操作
- Chrome 调试技巧
- H5隐藏特性
- vue 实战中的一些小技巧
- vue-video-player组件
- JS循环大总结
- vue自定义指令1
- 剩余运算符，扩展运算符（...）用法
- 后端技术
- 面向对象
- linux
- docker
- centos
- CentOS7安装MySQL
- CentOS7安装php
- 阿里云
- 添加宝塔
- 添加子域名
- ssl证书部署
- Liunx常用的命令
- php
- 项目常见问题总结
- 开发规范
- 9个PHP小技巧
- php生成二维码
- 算法
- 经纬度计算距离
- Kmp算法
- mysql
- 索引
- 索引概述及优势
- 索引结构
- 事务
- mysql 数据库任务计划
- 接口
- RESTful API接口设计标准及规范
- 保证接口的安全
- 了解DOS/DDOS/CSRF/XSS攻击
- 防止攻击
- mongoDB
- 安装
- Docker 安装 MongoDB
- 安装扩展
- docker安装mongodb扩展
- supervisor
- 自动化开发
- 接口字典代码配置
- 建模
- three模型展示
- 应用市场
- 应用宝上架流程
- vivo上架流程
- 华为上架流程
- 小米上架流程
- android 获取应用签名
- git部分
- git 基本操作命令
- git解决冲突
- 打包那些事
- electron
- android系统进程保活