vue3 封裝一个常用固定按钮组件(添加、上传、下载、删除)

效果图

这个组件只有四个按钮,添加,上传、下载、删除,其中删除按钮的颜色默认是灰色,当表格有数据选中时再变成红色

实现 

组件代码

<script lang="ts" setup>
import { Icon } from '@/components/Icon/index'
import { useI18n } from '@/hooks/web/useI18n'const { t } = useI18n()defineProps({addBtnShow: {type: Boolean,default: false},selAddColor: {type: Boolean,default: false},importBtnShow: {type: Boolean,default: false},emportBtnShow: {type: Boolean,default: false},deleteBtnShow: {type: Boolean,default: false},selDelColor: {type: Boolean,default: false}
})
const emit = defineEmits(['click:add', 'click:import', 'click:emport', 'click:delete'])
</script>
<template><div class="flex"><v-btnv-if="addBtnShow"class="addBtn btn"size="28"variant="flat"color="primary"rounded:disabled="selAddColor"@click="emit('click:add')"><template #prepend><Icon icon="svg-icon:v2-myWidget-add" :size="20" color="#fff" cursor="pointer" /></template></v-btn><v-btnv-if="importBtnShow"class="importBtn btn"rounded="xl"color="#3DC676"width="82px"height="30px"variant="tonal"@click="emit('click:import')"><template #default><Icon icon="svg-icon:v2-arrow_upload" :size="20" color="#24A677" cursor="pointer" /><span style="font-size: 12px">{{ t('common.import') }}</span></template></v-btn><v-btnv-if="emportBtnShow"class="emportBtn btn"rounded="xl"color="#079DAA"width="82px"height="30px"variant="tonal"@click="emit('click:emport')"><template #default><Icon icon="svg-icon:v2-arrow_download" :size="20" color="#079DAA" cursor="pointer" /><span style="font-size: 12px">{{ t('common.export') }}</span></template></v-btn><v-btnv-if="deleteBtnShow"class="deleteBtn btn"size="28"variant="flat":color="selDelColor ? '#da4c4b' : '#c6c8cd'"rounded@click="emit('click:delete')"><template #prepend><Icon icon="svg-icon:v2-delete_line" :size="20" color="#fff" cursor="pointer" /></template></v-btn></div>
</template>
<style scoped lang="less">
.btn {margin-right: 20px;:deep(.v-btn__prepend) {.el-icon {margin-right: 0 !important;}}
}
</style>

使用方法

      <TableBtn:add-btn-show="hasManagePerm"@click:add="contactAction(null, 'add')":import-btn-show="hasManagePerm"@click:import="openImport":emport-btn-show="tableObject.total > 0"@click:emport="exportContactList":delete-btn-show="hasManagePerm":sel-delColor="selDelColor"@click:delete="contactDelete(null, true)"/>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/607102.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Gin实战教程】快速入门

Gin是一个轻量级的Web框架&#xff0c;使用Go语言开发。它具有高性能、易用性和灵活性的特点&#xff0c;是构建可扩展的Web应用程序的理想选择。 首先&#xff0c;Gin是一个高性能的框架。它基于Go语言的原生HTTP包进行开发&#xff0c;利用了Go语言的并发特性和协程模型&…

spark-sql字段血缘实现

spark-sql字段血缘实现 背景 Apache Spark是一个开源的大数据处理框架&#xff0c;它提供了一种高效、易于使用的方式来处理大规模数据集。在Spark中&#xff0c;数据是通过DataFrame和Dataset的形式进行操作的&#xff0c;这些数据结构包含了一系列的字段&#xff08;也称为…

在ASP.NET MVC中使用JQuery提供的弹出窗口(模态窗口)

在ASP.NET MVC中使用JQuery提供的弹出窗口&#xff08;模态窗口&#xff09; 原理 使用<div>图层灵活显示在浏览器的任何位置。默认情况下指定<div>不可见 引用 样式表 在JQuery的官方网站可以下载对应的css样式表。打开官网的样例页。 找到样式表引用路径 …

flex弹性盒子常用的布局属性详解

想必大家在开发中经常会用到flex布局。而且还会经常用到 justify-content 属性实现分栏等等 接下来给大家分别讲一下 justify-content 的属性值。 以下是我敲的效果图大家可以清晰看出区别 space-between 属性值可以就是说两端对齐 space-evenly 属性值是每个盒子之间的…

Requests库的接口测试实现

Requests库是在接口测试中被广泛运用的库&#xff0c;包括模拟请求的下发&#xff0c;请求相关配置和响应结果的获取&#xff0c;核心主体都是通过request库完成。在接口测试中使用非常频繁。 一、Requests库环境搭建 接口测试的核心从模拟请求开始。在Python中&#xff0c;通…

15个等轴视图设计的电动车汽车无人机等PR剪辑素材视频制作元素

包含15个等轴视图、等距视角电动车、汽车、无人机、沙漏、飞机等PR剪辑素材视频制作元素mogrt动画模板。 特征&#xff1a; 等距设计&#xff1b; 可以更改颜色&#xff1b; 分辨率&#xff1a;全高清&#xff08;19201080&#xff09;&#xff1b; 持续时间&#xff1a;15秒&a…

IDEA+Git——项目分支管理

