模仿elementUI组件库，封装自己的组件库。

一. 主要实现代码

刚开始想要封装width，height属性，可以让用户修改按钮大小。但是会出现一个问题，如果按钮文字

子组件<template><button @click="$emit('click')" :class="getClass" :style="computeStyle"><i v-if="loading" class="zc-icon-loading"></i><i v-if="icon" :class="getIcon"></i><span v-if="$slots.default"><slot></slot></span></button></template><script>export default {name: "ZcButton",props: {type: {type: String,default: "default"},round: Boolean,loading: {type: Boolean,default: false},icon: {type: String,default: ""},disabled: Boolean,circle: Boolean},computed: {getClass() {console.log(this.round)return ["zc-button",`zc-button-${this.type}`,{ disabled: this.disabled },{ round: this.round },{ circle: this.circle }]},getIcon() {return [`zc-icon-${this.icon}`]},computeStyle() {return {background: this.loading ? "#66b1ff" : ""}}},mounted() {console.log(this.$slots)const root = document.querySelector(":root")const btn = document.querySelector(".zc-button")const btnHeight = btn.clientHeight// const round = getComputedStyle(root).getPropertyValue("--round").trim()// console.log(btnHeight, round)root.style.setProperty("--round", `${Math.floor(btnHeight / 2)}px`)}}</script><style lang="scss" scoped>// @import '@/style/index';:root {--round: 20px;}.zc-button {padding: 12px 24px;outline: none;border: 0;cursor: pointer;border-radius: 8px;color: #fff;font-weight: 500;white-space: nowrap;display: flex;justify-content: center;align-items: center;}.zc-button-primary {background: $primary;&:hover,&:focus {background: #66b1ff;border-color: #66b1ff;color: #fff;}}.zc-button-success {background: $success;&:hover,&:focus {background: #85ce61;border-color: #85ce61;color: #fff;}}.zc-button-info {background: $info;&:hover,&:focus {background: #a6a9ad;border-color: #a6a9ad;color: #fff;}}.zc-button-warning {background: $warning;&:hover,&:focus {background: #ebb563;border-color: #ebb563;color: #fff;}}.zc-button-error {background: $error;&:hover,&:focus {background: #f78989;border-color: #f78989;color: #fff;}}.zc-button-default {background: $default;border: 1px solid #ccc;color: #606266;&:hover,&:focus {color: #409eff;border-color: #c6e2ff;background-color: #ecf5ff;}}.round {border-radius: var(--round);}.zc-icon-loading {margin-right: 5px;animation: rotate 3s infinite linear;}@keyframes rotate {to {transform: rotate(360deg);}}.disabled {cursor: not-allowed;background-image: none;}.circle {width: 50px;height: 50px;border-radius: 50%;}</style>

button的使用方法：

<template><div><zc-row class="container"><zc-button @click="clickHandle">默认按钮</zc-button><zc-button type="primary">主要按钮</zc-button><zc-button type="success">成功按钮</zc-button><zc-button type="info">信息按钮</zc-button><zc-button type="warning">警告按钮</zc-button><zc-button type="error">危险按钮</zc-button></zc-row><zc-row class="container"><zc-button round>默认按钮</zc-button><zc-button round type="primary">主要按钮</zc-button><zc-button round type="success">成功按钮</zc-button><zc-button round type="info">信息按钮</zc-button><zc-button round type="warning">警告按钮</zc-button><zc-button round type="error">危险按钮</zc-button></zc-row><zc-row class="container"><zc-button disabled round type="primary" :loading="true">加载中</zc-button></zc-row><zc-row class="container"><zc-button circle type="primary" icon="modify"></zc-button><zc-button type="error" circle icon="delete"></zc-button><zc-button circle type="primary" icon="collect"></zc-button><zc-button circle type="primary" icon="shared"></zc-button><zc-button circle type="success" icon="success"></zc-button></zc-row><!-- <button @click="change">加载</button> --></div></template><script>export default {name: "App",data() {return {loading: false}},methods: {change() {this.loading = true},clickHandle() {console.log("1232131")}}}</script><style scoped lang="scss">.container button {margin: 10px;}</style>

二．封装基础button组件

v-if 判断是否有文字配置，没有则不显示span标签。getClass为后边匹配不同的type所设置。

// button子组件<button :class="getClass"><i v-if="loading" class="zc-icon-loading"></i><i v-if="icon" :class="getIcon"></i>// v-if 判断是否有文字配置，没有则不显示span标签<span v-if="$slots.default"><slot></slot></span></button>

利用computed计算属性，返回相应的className。主要为了提高性能，避免每次都要重新计算。

其中封装属性：type控制颜色，round控制圆角，circle实现圆形按钮，disabled实现按钮禁用，loading属性实现按钮加载功能。

getClass() {console.log(this.round)return ["zc-button",`zc-button-${this.type}`,{ disabled: this.disabled },{ round: this.round },{ circle: this.circle }]},

三. 图标使用阿里巴巴

地址：/home/index?spm=a313x.7781069.1998910419.2

下载想要使用的图标，然后将代码下载下来。其中有iconfont.css文件，添加到你的项目中，然后全局引入。使用方法： <button class="zc-icon-loading">加载</button>

@font-face {font-family: "iconfont"; /* Project id */src: url('iconfont.ttf?t=1662875454626') format('truetype');}/* 匹配所有包含zc-icon的clas */[class*='zc-icon'] {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}.zc-icon-collect:before {content: "\f0114";}.zc-icon-left:before {content: "\e628";}.zc-icon-right:before {content: "\e642";}.zc-icon-upload:before {content: "\e61a";}.zc-icon-shared:before {content: "\e86e";}.zc-icon-loading:before {content: "\e721";}.zc-icon-search:before {content: "\e741";}.zc-icon-delete:before {content: "\e699";}.zc-icon-success:before {content: "\e656";}.zc-icon-modify:before {content: "\e66a";}