How to customize the encapsulated Button component in vue
This article mainly introduces vue how to customize the package button components, the article introduces in great detail, has a certain reference value, interested friends must read it!
The details are as follows
Encapsulate button assembly button.vue
Export default {name: 'Button', props: {size: {type: String, default:' middle'}, type: {type: String, default: 'default'}. Button {appearance: none; border: none; outline: none; background: # fff; text-align: 1px solid transparent; border-radius: 4px; cursor: pointer;}. Large {width: 240px Height: 50px; font-size: 16px;}. Middle {width: 180px; height: 50px; font-size: 16px;}. Small {width: 100px; height: 32px; font-size: 14px;}. Mini {width: 60px; height: 32px; font-size: 14px;}. Default {border-color: # e4e4; color: # 666;}. Primary {border-color: # BA279B }. Plain {border-color:#27BA9B;; color:#27BA9B;; background: lighten (# 27BA9B: # ccc;; color:# fff; 50%);} .gray {border-color:# ccc; background: # ccc;; color:# fff;}
Use of encapsulated components
Custom button name add to shopping cart
Realize the effect
The above is all the content of the article "how to customize the encapsulated button components in vue". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!
