Vue3+Vite+TypeScript+Element Plus开发-21.客制按钮组件

<template>
  <div class="action-button-group">
    <el-button :icon="Search" circle />

    <el-button
      type="primary" 
      :icon="Plus" 
      circle 
      v-if="showAdd"      
      :disabled="disabledAdd"
      @click="handleAdd"
    />
    <el-button
      v-if="showEdit"
      type="primary" 
      :icon="Edit" 
      circle 
  
      :disabled="disabledEdit"
      @click="handleEdit"
    />
    <el-button
      v-if="showDelete"
      type="danger" 
      :icon="Delete"
      circle    
      :disabled="disabledDelete"
      @click="handleDelete"
    />
  </div>
</template>

<script  lang="ts"  setup>
import { defineProps, defineEmits } from "vue";
import {
    Plus,
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue' 


const props = defineProps({
  // 是否显示新增按钮
  showAdd: {
    type: Boolean,
    default: false,
  },
  // 是否显示修改按钮
  showEdit: {
    type: Boolean,
    default: false,
  },
  // 是否显示删除按钮
  showDelete: {
    type: Boolean,
    default: false,
  },
  // 新增按钮是否禁用
  disabledAdd: {
    type: Boolean,
    default: false,
  },
  // 修改按钮是否禁用
  disabledEdit: {
    type: Boolean,
    default: false,
  },
  // 删除按钮是否禁用
  disabledDelete: {
    type: Boolean,
    default: true,
  },
});

const emit = defineEmits(["add", "edit", "delete"]);

const handleAdd = () => {
  emit("add");
};

const handleEdit = () => {
  emit("edit");
};

const handleDelete = () => {
  emit("delete");
};
</script>

<style scoped>
.action-button-group {
  display: flex;
  gap: 0px;
}
</style>

父组件与子组件之间是一种嵌套关系，它们通过特定的机制进行数据传递和交互，以下是具体介绍：

数据传递•

父组件向子组件传递数据• 通过 props• 子组件通过 props 选项声明它期望从父组件接收的数据。例如，子组件 ActionBtnHdrCont.vue 中：

const props = defineProps({
  // 是否显示新增按钮
  showAdd: {
    type: Boolean,
    default: false,
  },
  // 是否显示修改按钮
  showEdit: {
    type: Boolean,
    default: false,
  },
  // 是否显示删除按钮
  showDelete: {
    type: Boolean,
    default: false,
  },
  // 新增按钮是否禁用
  disabledAdd: {
    type: Boolean,
    default: false,
  },
  // 修改按钮是否禁用
  disabledEdit: {
    type: Boolean,
    default: false,
  },
  // 删除按钮是否禁用
  disabledDelete: {
    type: Boolean,
    default: true,
  },
});

• 父组件在使用子组件时，通过绑定属性的方式传递数据：

<ActionButtonGroup
        :show-add="hasPermission('demo2:create')"  
        :show-delete="true"
        :disabled-add="false"
        :disabled-edit="false"
  
        @add="handleAdd"
        @edit="handleEdit"
        @delete="handleDelete"
      />

父组件-权限界面构建

新建文件： views/demos/permissionsInfoTwo.vue

重点说明：

1. 权限控制： 新增使用 hasPermission('demo2:create') 权限控制，与上一章节配套使用。

2. 组件按钮： 如果不需要定义组件按钮，可以不定义，例如： show-edit 未定义。

3. 外部按钮： Upload 为独立按钮组件，可根据项目需求进一步定制。

4. 事件处理： handleAdd 为父组件的事件处理函数

<template>
  <div>
    <div>权限演示-2</div>
    <div v-if="hasPermission('demo1:view')">demo1:view</div>
    <div v-if="hasPermission('demo2:view')">demo2:view</div>
     
    <div class="button-group-container">
      <ActionButtonGroup
        :show-add="hasPermission('demo2:create')"  
        :show-delete="true"
        :disabled-add="false"
        :disabled-edit="false"
  
        @add="handleAdd"
        @edit="handleEdit"
        @delete="handleDelete"
      />
      <el-button type="warning" :icon="Upload" circle />
      <el-button type="info" :icon="Message" circle />
       
    </div>
  </div>
</template>

<script lang="ts" setup>
import ActionButtonGroup from "@/components/ActionBtnHdrCont.vue";
import { usePermission } from "@/utils/permissionUtils";
import {
  Plus,
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
  Upload,
} from '@element-plus/icons-vue'

const hasPermission = usePermission();
const showAdd = hasPermission('add');
console.log(showAdd);

const handleAdd = () => {
  alert("新增按钮被点击了！");
};

const handleEdit = () => {
  alert("修改按钮被点击了！");
};

const handleDelete = () => {
  alert("删除按钮被点击了！");
};
</script>

<style scoped>
.button-group-container {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  gap: 5px; /* 按钮之间的间距 */
}
</style>