20200105.png
上了生活的贼船，就要做一个快乐的海盗
所有属性参考element-plushttps://element-plus.gitee.io/#/zh-CN/component/button
需要实现的属性
参数 |说明|类型|可选值|默认值
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| size | 尺寸 | string | medium / small / mini | — |
| type | 类型 | string | primary / success / warning / danger / info / text | — |
| plain | 是否朴素按钮 | boolean | — | false |
| round | 是否圆角按钮 | boolean | — | false |
| circle | 是否圆形按钮 | boolean | — | false |
| loading | 是否加载中状态 | boolean | — | false |
| disabled | 是否禁用状态 | boolean | — | false |
| icon | 图标类名 | string | — | — |
| autofocus | 是否默认聚焦 | boolean | — | false |
| native-type | 原生 type 属性 | string | button / submit / reset | button |
size跟type实现
<template>
<button
:class="['lq-button', size ? 'lq-button-' + size : '',
type ? 'lq-button-' + type : '']"
>
<span><slot></slot></span>
</button>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue';
type LqButtonSize = PropType<'medium' | 'small' | 'mini'>
type LqButtonType = PropType<'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text' | 'default'>
// 定义可传props
interface LqButtonProps {
size: string;
type: string;
plain: boolean;
round: boolean;
circle: boolean;
loading: boolean;
disabled: boolean;
icon: string;
autofocus: boolean;
}
export default defineComponent({
name: 'LqButton',
props: {
size: {
type: String as LqButtonSize,
default: ''
},
type: {
type: String as LqButtonType,
default: 'default',
validator: (val: string) => {
return ['default',
'primary',
'success',
'warning',
'info',
'danger',
'text'].includes(val)
}
}
}
})
</script>
<style>
.lq-button {
display: inline-block;
line-height: 1;
white-space: nowrap;
cursor: pointer;
background: #fff;
border: 1px solid #dcdfe6;
color: #606266;
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
outline: none;
margin: 0;
transition: .1s;
font-weight: 500;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
padding: 12px 20px;
font-size: 14px;
border-radius: 4px;
}
.lq-button-primary {
color: #fff;
background-color: #409eff;
border-color: #409eff;
}
.lq-button-small {
padding: 9px 15px;
font-size: 12px;
border-radius: 3px;
}
</style>
<template>
<lq-button>default按钮</lq-button>
<lq-button type="primary" size="small">primary按钮</lq-button>
</template>
<script>
import { defineComponent } from 'vue'
import LqButton from '../components/kobe/Button/LqButton.vue'
export default defineComponent({
components: {
LqButton
}
})
</script>
<style>
</style>
截图
image.png
