历时一个半月，svelte-ui2.0 终于开发完成了。期间由于一些事情耽搁了一段时间。今天就来作一些简单的分享。

　　svelte-ui 共有32+组件，都是一些在项目中比较常用的组件。

　　在此次的2.0开发中，新增并优化了有15+个组件。并对一些 input / radio / checkbox / switch / select 等组件实现了表单验证功能。

　　重新整理文档，对每一个组件进行组件+代码演示，并且新增了使用说明。

　　引入组件

　　import { Button, Input, Switch, Select, Form, ...} from 'svelte-ui'快速使用

　　<Button>默认按钮</Button><Button type="primary">主要按钮</Button><Button type="success" round>成功按钮</Button><Button type="info" icon="sv-icon-message" circle>信息按钮</Button><Button type="warning" disabled>警告按钮</Button><Button type="danger" size="small">危险按钮</Button><Select bind:value={selectVal} size="small"> <Option label="Option1" value="a1"></Option> <Option label="Option2" value="a2"></Option> <Option label="Option3" value="a3"></Option></Select>

　　<Form bind:model={formObj} labelWidth="80px" size="small" labelPosition="right"> <FormItem label="活动名称"> <Input bind:value={formObj.name} /> </FormItem> <FormItem label="活动区域"> <Select bind:value={formObj.region} clearable> <Option label="区域1" value="beijing" /> <Option label="区域2" value="shanghai" /> </Select> </FormItem> <FormItem label="即时配送"> <Switch bind:checked={formObj.delivery} /> </FormItem> <FormItem label="活动性质"> <CheckboxGroup bind:checked={formObj.type}> <Checkbox label="美食/餐厅线上活动" border /> <Checkbox label="亲子主题" border /> <Checkbox label="品牌推广" border /> </CheckboxGroup> </FormItem> <FormItem label="特殊资源"> <RadioGroup bind:checked={formObj.resource}> <Radio label="线上品牌商赞助" button /> <Radio label="线下场地免费" button /> </RadioGroup> </FormItem> <FormItem label="活动详情"> <Input bind:value={formObj.summary} type="textarea" rows={3} /> </FormItem> <FormItem> <Button type="primary">立即创建</Button> <Button>取消</Button> </FormItem></Form>

　　由于开发在开发之初有参考借鉴了element-ui组件库，所以在使用及语法上比较类似。这也使得学习使用更加容易。

　　后面如果有时间，打算在此组件库基础上精简一版vue2/3组件库出来，方便平时的一些快捷化开发。

　　如果大家有其他比较优秀的svelte组件库，欢迎一起分享交流。