组件有添加新成员了，他就是基本的button,不做过多详述，仅仅记录一下防止忘记 暂时的功能： 1.输入size选择button组建的大小 2.输入样式改变button组件的颜色 3.一些基本的样式
<template> <div> <div :class="['zypc-button',btSize,btType]" > <span><slot></slot></span> </div> </div> </template> <script> export default { data() { return { buttonClass: 'zypc-button' } }, props: ["size","type"], computed:{ btSize:function(){ return `${this.buttonClass}-${this.size}` }, btType:function(){ return `${this.buttonClass}-${this.type}` } } } </script> <style lang=""> .zypc-button { padding:4px 25px; margin:0px; border-radius: 10px; display:inline-block; overflow:hidden; height: 32px; line-height:28px; background: rgb(45,183,245); color: white; } :hover.zypc-button { background: rgba(45,183,245,0.8); cursor: pointer; } /* 按钮大小 */ .zypc-button-small { height: 32px; line-height:28px; } .zypc-button-large { padding:4px 35px; height: 45px; line-height: 41px; } /* 确认，蓝色按钮 */ .zypc-button-blue { background: rgb(45,183,245); color: white; } :hover.zypc-button-blue { background: rgba(45,183,245,0.8); cursor: pointer; } /* 错误，红色按钮 */ .zypc-button-error { background: rgb(235, 0, 18); color: white; } :hover.zypc-button-error { background:rgba(235, 0, 18,0.8); cursor: pointer; } /* 通过，绿色按钮 */ .zypc-button-success { background: rgb(127, 174, 66); color: white; } :hover.zypc-button-success { background: rgba(127, 174, 66, 0.8); cursor: pointer; } </style>