ddButton 组件开发文档

组件介绍

DdButton 是基于 Element UI 的 el-button 组件封装的增强版按钮组件，提供了权限控制、Tooltip 提示、Popconfirm 确认框等增强功能，适用于需要精细化权限管理和交互体验优化的业务场景。

组件主要特性：

集成权限控制功能，基于 auth 属性实现按钮显示/隐藏控制
内置 Tooltip 提示功能，支持自定义提示内容和位置
支持 Popconfirm 确认框，用于危险操作的二次确认
自动收集按钮权限信息并上报（开发环境）
完整继承 el-button 的所有属性和方法

基本用法

基础按钮

<dd-button type="primary" content="主要按钮">主要按钮</dd-button>
<dd-button type="success" icon="el-icon-check">成功按钮</dd-button>
<dd-button type="danger" circle icon="el-icon-delete"></dd-button>
<dd-button size="mini" @click="closeAll">关 闭</dd-button>

带权限控制的按钮

<dd-button
  type="primary"
  auth="customer:delete"
  content="删除客户"
  @click="handleDelete"
>删除客户</dd-button>

<dd-button
  :auth="auth.sf"
  content="编辑客户"
  type="primary"
  @click="showFormFuncEdit()"
>编辑客户</dd-button>

<dd-button
  :auth="auth.dt"
  content="新增动态"
  type="primary"
  @click="showFormFunc('0')"
>新增动态</dd-button>

属性说明

基础属性（继承自 el-button）

属性名	类型	默认值	说明
type	String	'default'	按钮类型，可选值：primary/success/warning/danger/info/text
size	String	-	按钮尺寸，可选值：medium/small/mini
icon	String	-	按钮图标类名
loading	Boolean	false	是否显示加载状态
disabled	Boolean	false	是否禁用状态
plain	Boolean	false	是否朴素按钮
round	Boolean	false	是否圆角按钮
circle	Boolean	false	是否圆形按钮
autofocus	Boolean	false	是否自动获取焦点
native-type	String	'button'	原生 type 属性
ghost	Boolean	false	是否幽灵按钮
tag	String	'button'	按钮标签类型
href	String	-	跳转链接
target	String	-	链接打开方式

DdButton 增强属性

属性名	类型	默认值	说明
auth	String	''	权限标识，用于控制按钮显示/隐藏
show-tooltip	Boolean	true	是否显示 Tooltip
content	String	''	Tooltip 提示内容
placement	String	'bottom'	Tooltip 出现位置
effect	String	'dark'	Tooltip 主题，可选值：dark/light
show-popconfirm	Boolean	false	是否显示确认框
popconfirm-title	String	'确定要执行此操作吗?'	确认框标题
confirm-button-text	String	'确定'	确认按钮文本
cancel-button-text	String	'取消'	取消按钮文本
popconfirm-icon	String	'el-icon-warning'	确认框图标
popconfirm-icon-color	String	'#faad14'	确认框图标颜色

事件说明

事件名	说明	回调参数
click	按钮点击事件	event
mouseenter	鼠标进入事件	event
mouseleave	鼠标离开事件	event
focus	获得焦点事件	event
blur	失去焦点事件	event

权限控制

DdButton 组件通过 auth 属性实现权限控制功能，当指定的权限标识在当前用户权限列表中不存在时，按钮将自动隐藏。

工作原理

组件在 created 钩子中检查 auth 属性是否存在
开发环境下自动收集按钮权限信息并上报（通过 SmartQueue 队列）
基于权限检查结果决定按钮是否显示

使用示例

<!-- 有权限时显示 -->
<dd-button auth="customer:edit" type="primary">编辑客户</dd-button>

<!-- 无权限时自动隐藏 -->
<dd-button auth="customer:export" type="success">导出客户</dd-button>

高级特性

SmartQueue 权限收集队列

组件内置了 SmartQueue 队列用于开发环境下的权限信息收集，具有以下特性：

延迟 3000ms 执行，避免频繁请求
最大队列长度 10
批量处理权限信息
自动去重相同权限标识的请求

权限初始化流程

// 权限初始化核心代码
async initAuthFunc(module_name, route, buttons, auth) {
  const data = {
    route: route,
    module_name: module_name,
    buttons: buttons,
    apis: []
  };
  // 检查是否已有请求在进行中
  if (this.authPromises[auth]) {
    await this.authPromises[auth];
    return;
  }
  // 创建新的Promise并存储到缓存
  this.authPromises[auth] = new Promise(async (resolve, reject) => {
    try {
      const res = await initAuthBtnAndApi(data);
      resolve(res);
    } catch (error) {
      reject(error);
    } finally {
      delete this.authPromises[auth];
    }
  });
  await this.authPromises[auth];
}

注意事项

权限控制仅在生产环境生效，开发环境下所有按钮都会显示
当同时设置 disabled 和 auth 属性时，权限控制优先
Tooltip 仅在 content 属性有值且 show-tooltip 为 true 时显示
Popconfirm 确认框仅在 show-popconfirm 为 true 时生效
组件会自动收集权限信息，无需手动调用接口

与el-popconfirm结合使用

<el-popconfirm
  confirm-button-text="确认"
  cancel-button-text="取消"
  icon="el-icon-info"
  icon-color="red"
  title="确认删除吗?"
  @confirm="deleteRow(row, index)"
>
  <dd-button
    slot="reference"
    :auth="auth.delete"
    content="删除"
    type="danger"
    size="mini"
    icon="el-icon-delete"
    circle
  ></dd-button>
</el-popconfirm>

## 完整示例

```vue
<template>
  <div class="button-group">
    <!-- 基础按钮 -->
    <dd-button type="primary" content="主要操作">主要操作</dd-button>
    <dd-button type="default" icon="el-icon-edit">编辑</dd-button>
    <dd-button type="text" content="查看详情">查看</dd-button>

    <!-- 带权限控制的按钮 -->
    <dd-button
      type="danger"
      auth="customer:delete"
      content="删除客户"
      show-popconfirm
      popconfirm-title="确定要删除该客户吗?"
      icon="el-icon-delete"
      size="mini"
      @click="handleDelete"
    >删除</dd-button>

    <!-- 禁用状态 -->
    <dd-button type="primary" disabled content="禁用按钮">禁用按钮</dd-button>

    <!-- 加载状态 -->
    <dd-button type="success" :loading="loading" @click="handleLoading">加载中</dd-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false
    };
  },
  methods: {
    handleDelete() {
      // 删除操作逻辑
      this.$message.success('删除成功');
    },
    handleLoading() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
      }, 2000);
    }
  }
};
</script>

<style scoped>
.button-group {
  display: flex;
  gap: 10px;
  padding: 20px;
  flex-wrap: wrap;
}
</style>