Ant Design vue 组件 button自定义

已于 2023-03-19 15:29:14 修改
阅读量2.9k 收藏 1
点赞数
分类专栏： Vue CSS 前端技巧方法 文章标签： vue.js javascript 前端
于 2023-01-16 14:54:20 首次发布
夜空孤狼啸
本文链接：https://blog.csdn.net/qq_43940789/article/details/128704336
版权
Vue 同时被 3 个专栏收录
41 篇文章 2 订阅
订阅专栏
前端技巧方法
31 篇文章 5 订阅
订阅专栏
CSS
2 篇文章 0 订阅
订阅专栏
该文章展示了如何在Vue3中封装AntDesignVue的按钮组件，允许设置自定义颜色、大小和状态，包括禁用和加载状态。通过props传递参数，如type（颜色）、size（尺寸）和icon（图标类型），并使用watch进行动态更新。文章提供了不同颜色样式的CSS代码示例，并给出了使用组件的实际例子。
摘要由CSDN通过智能技术生成

封装Ant Design vue 组件 button按钮 自定义颜色，大小等

效果图如下：
在这里插入图片描述

在这里插入图片描述
在component文件中新建一个组件代码如下：

<template>
    <a-button :type="customType" :class="customClass" :size="customSize" :disabled="disabled">
        <template v-if="iconType" #icon>
            <component :is="iconType" />
        </template>
        <slot />
    </a-button>
</template>
<script>
import { defineComponent, ref, watch } from 'vue'
export default defineComponent({
    name: 'CButtonIndex',
    props: {
        type: { type: String, default: '' },
        size: { type: String, default: '' },
        icon: { type: String, default: '' },
        disabled: { type: Boolean, default: false },
        permission: { type: [String, Boolean], default: true }
    },
    setup(props) {
        const customClass = ref('c-button-primary')
        const customType = ref('')
        const customSize = ref('middle')
        const iconType = ref('')
        watch(() => props.type, (v) => {
            switch (v) {
                case 'yellow':
                    customClass.value = 'c-button-yellow'
                    customType.value = 'default'
                    break
                case 'warning':
                    customClass.value = 'c-button-warning'
                    customType.value = 'default'
                    break
                case 'error':
                    customClass.value = 'c-button-error'
                    customType.value = 'default'
                    break
                case 'success':
                    customClass.value = 'c-button-success'
                    customType.value = 'default'
                    break
                case 'primary':
                    customClass.value = 'c-button-primary'
                    customType.value = 'primary'
                    break
                case 'cyan':
                    customClass.value = 'c-button-cyan'
                    customType.value = 'default'
                    break
                case 'black':
                    customClass.value = 'c-button-black'
                    customType.value = 'default'
                    break
                case 'purple':
                    customClass.value = 'c-button-purple'
                    customType.value = 'default'
                    break
                case 'text':
                    customClass.value = ''
                    customType.value = 'text'
                    break
                case 'link':
                    customClass.value = ''
                    customType.value = 'link'
                    break
                default:
                    customClass.value = ''
                    customType.value = 'default'
                    break
            }
        }, { immediate: true })
        watch(() => props.size, v => {
            customSize.value = !v ? 'middle' : v
        }, { immediate: true })
        watch(() => props.icon, v => {
            iconType.value = v
        }, { immediate: true })
        watch(() => props, () => { }, { immediate: true })
        return {
            customClass,
            customType,
            customSize,
            iconType
        }
    }
})
</script>
<style scoped>
.c-button-yellow {
    color: #fff;
    background-color: rgb(180, 180, 63);
    border-color: rgb(180, 180, 63);
}

.c-button-yellow:hover {
    color: #fff;
    background-color: rgb(202, 202, 67);
    border-color: yellow;
}

.c-button-yellow[disabled],
.c-button-yellow[disabled]:hover,
.c-button-yellow[disabled]:focus,
.c-button-yellow[disabled]:active {
    color: rgba(0, 0, 0, 0.25);
    background: #f5f5f5;
    border-color: #d9d9d9;
    text-shadow: none;
    box-shadow: none;
}


.c-button-primary {
    color: #fff;
    background-color: #2db7f5;
    border-color: #2db7f5;
}

.c-button-primary:hover {
    color: #fff;
    background-color: #3dc1fc;
    border-color: #2db7f5;
}

.c-button-primary[disabled],
.c-button-primary[disabled]:hover,
.c-button-primary[disabled]:focus,
.c-button-primary[disabled]:active {
    color: rgba(0, 0, 0, 0.25);
    background: #f5f5f5;
    border-color: #d9d9d9;
    text-shadow: none;
    box-shadow: none;
}

.c-button-warning {
    color: #fff;
    background-color: #ff9900;
    border-color: #ff9900;
}

.c-button-warning:hover {
    color: #fff;
    background-color: #fcac35;
    border-color: #ff9900;
}

