# vue-directive vue 自定义指令

vue directive 自定义指令工具集

# 安装

将功能库安装至项目

# 安装聚合包
npm i @utils-core/main
# 安装独立功能库
npm i @utils-core/vue-directives

在项目中使用自定义指令工具集

// 聚合包
import { VueDirectives } from '@utils-core/main'
// 独立功能库
import VueDirectives from '@utils-core/vue-directives'
import { verifyMenuCodePermission } from '@/system/system/permission'

/**
 * vue 自定义指令集装配
 *
 * @param {array} directiveNames - 需要安装的指令名称，不传递则安装全部指令
 */
VueDirectives.directiveSetup()
/**
 * 操作权限指令安装
 * 在效果上，无权限的元素，效果与 v-if="false" 效果一致
 *
 * @param {function} isGranted - 通过编码验证功能权限函数
 * 
 * @example
 * <div v-permission="'SYSTEM_USER_ADD'"></div>
 */
VueDirectives.permissionSetup(verifyMenuCodePermission)

# directiveSetup 常规功能指令

directiveSetup(directiveNames?: string[]): void

参数可选项目

date
number
process

VueDirectives.directiveSetup(['date, number'])

以上指定的数组参数作用为仅注册 date 与 number 两个自定义指令，不指定参数则代表安装注册所有常规自定义指令集

# permissionSetup 权限控制指令

permissionSetup(isGranted: Function): void

权限控制指令注册时，需提供一个业务处理、检查函数

/**
 * 验证功能菜单、功能按钮是否拥有权限
 *
 * @param {string} code - 菜单、按钮编码
 * @returns {boolean}
 */
export function verifyMenuCodePermission (code) {
  ...
}

该函数的功能作用是本地项目对指定的编码内容检查权限有效性，例如功能菜单的有效性或界面功能按钮的有效性等

功能指令负责对元素内容进行条件性渲染，这个元素内容只会在指令的表达式返回真值时才被渲染。而指定的检查函数则负责对应用指令时指定的编码进行检查权限或功能的有效性判断

<div v-permission="'SYSTEM_USER_ADD'"></div>

上面的指令对 SYSTEM_USER_ADD 编码进行权限判断，值为真是渲染内容，假值则不渲染内容

# 常规内容转换指令

# v-date

日期格式化，将元素的内容格式化为指定的日期格式

# v-date 参数

日期格式 string

指定日期格式，例如：yyyy-MM-dd hh:mm:ss，若不指定格式则默认使用格式：yyyy-MM-dd

# v-date 使用方式实例

<!-- 指定自定义格式 -->
<span v-date="'yyyy-MM-dd hh:mm:ss'">1559631857305</span>
<!-- 不指定格式，使用默认格式 -->
<span v-date>1559631857305</span>

# v-date 实例

<span v-date="'yyyy-MM-dd hh:mm:ss'">1559631857305</span>
<!-- 结果：2019-06-04 15:04:17 -->
<span v-date>Tue Jun 04 2019 15:33:06 GMT+0800 (中国标准时间)</span>
<!-- 结果：2019-06-04 -->

# v-number

数字类型格式化（保留小数点位数），将元素内容格式化为指定位数小数点数字，位数不足则使用 0 补充，推荐用于数据统计，金额计算、展示等场景

# v-number 参数

保留小数点位数 (number)

指定数字保留小数点位数，默认为：2

# v-number 使用方式

<!-- 指定自定义保留位数 -->
<span v-number="4">3450.20</span>
<!-- 不指定格式，使用默认保留位数 -->
<span v-number>3450</span>

# v-number 实例

<span v-number="4">3450.20</span>
<!-- 结果：3450.2000 -->
<span v-number>3450</span>
<!-- 结果：3450.00 -->
<span v-number>3450.1234</span>
<!-- 结果：3450.12 -->

# v-process

按钮、输入元素过程处理

仅适用于原生 button 标签

# v-process 参数

过渡状态 (boolean)

# v-process 实例

<template>
  <button
    type="button"
    v-process="saving"
    @click="save"
  >
    保存
  </button>
</template>

<script>
export default {
  data () {
    return {
      saving: false
    }
  },
  methods: {
    save () {
      // 数据操作之前打开过渡状态
      this.saving = true

      doSave()
        .then(resp => { ... })
        .finally(() => {
          // 操作完成后，关闭过渡状态
          this.saving = false
        })
    }
  }
}
</script>

上例在点击按钮进行数据保存时，按钮处于禁用不可点击状态，同时按钮显示的文本被替换为 处理中…，当数据保存完成后，按钮恢复原状

建议

关闭过渡状态在 finally 函数中进行处理，若将该操作置于 then 函数中，在请求失败后，按钮则不会恢复原状

← storage 存储