## 指令

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

使用该指令可以隐式的扩展元素的点击范围，由于借用伪元素实现，故不会影响元素在页面上的排列布局。  
可传入的参数为：上右下左扩展的范围，单位 px，默认向外扩展 10px。

```html
<template>
  <el-button type="primary" v-expandClick="20,30,40,50" @click="glabClickoutside">点击范围扩大</el-button>
</template>
<script>
  export default{
    methods: {
      glabClickoutside(){
        this.$message("点击了")
      }
    }
  }
</script>
<!-- directive-1.vue -->
```

#### 参数说明
| 参数 | 说明 | 默认值 | 可选 |
| :--- | :--- | :--- | :--- |
| `top`, `right`, `bottom`, `left` | 上右下左扩展宽度（逗号分割，单位px） | 10,10,10,10 | 可选 |



### 2. 文本内容复制指令 v-copy

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

```html
<template>
  <div class="container">
    <div v-copy>单击复制</div>
    <div v-copy.dblclick>双击复制</div>
    <div v-copy.icon>icon复制</div>
  </div>
</template>
<style lang="scss">
  .container {
    div {
      margin-bottom: 18px;
    }
  }
</style>
<!-- directive-2.vue -->
```

#### 参数说明
| 参数 | 说明 | 默认值 | 可选 |
| :--- | :--- | :--- | :--- |
| `dblclick` | 双击复制文本内容 | - | 可选 |
| `icon` | 单击icon复制文本内容 | - | 可选 |


### 3. 元素说明指令 v-tooltip

为元素添加说明，如同`element-ui`的`el-tooltip`，但直接使用`el-tooltip`需要包裹住要展示`tip`的元素，使用指令更方便。

```html
<template>
  <div class="container">
    <div v-tooltip="'这是默认的提示信息'">默认提示</div>
    <div v-tooltip.after="{content: '提示信息的图标在后面，提示内容可以通过对象指定'}">图标在后面</div>
  </div>
</template>
<style lang="scss">
  .container {
    div {
      margin-bottom: 18px;
    }
  }
</style>
<!-- directive-3.vue -->
```

#### 参数说明
| 参数 | 说明 | 默认值 | 可选 |
| :--- | :--- | :--- | :--- |
| `after` | `tooltip`的图标显示在后面 | - | 可选 |
| `tooltipParams` | `element-ui`支持的`tooltip`属性 | - | 可选 |

### 4. 文字超出省略指令 v-ellipsis

使用该指令当文字内容超出宽度时自动变为省略号形式。等同于使用`css`：

```css
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
```

```html
<template>
  <div class="container">
    <div style="width:120px" v-ellipsis>显示120px宽度的文字</div>
    <div v-ellipsis:80>显示80px的宽度的文字</div>
  </div>
</template>
<style lang="scss">
  .container {
    div {
      margin-bottom: 18px;
    }
  }
</style>
<!-- directive-4.vue -->
```

### 5. 徽标指令 v-badge

使用该指令在元素右上角显示徽标。支持配置徽标的背景颜色、徽标形状；支持传入徽标上显示的数字。

```html
<template>
  <div>
    <el-button type="primary" v-badge="count" @click="countPlus">增加</el-button>
    <el-button type="default" v-badge.warning="count" @click="countMinus">减少</el-button>
    <el-button type="warning" v-badge.dot.success>按钮</el-button>

    <el-tabs style="margin-top: 18px">
      <el-tab-pane label="用户管理" name="first">
        <span slot="label" v-badge="count">用户管理</span>
        用户管理
      </el-tab-pane>
      <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
      <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
      <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
  export default{
    data(){
      return {
        count: 6
      }
    },
    methods: {
      countPlus(){
        this.count++
      },
      countMinus(){
        this.count--
      }
    }
  }
</script>
<!-- directive-5.vue -->
```

#### 参数说明
| 参数 | 说明 | 默认值 | 类型 | 可选 |
| :--- | :--- | :--- | :--- | :--- |
| `normal`、`dot`	 | 徽标形状`normal`为正常徽标；`dot`仅为一个点 | `normal` | `String` | 可选 |
| `success`、`error`、`info`、`warning` | 徽标颜色 | `error` | `String` | 可选 |
| `number` | 徽标上显示的数字，小于等于0时会隐藏徽标 | - | `Number` | 可选 |

