当前位置: 首页 > news >正文

vue el-button 封装及使用

使用了 Element UI 中的 el-button 组件,并对其进行了封装和定制。

创建组件index.vue (src/common-ui/button/index.vue)
<template><el-buttonclass="h-button":type="type":icon="hIcon":disabled="disabled"@click="$emit('click')":loading="loading"><span class="h-button-caption">{{ hCaption }}</span></el-button>
</template><script>export default {name: 'HButton',props: {action: {type: String,validator (value) {return (['add','edit','delete','export','print','return','entry','addNoti','download','appointRow'].indexOf(value) !== -1)},defautl: 'add'},type: {type: String,default: 'primary'},btnClass: String,caption: String,icon: String,disabled: {type: Boolean,default: false},loading: {type: Boolean,default: false}},data () {return {hCaption: '',hIcon: ''}},created () {switch (this.action) {case 'add':this.hCaption = '新增'this.hIcon = ''breakcase 'edit':this.hCaption = '编辑'this.hIcon = ''breakcase 'delete':this.hCaption = '删除'this.hIcon = ''breakcase 'export':this.hCaption = '导出'this.hIcon = ''breakdefault:this.hCaption = this.captionthis.hIcon = this.iconbreak}if (this.caption) {this.hCaption = this.caption}},computed: {hasImg () {return (this.action === 'export' ||this.action === 'add' ||this.action === 'edit' ||this.action === 'delete' ||this.action === 'print' ||this.action === 'return' ||this.action === 'entry' ||this.action === 'addNoti')},isLang () {return (this.hCaption &&(this.hCaption.length > 4 ||(this.hCaption.length > 3 && (this.hIcon || this.hasImg))))}},watch: {btnClass: {handler (val) {},immediate: true}}}
</script>
页面引入
  • 在需要使用addressCascader组件的地方,通过import语句引入组件注册并使用

<template><div><templatev-for="({ caption, display, permissionKey, icon, disabled, callback, action, type, btnClass, loading },index) in buttonList"><h-button v-if="getButtonDisplay(display)":key="action ? index + action : index":action="action":btnClass="btnClass":caption="caption":icon="icon":disabled="disabled":type="type || 'primary'":loading="loading"@click="callback"v-permission="permissionKey"></h-button></template></div>
</template>
<script>import HButton from "@/common-ui/button/index";export default {components: {HButton},data() {return {dataSource: [],selectedValue: ''}},computed:{buttonList() {return [{caption: "返回",type: "warning",callback: this.back,btnClass: "warningButton"},{caption: "确认",type: "primary",callback: this.submit,btnClass: "primaryButton"}]}},methods: {back() {},submit() {}}// ...}
</script>

确保你已经安装了Vue.js和Element UI,并在项目中引入它们。

相关文章:

vue el-button 封装及使用

使用了 Element UI 中的 el-button 组件&#xff0c;并对其进行了封装和定制。 创建组件index.vue (src/common-ui/button/index.vue) <template><el-buttonclass"h-button":type"type":icon"hIcon":disabled"disabled"clic…...

QT之QMediaPlayer的用法

QT之QMediaPlayer的用法 成员函数例程 成员函数 1)setMedia(const QMediaContent &media, QIODevice *stream nullptr) 设置要播放的媒体内容&#xff0c;其中参数media指定了媒体内容&#xff0c;stream参数指定了用于读取媒体的输入设备&#xff08;如文件流&#xff0…...

TCP_报文格式解读

报文格式 header部分字段含义解析 固定字段 对于header中固定部分字段含义&#xff0c;见之前的blog《TCP报文分析》&#xff1b; 对部分字段含义补充说明 Data Offset&#xff1a;4bit&#xff0c;tcp header的长度&#xff0c;单位&#xff1a;32bit&#xff08;4字节&…...

C语言面试之旅:掌握基础,探索深度(面试实战之c语言关键词下篇)

一.枚举&#xff08; enum&#xff09; 枚举是 C 语言中的一种基本数据类型&#xff0c;用于定义一组具有离散值的常量&#xff0c;它可以让数据更简洁&#xff0c;更易读。枚举类型通常用于为程序中的一组相关的常量取名字&#xff0c;以便于程序的可读性和维护性。定义一个枚…...

Java学习第十三天

Java多态 多态是同一个行为具有多个不同表现形式或形态的能力。 多态就是同一个接口&#xff0c;使用不同的实例而执行不同操作 多态性是对象多种表现形式的体现。 多态的优点 1. 消除类型之间的耦合关系2. 可替换性3. 可扩充性4. 接口性5. 灵活性6. 简化性 多态存在的三个…...

【Delphi】实现彩色日志显示框(TRichEdit Helper)

目录 一、前言 二、实现方法 1. 第一步 2. 第二步 3. 第三步 三、主程序代码 四、下载 1. 可执行程序 2. 程序源代码 一、前言 在用Delphi做日常开发的时候&#xff0c;经常需要显示程序运行的日志&#xff0c;一般我们会使用TMemo&#xff0c;使用起来简单&#xff0c…...

Elasticsearch 优化查询中获取字段内容的方式,性能提升5倍!

1、背景 集群配置为&#xff1a;8 个 node 节点&#xff0c;16 核 32G&#xff0c;索引 4 分片 1 副本。应用程序的查询逻辑是按经纬度排序后找前 200 条文档。 1、应用对查询要求比较高&#xff0c;search 没有慢查询的状态。 2、集群压测性能不能上去&#xff0c;cpu 使用未打…...

图像批量设计软件Retrobatch Pro mac中文版功能特色

