<!--* 通用button--><template><div class="base-button-content" @click="submit" :class="[setButtonType,setButtonSize,setDisabled]"><div class="base-button"><slot name="left-icon"></slot> <!-- class="iconLeft" --><span class="button-title">{{buttonTitle}}</span><slot name="right-icon"></slot> <!-- class="iconLeft" --></div></div></template><script>export default {props: {buttonTitle: {type: String, default: '按钮' }, // 按钮名称size: {type: String, default: 'default' }, //按钮大小 medium高度36px big高度40px default高度32px small高度28pxtype: {type: String, default: 'primary' },//主按钮primary first一级按钮 second二级按钮 危险按钮error 成功按钮successdisabled: {type: Boolean, default: false },//是否禁用 true为禁用},computed: {setDisabled() {if (this.disabled) {return this.buttonType[this.type].disabled}},setButtonType() {return this.buttonType[this.type].default},setButtonSize() {return this.buttonSize[this.size]},},data() {return {buttonType: {'primary': {default: 'primary-button',disabled: 'disabled-primary-button'},//主按钮样式'first': {default: 'first-button',disabled: 'disabled-first-button'},//一级按钮样式'second': {default: 'second-button',disabled: 'disabled-second-button'},//二级按钮样式'error': {default: 'error-button',disabled: 'disabled-error-button'},//失败按钮样式'success': {default: 'success-button',disabled: 'disabled-success-button'},//成功按钮样式},buttonSize: {'big': 'big-button',//大按钮样式'medium': 'medium-button',//中等按钮'default': 'default-button',//默认按钮样式'small': 'small-button',//小按钮样式}}},methods: {submit() {if (!this.disabled) {console.log(1111);this.$emit('click')}}}}</script><style lang="less" scoped>// 高度40px.big-button {font-size: 14px;padding: 11px 20px;// line-height: 40px;// height: 40px;}//高度 36px.medium-button {font-size: 14px;padding: 9px 20px;// line-height: 36px;// height: 36px;}// 高度32px.default-button {font-size: 14px;padding: 7px 15px;// height: 32px;}// 高度28px.small-button {font-size: 14px;padding: 5px 15px;// line-height: 28px;// height: 28px;}// 主按钮样式.primary-button {background-color: #409eff;border: 1px solid #409eff;color: #fff;&:hover {background-color: #5eadfe;border-color: #2291ff;}&:active {background-color: #3a8ee6;border-color: #2291ff;}}// 主按钮样式禁用状态.disabled-primary-button {cursor: not-allowed !important;background-color: #a0cfff !important;border: 1px solid #a0cfff !important;}// 一级按钮样式.first-button {background-color: #ecf5ff;border: 1px solid #b3d8ff;color: #409eff;&:hover {background-color: #409eff;color: #fff;}&:active {background-color: #3a8ee6;}}// 一级按钮样式禁用状态.disabled-first-button {cursor: not-allowed !important;background-color: #ecf5ff !important;border: 1px solid #d9ecff !important;color: #8cc5ff !important;}// 二级按钮样式.second-button {background-color: #fff;border: 1px solid #d9d9d9;color: #666666;&:hover {border-color: #409eff;color: #409eff;}&:active {border-color: #3a8ee6;color: #3a8ee6;}}// 二级按钮样式禁用状态.disabled-second-button {cursor: not-allowed !important;background-color: #fff !important;border: 1px solid #ebeef5 !important;color: #c0c4cc !important;}// 危险按钮样式.error-button {background-color: #fef0f0;border: 1px solid #fbc4c4;color: #f56c6c;&:hover {background-color: #f56c6c;color: #fff;}&:active {background-color: #dd6161;}}// 危险按钮样式禁用状态.disabled-error-button {cursor: not-allowed !important;background-color: #fef0f0 !important;border: 1px solid #fde2e2 !important;color: #f9a7a7 !important;}// 成功按钮样式.success-button {background-color: #f0f9eb;border: 1px solid #c2e7b0;color: #67c23a;&:hover {background-color: #67c23a;color: #fff;}&:active {background-color: #5daf34;}}// 成功按钮样式禁用状态.disabled-success-button {cursor: not-allowed !important;border: 1px solid #e1f3d8 !important;color: #a4da89 !important;}// 默认主样式.base-button-content {cursor: pointer;box-sizing: border-box;display: inline-block;transition: 0.1s;border-radius: 4px;text-align: center;.base-button {display: flex;justify-content: center;align-items: center;.iconRight {i {font-size: 12px;}margin-left: 4px;}.iconLeft {i {font-size: 12px;}margin-right: 4px;}}}</style>
