自定义按钮组件vue cli element scss

本文介绍了如何在Vue中实现一个可配置可复用的按钮组件。首先,在components下创建文件夹和button.vue,然后在btn.js中管理不同按钮的样式配置。在main.js中注册全局组件,最后在使用的地方通过传入配置项来定制按钮样式。文章详细展示了button.vue的代码结构,包括如何获取并应用配置项,以及样式的定义。
摘要由CSDN通过智能技术生成

目标:实现 文字、图标 、背景色 可配置 可复用(将按钮样式统一管理)

先上样式看看效果

在这里插入图片描述

1.在component下定义建好文件夹和对应得文件名称:在这里插入图片描述

2. button.vue中写静态通用样式 且引入btn.js 中得配置

在这里插入图片描述

3.在btn.js中 管理这些按钮

在这里插入图片描述

4.main.js中 注册全局组件

import Button from "@/components/fallButton/button.vue"
Vue.component(Button.name, Button)

5. vue文件中引入且传入配置项中对应的值即可

<fall-button btnName="add" @click="addClick(1)"/>

button.vue 全码:

<template>
  <div class="fall-btn-warp">
    <div class="fall-btn-ctn" :class="myBtnMsg.color" @click="emitClick">
      <div class="btn-ctn-left">
        <i :class="myBtnMsg.icon"></i>
      </div>
      <div class="btn-ctn-right">
        <p class="btn-ctn-name">{{myBtnMsg.name}}</p>
      </div>
    </div>

  </div>
</template>

<script>
import btnMsg from "./btn" // 引入配置项
export default {
  name: "fallButton",
  props: { 
    btnName:{
      type:String,
      default:'add'
    },
  },
  data() {
    return {
      myBtnMsg:{ // 需要初始化 
        name:'',
        icon:'',
        color:'',
      }
    };
  },
  created(){ 
    this.myBtnMsg = btnMsg[this.btnName]; // 这里利用传过来的btnName 取出配置项对应的配置
  },
  methods: {
    emitClick(evt) {
      this.$emit("click", evt);
    }
  }
};
</script>

<style lang="scss" scoped>
.fall-btn-warp {
  display: inline-block;
  margin: 0 2px;
  .fall-btn-ctn {
    float: left;
    display: flex;
    position: relative;
    height: 32px;
    color: #fff;
    cursor: pointer;
    background: #3671e2;
    &::before {
      content: "";
      position: absolute;
      top: 0;
      height: 100%;
      width: 30px;
      background-color: rgba(0, 0, 0, 0.1); // css3 属性 设置
      -webkit-transition: all 1s;
      transition: width 1s;
    }
    &:hover::before {
      width: 100%;
      box-sizing: border-box;
    }
    .btn-ctn-left {
      width: 30px;
      line-height: 30px;
      text-align: center;
      i {
        font-size: 14px;
      }
    }
    .btn-ctn-right {
      padding: 7px 16px;
      .btn-ctn-name {
        font-size: 14px;
        color: #fff;
      }
    }
  }
  // 背景风格
  .bgblue {
    background: #3671e2;
  }
  .bggreen {
    background: #1f858c;
  }
  .bgorange {
    background: #db7804;
  }
  .bgred {
    background: #f41f42;
  }
  .bgwhite {
    background: #c5cdde;
  }
}
</style>
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值