0.1.1 • Published 4 years ago
sh-ui
依赖安装 npm install
查看demo npm run serve
组件库打包 npm run prod
按钮 sh-button
| Attributes | 说明 | 类型 | 可选值 | 默认值 |
|---|
| size | 按钮尺寸 | string | large、medium、small、mini | medium |
| type | 按钮类型 | string | default、error、warn、success | default |
| round | 是否为按钮 | boolean | - | false |
| gradient | 是否为渐变按钮 | boolean | - | false |
| transparent | 是否为透明按钮 | boolean | - | false |
| disabled | 是否禁用 | boolean | - | false |
| htmlType | 按钮类型 | string | button、submit、reset | button |
| to | 链接，存在此属性时按钮变为a标签 | string | - | - |
| Events | 说明 | 回调参数 |
|---|
| click | 点击事件 | event |
通知弹框 $confirm、$toast、$loading
$confirm
|Attributes|说明|类型|可选值|默认值|
|----------|---|---|---|---|
|title|标题|string|-|-|
|template|内容模板|string|-|''|
|image|图片地址|string|-|-|
|onlyEnsure|是否只有确认按钮|boolean|-|false|
|ensureBtnText|确认按钮的文本|string|-|'确认'|
|cancelBtnText|取消按钮的文本|string|-|'取消'|
|ensure|确认按钮点击回调|function|-|function(close) { close(); }|
|cancel|取消按钮点击回调|function|-|function(close) { close(); }|
tips：如果配置ensure和cancel方法，需要调用close函数关闭弹框
$toast
|Attributes|说明|类型|可选值|默认值|
|----------|---|---|---|---|
|content|提示内容|string|-|''|
|duration|提示消失延迟毫秒数|number|-|1500|
|type|提示类型|string|default、success、fail|default|
|close|toast关闭回调|function|-|function() {}|
$loading
|Attributes|说明|类型|可选值|默认值|
|----------|---|---|---|---|
|content|提示内容|string|-|'加载中...'|
页头标签 sh-header
| Attributes | 说明 | 类型 | 可选值 | 默认值 |
|---|
| title | 标题 | string/array | - | '' | { label: '', name: '' } |
| value/v-model | 当前激活的标题名 | string | - | - |
| isCancel | 是否用"取消"替代返回图标 | boolean | - | false |
开关 sh-switch
| Attributes | 说明 | 类型 | 可选值 | 默认值 |
|---|
| value/v-model | 绑定值 | string/number/boolean | - | - |
| openValue | switch打开时的值 | string/number/boolean | - | true |
| closeValue | switch关闭时的值 | string/number/boolean | - | false |
| disabled | 是否禁用开关 | boolean | - | false |
| activeColor | switch打开时的背景色 | string | - | - |
| inActiveColor | switch关闭时的背景色 | string | - | - |
| Events | 说明 | 回调参数 |
|---|
| change | switch绑定值改变事件 | 改变后的switch值 |
单选框 sh-radio sh-radio-group
| Radio Attributes | 说明 | 类型 | 可选值 | 默认值 |
|---|
| value/v-model | 绑定值 | string/number/boolean | - | false |
| label | radio的value | string/number | - | - |
| trueValue | radio选中时的值 | string/number/boolean | - | true |
| falseValue | radio未选中时的值 | string/number/boolean | - | false |
| disabled | 是否禁用 | boolean | - | false |
| Radio Events | 说明 | 回调参数 |
|---|
| change | radio绑定值改变事件 | 改变后的radio值 |
| Radio-group Attributes | 说明 | 类型 | 可选值 | 默认值 |
|---|
| value/v-model | 绑定值 | string/number/boolean | - | false |
| name | 原生name属性 | string | - | - |
| disabled | 是否禁用 | boolean | - | false |
| Radio-group Events | 说明 | 回调参数 |
|---|
| change | radio-group绑定值改变事件 | 改变后的radio-group值 |
多选框 sh-checkbox sh-checkbox-group
| Checkbox Attributes | 说明 | 类型 | 可选值 | 默认值 |
|---|
| value/v-model | 绑定值 | string/number/boolean | - | false |
| label | checkbox的value | string/number | - | - |
| trueValue | checkbox选中时的值 | string/number/boolean | - | true |
| falseValue | checkbox未选中时的值 | string/number/boolean | - | false |
| disabled | 是否禁用 | boolean | - | false |
| Checkbox Events | 说明 | 回调参数 |
|---|
| change | checkbox绑定值改变事件 | 改变后的checkbox值 |
| Checkbox Slot | 说明 |
|---|
| - | Checkbox标签中的内容 |
| Check-group Attributes | 说明 | 类型 | 可选值 | 默认值 |
|---|
| value/v-model | 绑定值 | array | - | [] |
| name | 原生name属性 | string | - | - |
| disabled | 是否禁用 | boolean | - | false |
| Check-group Events | 说明 | 回调参数 |
|---|
| change | checkbox-group绑定值改变事件 | 改变后的checkbox-group值 |
标签页 sh-tabs sh-tab-pane
| Tabs Attributes | 说明 | 类型 | 可选值 | 默认值 |
|---|
| value/v-model | tabs绑定值 | string/number | - | - |
| type | 标签页类型 | string | default、button | default |
| Tabs Events | 说明 | 回调参数 |
|---|
| change | tabs绑定值改变事件 | 改变后的tabs值 |
| Tab-pane Attributes | 说明 | 类型 | 可选值 | 默认值 |
|---|
| label | 选项卡标题 | string | - | - |
| name | 与选项卡绑定值value对应的标识符 | string | - | 随机字符串 |
未完待续...