IDEAGit——项目分支管理 1. 前言2. 基础知识点2.1. 分支区分2.2. Git 代码提交规范2.3. 四个工作区域2.4. 文件的四种状态2.5. 常用命令2.6 注重点 3. IDEA分支管理 1. 前言 在Git中&#xff0c;分支是项目的不同版本&#xff0c;当开始开发一个新项目时&#xff0c;主分支通常…

白话编程-概述

前言: 编程作为一种纯理性的学科,时刻都要明白自己到底在干什么.程序方面的书很多,却难以有那种把复杂问题讲清楚,让人很容易理解的.笔者想建立一种程序方面简单的思维,便于理解和记忆. 目录 一.概述 二.面向过程和面向对象 一.概述 编程到底是在干什么? 1)编程大多数情况…

使用命令行方式搭建uni-app + Vue3 + Typescript + Pinia + Vite + Tailwind CSS + uv-ui开发脚手架

使用命令行方式搭建uni-app Vue3 Typescript Pinia Vite Tailwind CSS uv-ui开发脚手架 项目代码以上传至码云&#xff0c;项目地址&#xff1a;https://gitee.com/breezefaith/uniapp-vue3-ts-scaffold 文章目录 使用命令行方式搭建uni-app Vue3 Typescript Pinia V…

深入理解C/C++指针:从基本操作到复杂表达式

目录 代码展示&#xff1a; 示例1&#xff1a;指向数组结束位置之后的地址 示例2&#xff1a;结构体大小对指针运算的影响 示例3&#xff1a;访问数组元素的不同方式 示例4&#xff1a;逗号表达式在数组初始化中的应用 示例5&#xff1a;计算多维数组元素间的地址差值 示…

【Python】不一样的Ansible(一)

不一样的Ansible——进阶学习 前言正文概念Ansible CorePlugins和Modules 插件插件类型编写自定义插件基本要求插件选项文档标准编写插件 添加一个本地插件注册为内置插件指定插件目录 其他一些技巧更改Strategy 结语 前言 Ansible 是一个极其简单的 IT 自动化引擎&#xff0c…

【Unity】动态申请权限

1、AndroidManifest.xml在<application></application>内添加一行&#xff1a; <meta-data android:name"unityplayer.SkipPermissionsDialog" android:value"true" /> 作用&#xff1a;屏蔽应用启动时弹出申请权限弹窗&#xff08;危…

签到积分--题解--c++--模拟

题目描述 每天签到一个应用程序&#xff0c;至少可以得 11 分&#xff0c;若前一天也签到了&#xff0c;则当天得分为前一天的得分加 11&#xff0c;一天最多只能得 55 分。 给定一个由 Y 及 N 构成的字符序列&#xff0c;该序列表示小爱每天签到的情况&#xff0c;签到记为 …

Windows下Redis5+可视化软件下载、安装和配置教程-2024年1月8日

Windows下Redis5下载、安装和配置教程-2024年1月8日 一、下载二、安装三、配置环境四、配置可视化客户端 一、下载 redis是现在是没有对win系统版进行维护的&#xff0c;这个是大神完成的&#xff0c;目前是到5版本&#xff0c;选择Redis-x64-5.0.14.1.zip点击下载 下载地址&…

pgAdmin和asdf postgres的安装

安装pgAdmin&#xff1a; curl https://www.pgadmin.org/static/packages_pgadmin_org.pub | sudo apt-key addsudo sh -c echo "deb https://ftp.postgresql.org/pub/pgadmin/pgadmin4/apt/$(lsb_release -cs) pgadmin4 main" > /etc/apt/sources.list.d/pgadmi…

Linux CentOS官方文档之U盘安装

准本U盘安装媒介 https://docs.centos.org/en-US/centos/install-guide/Making_Media_USB/ 在Mac OS X上制作安装USB媒介 1. 查看U盘 $ diskutil list2. umountdisk $ diskutil unmountDisk /dev/disknumber Unmount of all volumes on disknumber was successful3. 使用d…

.NET 6中如何使用Redis

1、安装redis Redis在windows平台上不受官方支持&#xff0c;所以想要在window安装Redis就必须去下载windows提供的安装包。安装地址&#xff1a;https://github.com/tporadowski/redis/releases 2、在NueGet安装包 3、在appsettings.json文件里面添加Redis相关配置信息 &quo…

MySQL之子查询、连接查询(内外)以及分页查询

一、案例&#xff08;接上一篇文章&#xff09; 09&#xff09;查询学过「张三」老师授课的同学的信息 -- 一共有两种方式 -- 第一种方式&#xff1a; SELECT s.*,c.cname,t.tname,sc.score FROMt_mysql_teacher t,t_mysql_course c,t_mysql_student s,t_mysql_score sc WHERE…

鸿蒙设备-开发板基础学习(BearPi-HM Micro)

theme: minimalism 每当学习一门新的编程语言或者上手一款新的开发板&#xff0c;在学习鸿蒙设备开发过程中&#xff0c;带大家写的第一个程序&#xff0c;通过这个程序&#xff0c;我们可以对鸿蒙设备开发的整个流程有一个初步的体验。BearPi-HM Micro开发板为例&#xff1a;…

「MCU」SD NAND芯片之国产新选择优秀

文章目录 前言 传统SD卡和可贴片SD卡 传统SD卡 可贴片SD卡 实际使用 总结 前言 随着目前时代的快速发展&#xff0c;即使是使用MCU的项目上也经常有大数据存储的需求。可以看到经常有小伙伴这样提问&#xff1a; 大家好&#xff0c;请问有没有SD卡芯片&#xff0c;可以…