實現一個基於Vue的Button小組件

原生HTML的button只能保證功能存在，樣式都不怎么好看。當然也可以通過編寫css樣式來改變原生HTML中的button顯示，但是現在各個UI框架都很流行，也很方便，很多時候都是直接引入框架就能獲得非常好看、好用的樣式組件。那么此篇文章使用Vue也來實現一個好看、使用的Button小組件。

實現

1. button.vue
   首先需要在模板頁面將基本button組件需要的元素進行組裝

<template> <button :class="[ 'pm-button', `pm-button--${type}`, `pm-button--${size}`, { 'pm-button--plain': plain, 'pm-button--disabled': disabled }, `pm-button--${shape}` ]" :disabled="disabled" @click="clickHandler" > <i v-else-if="icon" :class="['pm-button__icon pm-font', `pm-icon-${icon}`]"></i> <slot></slot> </button> </template> <script> const Constant = { typeMap: { default: "default", primary: "primary", success: "success", warning: "warning", danger: "danger" }, buttonSizeMap: { large: "large", normal: "normal", small: "small", mini: "mini" }, shapeMap: { default: "default", round: "round", circle: "circle" } } export default { name: "PmButton", props: { type: { default: Constant.typeMap.default, type: String }, size: { default: Constant.buttonSizeMap.normal, type: String }, plain: { default: false, type: Boolean }, icon: String, loading: { default: false, type: Boolean }, shape: { default: Constant.shapeMap.default, type: String }, disabled: Boolean }, methods: { clickHandler(event) { this.$emit("click", event); } } } </script>

2.button.less
接下來需要為button添加不同種類的樣式，適配使用的時候傳入的值，而得到對應種類的button

@import "../common/index.less"; //額外的基礎變量 .pm-button { position: relative; display: inline-block; border-radius: @button-border-radius; margin: 0; padding: 0; text-align: center; border: @button-border-width solid; box-sizing: border-box; outline: none; &::before { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; background-color: @black; border: inherit; border-color: @black; border-radius: inherit; transform: translate(-50%, -50%); opacity: 0; content: ' '; } &:active::before { opacity: .1; } &--default { color: @button-default-color; background-color: @button-default-background-color; border-color: @button-default-border-color; } &--primary { color: @button-primary-color; background-color: @button-primary-background-color; border-color: @button-primary-border-color; } &--success { color: @button-success-color; background-color: @button-success-background-color; border-color: @button-success-border-color; } &--warning { color: @button-warning-color; background-color: @button-warning-background-color; border-color: @button-warning-border-color; } &--danger { color: @button-danger-color; background-color: @button-danger-background-color; border-color: @button-danger-border-color; } &--large { font-size: @button-large-font-size; height: @button-large-height; line-height: @button-large-line-height; padding: @button-large-padding; } &--normal { font-size: @button-normal-font-size; height: @button-default-height; line-height: @button-default-line-height; padding: @button-normal-padding; } &--small { font-size: @button-small-font-size; height: @button-small-height; line-height: @button-small-line-height; padding: @button-small-padding; min-width: @button-small-min-width; } &--mini { font-size: @button-mini-font-size; height: @button-mini-height; line-height: @button-mini-line-height; padding: @button-mini-padding; min-width: @button-mini-min-width; } &--plain { background-color: @button-plain-background-color; &.pm-button--primary { color: @button-primary-background-color; } &.pm-button--success { color: @button-success-background-color; } &.pm-button--warning { color: @button-warning-background-color; } &.pm-button--danger { color: @button-danger-background-color; } } &--round { &.pm-button--large { border-radius: @button-large-height; } &.pm-button--normal { border-radius: @button-default-height; } &.pm-button--small { border-radius: @button-small-height; } &.pm-button--mini { border-radius: @button-mini-height; } } &--circle { padding: 0; &.pm-button--large { width: @button-large-height; border-radius: @button-large-height; } &.pm-button--normal { width:@button-default-height; border-radius: @button-default-height; } &.pm-button--small { width:@button-mini-height; border-radius: @button-small-height; } &.pm-button--mini { width:@button-mini-height; border-radius: @button-mini-height; } } &--disabled { opacity: .5; } &__icon { position: relative; top: .11rem; } } 

3. 測試Button小組件

<template> <div> <h3>按鈕種類</h3> <div class="default"> <pm-button type="default">默認按鈕</pm-button> <pm-button type="primary">普通按鈕</pm-button> <pm-button type="success">成功按鈕</pm-button> <pm-button type="warning">警告按鈕</pm-button> <pm-button type="danger">危險按鈕</pm-button> </div> <h3>按鈕大小</h3> <div class="size"> <pm-button size="large" type="primary">大按鈕</pm-button> <pm-button size="normal" type="primary">普通按鈕</pm-button> <pm-button size="small" type="primary">小按鈕</pm-button> <pm-button size="mini" type="primary">Mini按鈕</pm-button> </div> <h3>鏤空按鈕</h3> <div class="default"> <pm-button type="primary" plain>普通按鈕</pm-button> <pm-button type="success" plain>成功按鈕</pm-button> <pm-button type="warning" plain>警告按鈕</pm-button> <pm-button type="danger" plain>危險按鈕</pm-button> </div> <h3>圓形按鈕</h3> <div class="default"> <pm-button type="primary" shape="round">普通按鈕</pm-button> <pm-button icon="like-o" shape="circle"></pm-button> </div> <h3>圖標按鈕</h3> <div class="size"> <pm-button type="success" icon="like-o"></pm-button> <pm-button type="primary" icon="search">搜索按鈕</pm-button> </div> <h3>按鈕點擊</h3> <div class="size"> <pm-button @click="btnClick" type="success">支付成功</pm-button> <pm-button @click="btnClick2">點擊我</pm-button> <pm-button type="danger" disabled>被禁用</pm-button> </div> </div> </template> <script> export default { name: "ButtonTest", methods: { btnClick() { this.$toast.success("支付成功"); }, btnClick2(e) { console.log(e) } } } </script> <style scoped> .default, .size { display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: wrap; } button { margin: .2rem .6rem; } button:last-child { margin: .2rem 0 .2rem .6rem; } </style> 

效果展示

簡單幾個文件，就完成了組件化的button，當需要使用時，直接引入使用即可，簡單方便，可復用。運行測試頁面后，會得到這樣的效果圖。