一、介绍
svelte-ui 一款基于svelte3.x架构的桌面UI组件库。目前曾经降级至2.0版本了（30+ 组件）。在原有的根底上新增并优化了15+组件。
SvelteUI蕴含了罕用的按钮、文本框、下拉框、表格、表单及音讯提醒类等性能。
二、引入组件
通过如下形式疾速引入组件。
import { Button, Input, Switch, Select, Form, ...} from 'svelte-ui'三、疾速应用范例
- Form表单rule规定验证
let ruleFormDomlet formRules = { name: '', region: '', delivery: false, type: [], resource: '', summary: '',}let rules = { name: [ { required: true, message: '请输出流动名称', trigger: 'blur' }, { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'change' } ], region: [ { required: true, message: '请抉择流动区域', trigger: 'change' } ], type: [ { type: 'array', required: true, message: '请至多抉择一个流动性质', trigger: 'change' } ], resource: [ { required: true, message: '请抉择流动资源', trigger: 'change' } ], // summary: [ // { required: true, message: '请填写流动详情', trigger: 'blur' } // ]}function onSubmitRules() { ruleFormDom.validate((valid) => { if(valid) { console.log('submit!') }else { console.log('error submit!') return false } })}function onResetRules() { formRules = { name: '', region: '', delivery: false, type: [], resource: '', summary: '', } ruleFormDom.resetFields()}<Form bind:model={formRules} rules={rules} bind:this={ruleFormDom}> <FormItem label="流动名称" prop="name"> <Input bind:value={formRules.name} /> </FormItem> <FormItem label="流动区域" prop="region"> <Select bind:value={formRules.region} clearable> <Option label="区域1" value="beijing" /> <Option label="区域2" value="shanghai" /> </Select> </FormItem> <FormItem label="即时配送" prop="delivery" required message="请勾选即时配送" trigger="change"> <Switch bind:checked={formRules.delivery} /> </FormItem> <FormItem label="流动性质" prop="type"> <CheckboxGroup bind:checked={formRules.type}> <Checkbox label="美食/餐厅线上流动" /> <Checkbox label="亲子主题" /> <Checkbox label="品牌推广" /> </CheckboxGroup> </FormItem> <FormItem label="非凡资源" prop="resource"> <RadioGroup bind:checked={formRules.resource}> <Radio label="线上品牌商资助" /> <Radio label="线下场地收费" /> </RadioGroup> </FormItem> <FormItem label="流动详情" prop="summary" rules={[{ required: true, message: '请填写流动详情', trigger: 'blur' }]}> <Input bind:value={formRules.summary} type="textarea" rows={3} /> </FormItem> <FormItem> <Button type="primary" on:click={onSubmitRules}>立刻创立</Button> <Button on:click={onResetRules}>重置</Button> </FormItem></Form>Table综合表格
反对固定表头/列、单选/多选及内容超出滚动条展现。let tableData3 = Mock.mock({ total: 100, page: 1, pagesize: 5, 'list|10': [ { id: '@id()', author: '@cname()', title: '@ctitle(10, 20)', image: 'https://picsum.photos/400/400?random=' + '@guid()', switch: '@boolean()', 'tags|1': ['admin', 'test', 'dev'], progress: '@integer(30, 90)', date: '@datetime()' } ]})let tableColumns3 = [ {type: 'selection', align: 'center', width: 50, fixed: true}, // 多选 {type: 'index', align: 'center', width: 80}, // 索引序号 {prop: 'author', label: '作者', align: 'center', width: 120}, {prop: 'title', label: '题目', align: 'left', width: 350}, {slot: 'image', label: '图片', align: 'center', width: 120}, {slot: 'switch', label: '举荐', align: 'center', width: 100}, {slot: 'tags', label: '标签', align: 'center', width: 100}, {slot: 'progress', label: '热度', align: 'center', width: 150}, {prop: 'date', label: '公布工夫', align: 'left', width: 300}, // 工夫 {slot: 'btns', label: '操作', align: 'center', width: 150, fixed: 'right'}, // 操作]let tableEllet selectionData = []let headerData = []function handleSelectRow(rowIndex) { tableEl.setCurrent(rowIndex)}function handleClearSelect() { tableEl.setCurrent()}function handleSelectionChange(e) { console.log('selection change选中行数据>>：', e.detail) selectionData = e.detail}function handleHeaderClick(e) { console.log('header click选中表头数据>>：', e.detail) headerData = e.detail}<Button type="primary" size="small" on:click={()=>handleSelectRow(0)}>抉择第一行</Button><Button type="primary" size="small" on:click={()=>handleSelectRow([1,2])}>切换第二、第三行的选中状态</Button><Button type="primary" size="small" on:click={handleClearSelect}>勾销抉择</Button><Table dataSource={tableData3.list} columns={tableColumns3} stripe border highlightCurrentRow let:row let:col let:index on:selectionChange={handleSelectionChange} on:headerClick={handleHeaderClick} style="height: 300px;" bind:this={tableEl}> {#if col.slot == 'image'} <img src={row.image} style="height: 50px; width: 50px;" alt="" /> {:else if col.slot == 'switch'} <Switch checked={row.switch} /> {:else if col.slot == 'tags'} <Tag type="warning" effect="dark" size="mini">{row.tags}</Tag> {:else if col.slot == 'progress'} <Progress percent={row.progress} color="#1fb925" showtext="false" strokeWidth={6} style="width: 100px;" /> {:else if col.slot == 'btns'} <Button type="text">编辑</Button> <Button type="text">删除</Button> {/if}</Table>
Message音讯提醒
Message('这是一条默认提示信息')Message.success('祝贺你，这是一条胜利音讯', 10) // 10s后敞开Message({ type: 'warning', title: '正告哦，这是一条正告音讯'})Message({ type: 'danger', title: '错了哦，这是一条谬误音讯', description: '这是一段描述性文字提醒', effect: 'dark'})Message.info('这是一条音讯提醒')
以上就是一些局部组件的应用范例介绍，感觉是不是和element-ui十分相似，没错，当初设计之初有借鉴其思路。
好了，明天就先分享到这里。后续还会为大家分享一些其余性能实例。