Retrobatch Mac是一款灵活的批量图像处理工具。用户可以自由创建Workflow来实现相应的功能&#xff0c;这些Workflow能取代大量的重复劳动&#xff0c;提高生产力。Retrobatch Mac的一般操作是从左边栏拖动相应动作到工作区形成节点&#xff08;Nodes&#xff09;&#xff0c;节…...

python第3天之函数

深入理解 Python 中的函数 简介 在编程中&#xff0c;函数是组织和复用代码的基本单元。Python 作为一门高级编程语言&#xff0c;提供了丰富的函数特性来帮助开发者编写清晰、模块化和高效的代码。在本文中&#xff0c;我们将深入探讨 Python 函数的定义、调用、参数、返回值…...

SQL Server 数据库,为products表添加数据

在插入数据的时候&#xff0c;需要注意以下事项。 > 每次插入一整行数据&#xff0c;不可能只插入半行或几列数据。 > 数据值的数目必须与列数相同&#xff0c;每个数据值的数据类型、精度和小数位数也必须与相应的 列匹配。 > INSERT语句不能为标识列指定值&#…...

C语言结构体详解(二)(能看懂文字就能明白系列)文章很长,慢慢品尝

系列文章目录 第一章 结构体的介绍和基本使用 &#x1f31f; 个人主页&#xff1a;古德猫宁- &#x1f308; 信念如阳光&#xff0c;照亮前行的每一步 文章目录 系列文章目录&#x1f308; *信念如阳光&#xff0c;照亮前行的每一步* 前言前面一篇文章主要介绍了结构体的基础…...

WPF不使用AllowsTransparency实现高性能透明背景异形窗体

前言 最近在WPF项目中使用到异形窗体结合Webbroswer组件做web界面的公告展示,当时不想太麻烦引入Cef组件,就想用自带的Webbroswer来做展示,为了美观还做了异形窗体,结果测试就杯具了,自带的Webbroswer在AllowsTransparency=“True” 模式下根本就无法显示,界面一片空白,…...

唯创知音WT2605C语音芯片MP3音频IC:轻松实现指令随机播放与无缝循环播放等功能

在现代化的电子产品中&#xff0c;音频功能的重要性日益凸显。无论是智能家居、玩具、医疗设备还是仪器仪表&#xff0c;富有吸引力的音效与语音提示都能显著提升用户体验。唯创知音WT2605C语音芯片MP3音频IC便是为了满足这一需求而诞生的&#xff0c;它具备指令随机播放、无缝…...

uniapp+微信小程序监听返回事件

代码附在最后 适用场景&#xff1a;uniapp开发微信小程序 需求是我点击列表进入数据信息的详情界面&#xff0c;点击详情界面的收藏&#xff0c;返回上一界面后&#xff0c;更新列表中的收藏情况。 目录 一、使用onUnload监听页面卸载 二、使用getCurrentPages()获取当前页…...

Python函数的高级用法

Python 的函数是“一等公民”&#xff0c;因此函数本身也是一个对象&#xff0c;函数既可用于赋值&#xff0c;也可用作其他函数的参数&#xff0c;还可作为其他函数的返回值。 使用函数变量 Python 的函数也是一种值&#xff1a;所有函数都是 function 对象&#xff0c;这意…...

excel单元格内换行按什么快捷键

如果我们使用excel软件的时候&#xff0c;因为一些日常的操作太过繁琐想要简化自己的操作步骤的话&#xff0c;其实是有很多快捷方式在其中的。那么对excel单元格内换行按什么快捷键这个问题&#xff0c;据小编所知我们可以在表格中使用Alt Enter来进行换行。详细内容就来看下…...

docker容器内部文件挂载主机

docker images执行该命令可以发现一个centos镜像 docker run --namemycentos -itd --privilegedtrue --restartalways -p 88:80 -v C:\Users\Administrator\Desktop\dockerTest:/bin/gh:ro centosdocker run 命令用于在 Docker 上创建和运行容器。 --namemycentos 指定容器…...

python 实现一个简单的计算器

python 实现一个简单的计算器 本文主要整合下tkinter ,实现下简单的计算器. 代码如下: #!/usr/bin/python3 # -*- coding: UTF-8 -*- """Author: zhTime 2023/12/2 下午13:01 .Email:Describe: """ import tkinter as tk# 创建计算器窗口 ro…...

前端对浏览器的理解

浏览器的主要构成 用户界面 &#xff0d; 包括地址栏、后退/前进按钮、书签目录等&#xff0c;也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分。 浏览器引擎 &#xff0d; 用来查询及操作渲染引擎的接口。 渲染引擎 &#xff0d; 用来显示请求的内容&#…...

Linux(openssl):X509_verify通过ca证书的public key验证证书的签名

/docs/man3.0/man3/X509_verify.html (openssl.org) 提供了方法用于通过ca证书的public key验证证书的签名 //verify_cert.hpp #include <string> #include <memory> #include <filesystem> #include <openssl/pem.h>using namespace std; namespace …...

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端&#xff0c;它允许HTTP与Elasticsearch 集群通信&#xff0c;而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议&#xff08;EPSFD 2025&#xff09;将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会&#xff0c;EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件

今天呢&#xff0c;博主的学习进度也是步入了Java Mybatis 框架&#xff0c;目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学&#xff0c;希望能对大家有所帮助&#xff0c;也特别欢迎大家指点不足之处&#xff0c;小生很乐意接受正确的建议&…...

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

YSYX学习记录(八)

C语言&#xff0c;练习0&#xff1a; 先创建一个文件夹&#xff0c;我用的是物理机&#xff1a; 安装build-essential 练习1&#xff1a; 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件&#xff0c;随机修改或删除一部分&#xff0c;之后…...

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...