按鈕 · vue.js

~~~  <template> <button type="button" :class="buttonClass" :style="buttonStyle" @click.stop.prevent="handleClick" > <ErsIcon v-if="loading" class="icon-loading" name="loading" /> <slot></slot> </button> </template> <script> const prefixCls = "ers-button"; import ErsIcon from "@/components/ErsIcon/ErsIcon.vue"; export default { name: "ErsButton", components: { ErsIcon }, props: { // 一級、二級、三級 level: { type: Number, default: 1 }, // 類型 // default, primary, back type: { type: String, default: "default" }, // 是否禁用 disabled: { type: Boolean, default: false }, loading: { type: Boolean, default: false }, // 背景色 bgColor: { type: String }, // 字體顏色 fontColor: { type: String } }, computed: { buttonClass() { const { level, type, disabled, loading } = this; return [ `${prefixCls}`, `${prefixCls}-${level}`, `${prefixCls}-${type}`, disabled && "disabled", loading && "loading" ]; }, buttonStyle() { const { bgColor, fontColor } = this; const style = {}; if (bgColor) { style.backgroundColor = bgColor; style.borderColor = bgColor; } if (fontColor) { style.color = fontColor; } return style; } }, methods: { handleClick(event) { if (this.disabled || this.loading) { return; } // 返回 event 參數支持 @click.stop.prevent 寫法 this.$emit("click", event); } } }; </script> <style scoped lang="scss"> // 默認 $default-bg-color: #1890ff; $default-font-color: #ffffff; // 鏤空效果 $primary-bg-color: #ffffff; $primary-font-color: #1890ff; // 退出(返回)按鈕 $back-bg-color: #343c4c; $back-font-color: #ffffff; .ers-button { display: inline-block; text-align: center; touch-action: manipulation; line-height: 1; outline: 0; cursor: pointer; user-select: none; border-radius: 0.21rem; border: 1px solid transparent; transition: color 0.2s linear, background-color 0.2s linear, border 0.2s linear, box-shadow 0.2s linear; .icon-loading { margin-right: 4px; } &-1 { font-size: 0.83rem; padding: 0.66em 0.875em; .icon { font-size: 0.83rem; } } &-2 { font-size: 0.73rem; padding: 0.5em 1em; .icon { font-size: 0.73rem; } } &-3 { font-size: 0.73rem; padding: 0.3em 1em; .icon { font-size: 0.73rem; } } &-default { background-color: $default-bg-color; border-color: $default-bg-color; color: $default-font-color; } &-primary { background-color: $primary-bg-color; border-color: $primary-font-color; color: $primary-font-color; &:hover:not(.disabled) { color: #ffffff; border-color: #1890ff; background-color: #1890ff; } } &-back { background-color: $back-bg-color; border-color: $back-bg-color; color: $back-font-color; } &:hover:not(.nr-button-primary) { opacity: 0.8; } &.disabled { cursor: not-allowed; opacity: 0.4; } &.loading { opacity: 0.8; pointer-events: none; } } </style> ~~~