.c-button-warning[disabled],
.c-button-warning[disabled]:hover,
.c-button-warning[disabled]:focus,
.c-button-warning[disabled]:active {
    color: rgba(0, 0, 0, 0.25);
    background: #f5f5f5;
    border-color: #d9d9d9;
    text-shadow: none;
    box-shadow: none;
}

.c-button-error {
    color: #fff;
    background-color: #ff3300;
    border-color: #ff3300;
}

.c-button-error:hover {
    color: #fff;
    background-color: #fc653f;
    border-color: #ff3300;
}

.c-button-error[disabled],
.c-button-error[disabled]:hover,
.c-button-error[disabled]:focus,
.c-button-error[disabled]:active {
    color: rgba(0, 0, 0, 0.25);
    background: #f5f5f5;
    border-color: #d9d9d9;
    text-shadow: none;
    box-shadow: none;
}

.c-button-success {
    color: #fff;
    background-color: #00cc66;
    border-color: #00cc66;
}

.c-button-success:hover {
    color: #fff;
    background-color: #03e071;
    border-color: #00cc66;
}

.c-button-success[disabled],
.c-button-success[disabled]:hover,
.c-button-success[disabled]:focus,
.c-button-success[disabled]:active {
    color: rgba(0, 0, 0, 0.25);
    background: #f5f5f5;
    border-color: #d9d9d9;
    text-shadow: none;
    box-shadow: none;
}

.c-button-cyan {
    color: #fff;
    background-color: #04c1e1;
    border-color: #04c1e1;
}

.c-button-cyan:hover {
    color: #fff;
    background-color: #0ad5f8;
    border-color: #04c1e1;
}

.c-button-cyan[disabled],
.c-button-cyan[disabled]:hover,
.c-button-cyan[disabled]:focus,
.c-button-cyan[disabled]:active {
    color: rgba(0, 0, 0, 0.25);
    background: #f5f5f5;
    border-color: #d9d9d9;
    text-shadow: none;
    box-shadow: none;
}

.c-button-black {
    color: #fff;
    background-color: #131313;
    border-color: #131313;
}

.c-button-black:hover {
    color: #fff;
    background-color: #313131;
    border-color: #131313;
}

.c-button-black[disabled],
.c-button-black[disabled]:hover,
.c-button-black[disabled]:focus,
.c-button-black[disabled]:active {
    color: rgba(0, 0, 0, 0.25);
    background: #f5f5f5;
    border-color: #d9d9d9;
    text-shadow: none;
    box-shadow: none;
}

.c-button-purple {
    color: #fff;
    background-color: #B500FE;
    border-color: #B500FE;
}

.c-button-purple:hover {
    color: #fff;
    background-color: #c951fa;
    border-color: #B500FE;
}

.c-button-purple[disabled],
.c-button-purple[disabled]:hover,
.c-button-purple[disabled]:focus,
.c-button-purple[disabled]:active {
    color: rgba(0, 0, 0, 0.25);
    background: #f5f5f5;
    border-color: #d9d9d9;
    text-shadow: none;
    box-shadow: none;
}
</style>

vue3引入组件，自行百度，
在需要的页面直接引用
在这里插入图片描述

      <a-button type="primary" @click="downPdf">下载</a-button>
      <a-button type="primary" @click="showDrawer(taskId)">参数调整</a-button>

      <c-button type="purple" :disabled="true" :loading="true">disabled---loading</c-button>
      <c-button type="purple">purple</c-button>
      <c-button type="yellow">yellow</c-button>
      <c-button type="black" size="large">black</c-button>
      <c-button type="black" size="middle">black</c-button>
      <c-button type="black" size="small">black</c-button>
      <c-button type="success" icon="plus-outlined">success</c-button>
      <c-button type="warning">warning</c-button>
      <c-button type="error">error</c-button>
      <c-button type="primary">primary</c-button>
      <c-button type="text">text</c-button>
      <c-button type="link">link</c-button>
