10. 内置指令

开始之前

您可能需要了解 vue 自定义指令。/src/directive.ts 目录下。

按钮权限

参考 高级-按钮权限 章节

波浪

1. 代码路径

代码路径：/src/directive/customDirective.ts 中的 wavesDirective 方法，

可选参数：v-waves="< |light|red|orange|purple|green|teal>"，默认 ' '

2. 使用方法

• 作用于 btn

<el-button size="small" v-waves>
  <SvgIcon name="iconfont icon-bolangnengshiyanchang" />
  默认效果
</el-button>

• 作用于 div

<div class="waterfall-first-item" v-for="v in 12" :key="v" v-waves>
  <div class="w100 h100 flex">
    <span class="flex-margin">{{ v }}</span>
  </div>
</div>

弹窗拖动

1. 代码路径（弹窗）

代码路径：/src/directive/customDirective.ts 中的 dragDirective 方法

2. 使用方法（弹窗）

参数说明

参数一：dragDom 要拖动的元素

参数二：dragHeader 要拖动的 Header 位置（鼠标放入会变成手指状）

• 自定义 div。注意看 .drag-container .drag-dom 说明：选择作为类名 .drag-container 元素后代的所有类名 .drag-dom 元素（只要是防止页面上出现相同类名时，拿到的值不对的问题）。

您可能需要了解 CSS 选择器

<div class="drag-container">
  <div class="drag-dom">
    <div class="drag-header">
      <el-button
        type="success"
        size="small"
        v-drag="['.drag-container .drag-dom', '.drag-container .drag-header']"
      >
        <el-icon>
          <elementPointer />
        </el-icon>
        按住进行拖动测试
      </el-button>
    </div>
  </div>
</div>

• 作用于 Dialog 对话框，不支持指令直接放 el-dialog 上，所以得自定义插槽 <template #title>

<!-- 按钮 -->
<el-button type="primary" @click="dialogVisible = true" size="small">
  <el-icon>
    <elementPointer />
  </el-icon>
  点击打开 Dialog
</el-button>

<!-- 弹窗 -->
<el-dialog v-model="dialogVisible" width="769px">
  <template #title>
    <div
      v-drag="['.drag-container .el-dialog', '.drag-container .el-dialog__header']"
    >
      拖动指令效果（v-drag）
    </div>
  </template>
  <p>鼠标放标题头进行 Dialog 对话框拖动</p>
  <template #footer>
    <span class="dialog-footer">
      <el-button @click="dialogVisible = false" size="small">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false" size="small"
        >确 定</el-button
      >
    </span>
  </template>
</el-dialog>