hui0hui
commented
7 years ago var btn = {
props: [
{
name: 'type',
type: 'String',
default: false,
description: 按钮类型 可选值为is-primary is-info is-success is-warning is-danger或者不设置
},
{
name: 'to',
type: 'Boolean',
default: false,
description: 超链接
},
{
name: 'size',
type: 'String',
default: 'button',
description: 按钮大小
},
{
name: 'long',
type: 'Boolean',
default: false,
description: 按钮的长度
},
{
name: 'disabled',
type: 'Boolean',
default: false,
description: 设置按钮为禁用状态
},
{
name: 'loading',
type: 'Boolean',
default: false,
description: 设置按钮为加载中状态
},
{
name: 'icon',
type: 'String',
default: '',
description: 设置按钮的图标类型
}
],
slots: [
{
name: 'default',
comment: '内容'
}
],
events: [
{
name: 'click',
description: 点击事件
},
],
examples: [
{
name: 'type',
text: <btn :class="'btn is-large'" @click="onclick" :disabled="disabled || null" >aaa</btn>
},
{
name: 'disabled',
text: <btn :class="'button is-large'" @click="onclick" :disabled="disabled || null">aaa</btn>
}
]
}
export {btn}
1.参考已经实现的Btn代码，在此基础上修改 2.bulma的文档参考 3.设计图的参考，上面是例子，下面是API 4.参考： iView https://www.iviewui.com/ Keen-UI https://github.com/JosephusPaye/Keen-UI https://github.com/aflover/veak
注意： 1.写的时候要考虑到编码阶段的实现 2.站在使用者角度，多一些中文描述，要想着有人要用你的组件，要让他能看明白组件是什么，有什么功能，怎么用的 @hui0hui