夜空孤狼啸
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
专栏目录
react ant-design自定义图标
banzanbei4669的博客
09-25 1828
ant-design给我们提供的图标不够怎么办呢？答案是我们可以自定义图标。 自定义图标也挺简单的，现在图标推荐用svg格式，那么我们就需要制作svg图片。 下面让我们看看如果制作svg图片吧。 1.百度搜索svg在线编辑器 2.打开https://c.runoob.com/more/svgeditor/ 3.在右侧调整好canvas宽高，使之和图片宽高相同 4.点击文件->导入图...
用于在vxetable表格中适配antdesignvue组件的渲染
08-10
在"用于在vxetable表格中适配antdesignvue组件的渲染"这个主题中，主要涉及以下几个关键知识点： 1. **VxeTable**：VxeTable是一个基于Vue的高性能表格组件，它支持动态列、行操作、表头分组、合并单元格、树形数据...
【Ant Design Vue】button组件用法大全
热门推荐
Hit the keyboard hard
12-03 1万+
Ant官方推荐了button组件属性的使用顺序：type -> shape -> size -> loading -> disabled 具体做法如下： <a-button type="primary" shape="round" size="default" :loading="false" :disabled="false"> 按钮 </a-button&
ant-design-vue：Button的样式不是蓝色
最新发布
yyyyyyyyyyy_9的博客
06-25 344
ant-design-vue中a-button，设置的样式是“primary”。解决方法：重新自定义样式。
ant-design-vue 自定义图标，关联阿里巴巴字体图标库，项目已有图标，新下载的图标要重命名重新保存
花椒和蕊的博客
07-12 3133
前一段时间在项目中引入阿里巴巴字体图标库的图标，按步骤走了一遍，但是一直不成功。 刚好需求改了，不需要用图标，就暂时搁浅没在管这个。 今天又有新的需求要用到字体图标，在ant-design-vue官方文档上看icon自带的图标，还是没有符合需求的。一直往下翻文档，翻到一段关于自定义的描述。 感觉好像可以试试，在网上搜了一篇文章，按教程，果然在项目中实现了。 Ant Design Vue通过iconfont构建自定义图标库 为了以后再使用的时候还有印象，特意把完整流程记录下来 1：在阿里巴巴字体图标库上搜索
在AntDesignVue组件中自定义样式
m0_52334927的博客
07-24 1004
AntdUI组件库中自定义样式
vue自定义ant-design-vue icon
weixin_51780751的博客
11-29 6067
第一步 第二步 在项目里使用 <Fonts type='icon-checkbox-full'/> js需要写 import { Icon } from 'ant-design-vue'; const Fonts = Icon.createFromIconfontCN({ scriptUrl: '//at.alicdn.com/t/font_2964861_j18sab24gwq.js' }) export default { components: .
Vue3标签组件绘制--自定义按钮组件
qq_52368602的博客
05-25 2605
这是type的设定，然后还有一个就是plain的设定，plain情况下的话，默认底色为白，框和字有色。看了一会儿感觉和普通的组件封装好像是差不多的原理，和平常使用的整体组件是一个道理，可能自定义上之前没有那么强。按照之前的技术能力应该也是没有问题的，这是我看的up主的内容。1.el-button中有个type属性，通过type的切换实现效果，而其中的color和round都是基本样式，我该如何实现同样的效果呢。由此可以看到基本所有的改变都是根据type来的，只要可以得到type，就可以简化封装~
Ant design vue 的组件禁用属性 disabled.pdf
12-16
在Ant Design Vue这一流行的前端UI库中，`disabled`属性是一个关键特性，它允许开发者禁用用户对特定组件的操作，从而实现对用户交互的控制。禁用状态通常用于表示组件处于不可操作或非活动状态，这在许多场景下都是...
antdv ant-design-vue 自定义主题颜色.pdf
12-16
在Ant Design Vue (antdv) 中，自定义主题颜色是一项常见的需求，这使得开发者可以根据自己的品牌风格或设计规范调整UI的颜色。本篇文章将详细介绍两种不同的方法来实现这一目标。 首先，我们来看第一种方法，即...
AntDesignVue一个基于AntDesign和Vue的企业级UI组件库
08-14
AntDesignVue允许开发者根据品牌需求自定义主题，通过修改Less变量或使用官方提供的theme工具，轻松改变组件的颜色、尺寸等样式。 ### 综合应用示例 在实际项目中，例如`vueComponent-ant-design-vue-e94a0f0`这个...
vue中element-ui中的el-button自定义icon图标
m0_66288747的博客
03-01 3115
vue中element-ui中的el-button自定义icon图标
ant design分享记录-icon图标自定义菜单图标
流远长季的博客
08-15 3189
ant design分享-icon图标自定义菜单图标 本过程使用 iconfont.cn上的 设置icon前缀 import { Icon } from 'ant-design-vue'; import Vue from 'vue' const JihaoIcon = Icon.createFromIconfontCN({ scriptUrl:'//at.alicdn.com/t/xxxxxxxxxxxxxxxx.js' }) Vue.component('jihao-icon', Jihao
Vue3/React 动态设置 ant-design/icons 图标
卡尔特斯
11-07 2404
使用方式上，依然达到使用图片名称就能使用图标，下面以。这种标签方式，当需要像以前一样动态切换使用。文件，相当于自己做一个。
【练习案例React七】React结合ant design封装一个按钮组件
2301_76379381的博客
04-13 728
技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。有需要面试题资料的朋友点击这里可以领取。
ant-design-vue 修改a-button disabled默认样式
温柔雨哥的博客
08-05 1797
修改disabled默认样式
前端学习（3181）：ant-design的button介绍
歌谣的博客
07-13 201
Ant Design,表格中展开子行按钮的位置和样式
m0_71099325的博客
09-28 171
expandIconColumnIndex="0" 展开按钮放在哪一列
ant design vue table 添加自定义事件
09-06
要为Ant Design Vue的Table组件添加自定义事件，可以按照以下步骤进行操作： 1. 首先，需要在Table组件中定义一个自定义事件。可以通过在Table组件上添加一个@click事件，并传入自定义事件名称，例如@click=...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

夜空孤狼啸

你的鼓励是我创作的最大动力！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值