内置指令

前端鉴权

TIP

1. 关于鉴权，请先了解路由与权限 (opens new window)
2. v-auth指令内部是auth公共函数，它还可以通过传递路由的name来完成鉴权：前端鉴权-函数式 (opens new window)，传递name时可以不受当前页面path的限制。

v-auth指令可以读取当前页面的path，然后从服务端获取到的权限节点进行比对，来确定用户是否拥有按钮权限，无权限则隐藏按钮。

<template>
    <el-button v-auth="'add'">添加</el-button>
    <el-button v-auth="'edit'">编辑</el-button>
    <el-button v-auth="'del'">删除</el-button>
</template>

表格横向滚动

当表格宽度超出屏幕时，v-table-lateral-drag指令可以使得鼠标滚轮控制表格的横向滚动条。

<template>
    <el-table v-table-lateral-drag>
        <!-- ... -->
    </el-table>
</template>

点击自动失焦

el-button在点击后，不会自动失去焦点，造成按钮颜色异常，所以，我们准备了v-blur指令，该指令在点击后，立即将按钮脱焦。

<template>
    <el-button v-blur>点击后立即失去焦点</el-button>
</template>

缩放

v-zoom指令使元素支持缩放，传递的参数为需要支持缩放的元素的css类名。

<template>
    <el-dialog
        custom-class="ba-operate-dialog"
        v-model="dialogVisible"
    >
        <template #title>
            <div class="title" v-zoom="'.ba-operate-dialog'">标题</div>
        </template>
        <div>
            内容
        </div>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const dialogVisible = ref(true)
</script>

拖动

v-drag使得元素可以被拖动，传递的参数一为被拖动元素，参数二表示拖动句柄元素，仅在句柄元素内，可以进行拖动（比如只在弹出的标题范围内可以拖动整个弹窗）。

<template>
    <el-dialog
        custom-class="ba-operate-dialog"
        v-model="dialogVisible"
    >
        <template #title>
            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']">标题</div>
        </template>
        <div>
            内容
        </div>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const dialogVisible = ref(true)
</script>