类似el-button，封装一个自己的组件，增加边框、块级按钮等

最新推荐文章于 2023-12-01 20:45:00 发布

T-Dream18

最新推荐文章于 2023-12-01 20:45:00 发布

阅读量417

点赞数 1

文章标签： vue.js elementui

本文链接：https://blog.csdn.net/weixin_44466741/article/details/124631716

版权

本文将介绍如何基于Vue.js和ElementUI，封装一个具有边框和块级显示功能的自定义按钮组件，同时允许通过配置变量来设定按钮的类型颜色。

摘要由CSDN通过智能技术生成

一、封装代码

<template>
  <button 
  @click="change"
  :disabled="disabled||loading" 
  class="a-button" 
  :class="[theme,isBorder,isRound,isSize,isBlock]"
  :style="[minWidthCss]">
    <span>
        <i v-if="loading" class="iconfont icon-prefix icon-loading" ></i>
        <i v-if="isPrefix" class="iconfont icon-prefix" :class="[isPrefix]"></i>
        <slot></slot>
        <i v-if="isSuffix" class="iconfont icon-suffix" :class="[isSuffix]"></i>
    </span>
  </button>
</template>

<script>
export default {
name:"AButton",
props:{
    type:{
        type:String,
        default:''
    },
    border:Boolean,  //是否切换边框样式；默认false
    disabled:Boolean,
    round:Boolean,
    size:{
        type:String,
        default:''
    },
    minWidth:{
         type:String,
         default:''
    },
    perfix:{
         type:String,
         default:''
    },
    suffix:{
        type:String,
         default:''
    },
    block:Boolean,
    loading:Boolean
},
computed:{
    // eslint-disable-next-line vue/return-in-computed-pr