模仿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 }]},

三. 图标使用阿里巴巴

地址：https://www.iconfont.cn/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";
}

组件封装--button组件相关推荐

Vue组件封装 ——button组件
一.基础准备工作 1.创建一个基础的vue项目包 2.创建components文件夹,用于存放组件,新建button.vue组件,可以自己取个名字 <script> export defa ...
vue3中，echarts使用（四）02——柱状图之堆叠条形图-定制化封装切换tag标签组件封装title组件
vue3中,echarts使用(四)02--柱状图之堆叠条形图-定制化 & 封装切换tag标签组件 & 封装title组件效果代码 1.主页面 index.vue <temp ...
《微信小程序-进阶篇》组件封装-Icon组件的实现（一）
大家好,这是小程序系列的第九篇文章,从这篇开始我们将进入提高篇,在这一个阶段,我们的目标是可以较为深入的了解组件化开发,并且实践积累一些后续项目也就是原神资料站中用得着的组件: 1.<微信小程序 ...
组件封装 - steps组件
首先, 我先来看看效果 steps 组件的封装和 tabs 组件还是相似的都会去指定两个组件来完成(仿Element UI), 都会去使用 jsx 的语法让其中一个组件去规定样式和排版, 另外一个 ...
Sprite组件和Button组件的使用
一.Sprint组件的使用 1.游戏中显示一张图片,通常我们称之为"精灵" sprite 2.cocos creator如果需要显示一个图片,那么需要在节点上挂一个精灵组件,为这个 ...
Vue 组件封装、组件传值、数据修改
Vue 组件封装封装的意义当一个页面元素过多或者一个组件在多个页面都会被使用,就可以进行组件封装,可以对单个页面解耦,增加代码的可读性,并且多次使用的组件方便修改,只用修改一个地方就能对用到这个组 ...
Vue2组件封装 Vue组件封装
写在前面虽然是Vue2组件封装,主要的内容是记录一下我对封装组件的一些要点和我的看法 --原学习视频来源于b站黑马从0到1封装组件库什么是组件都说Vue是组件化开发,确实有道理,别说按钮输入框这 ...
七、华为鸿蒙HarmonyOS应用开发之Java UI框架、常用Text组件和Button组件使用
一.Java UI框架概述应用的Ability在屏幕上将显示一个用户界面,该界面用来显示所有可被用户查看和交互的内容. 应用中所有的用户界面元素都是由Component和ComponentConta ...
封装前端UI组件库--button
1.前言模拟element封装button组件.核心原理就是我们在调用组件的时候传入属性值.button组件内部来接收这些值.并且根据这些值来实现一些效果(控制颜色显示方式等等) 2.调用方法 ...

组件封装--button组件

一. 主要实现代码

二．封装基础button组件

三. 图标使用阿里巴巴

组件封装--button组件相关推荐

最新文章

热门文章