### 6. 响应缩放指令 v-resize

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

```html
<template>
  <div :style="divStyle" v-resize="resize">
    <el-button @click="heightPlus">增加高度</el-button>
    <el-button @click="heightReset">还原高度</el-button>
  </div>
</template>
<script>
  export default {
    data(){
      return {
        divStyle: {
          padding: "10px",
          display: "inline-block",
          border: "1px solid #ccc",
          height: "40px"
        }
      }
    },
    methods: {
      resize(){
        this.$message("div尺寸变化了")
      },
      heightPlus(){
        const { height } = this.divStyle
        this.divStyle.height = `${Number.parseInt(height) + 10}px`
      },
      heightReset(){
        this.divStyle.height = `40px`
      }
    }
  }
</script>
<!-- directive-6.vue -->
```

### 7. 字符串整形指令 v-format

使用该指令可以修改字符串，如使用`v-format.toFixed`保留两位小数、 `v-format.price`将内容变成金额（每三位逗号分隔），可以同时使用，如`v-format.toFixed.price`。
例如将数字`243112.331`变成`243112.33`，或`243,112.33`。

```html
<template>
  <div v-format.toFixed.price="price">{{price}}</div>
</template>
<script>
  export default {
    data(){
      return {
        price: 123333
      }
    }
  }
</script>
<!-- directive-7.vue -->
```

#### 参数说明
| 参数 | 说明 | 默认值 | 可选 |
| :--- | :--- | :--- | :--- |
| `toFixed` | 保留两位小数 | - | 可选 |
| `price` | 整形成金额（三位逗号分隔） | - | 可选 |

### 7. 气泡确认弹框 v-popconfirm

使用该指令可以为按钮加上一个气泡确认框，用户确认以后才执行相应的操作。

```html
<template>
  <el-button type="danger" v-popconfirm:test="handleRemove">删除</el-button>
  <el-button type="default" v-popconfirm="{confirm: handleRecall, before: beforeRecall}">撤回</el-button>
  <el-button type="default" v-popconfirm="{content:'确认终止该流程吗？', iconColor: 'red', confirm: handleEnd, before: beforeEndFlow}">终止</el-button>
</template>
<script>
  export default {
    methods: {
      handleRemove(m){
        this.$message(`已删除${m}`)
      },
      beforeRecall(){
        if(Math.random() * 10 % 2 > 1){
          this.$message({message: '该已办不允许撤回', type: 'error'})
          return false
        }
        return true
      },
      beforeEndFlow(){
        return new Promise((resolve, reject) => {
          if(Math.random() * 10 % 2 > 1){
            resolve()
          }
          else{
            this.$message({message: '该流程不允许终止', type: 'error'})
            reject()
          }
        })
      },
      handleRecall(){
        this.$message(`已撤回流程`)
      },
      handleEnd(m){
        this.$message(`已终止流程${m.iconColor}`)
      }
    }
  }
</script>
<!-- directive-8.vue -->
```

#### 参数说明
| 参数 | 说明 | 默认值 | 可选 |
| :--- | :--- | :--- | :--- |
| `content` | 弹窗提示信息 | 确定执行该操作？ | 可选 |
| `confirmButtonText` | 确认按钮文字 | 确定 | 可选 |
| `cancelButtonText` | 取消按钮文字 | 取消 | 可选 |
| `confirmButtonType` | 确认按钮类型 | `primary` | 可选 |
| `cancelButtonType` | 取消按钮类型 | `default` | 可选 |
| `icon` | 图标 | `question` | 可选 |
| `iconColor` | 图标颜色 | `#f90` | 可选 |
| `hideIcon` | 是否隐藏图标 | `false` | 可选 |
| `before` | 弹框前置事件，该事件返回`true`或者`Promise`中`resolve`时继续弹框，否则不显示弹框，注意：该事件不能写成调用形式（即不能带有括号）。该方法的参数为指令本身。 | - | 可选 |
| `confirm` | 确认按钮事件，注意：该事件不能写成调用形式（即不能带有括号）。该方法的参数为指令本身。 | - | 必选 |