自定义按钮组件vue cli element scss

最新推荐文章于 2024-05-25 16:04:51 发布

时遇¥.¥..

最新推荐文章于 2024-05-25 16:04:51 发布

阅读量176

点赞数 2

分类专栏：自定义按钮组件笔记 vue

本文链接：https://blog.csdn.net/weixin_46544600/article/details/117677417

版权

笔记同时被 3 个专栏收录

51 篇文章 2 订阅

订阅专栏

vue

15 篇文章 0 订阅

订阅专栏

自定义按钮组件

1 篇文章 0 订阅

订阅专栏

本文介绍了如何在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>