0.1.6 • 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 | - | 随机字符串 |
未完待续...