一、介绍
svelte-ui 一款基于svelte3.x架构的桌面UI组件库。目前已经升级至2.0版本了（30+ 组件）。在原有的基础上新增并优化了15+组件。
SvelteUI包含了常用的按钮、文本框、下拉框、表格、表单及消息提示类等功能。
二、引入组件
通过如下方式快速引入组件。
import {
Button,
Input,
Switch,
Select,
Form,
...
} from 'svelte-ui'
三、快速使用范例
- Form表单rule规则验证
let ruleFormDom
let 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()
}
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 tableEl let 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 }{#if col.slot == 'image'}
{:else if col.slot == 'switch'}
{:else if col.slot == 'tags'} {row.tags} {:else if col.slot == 'progress'} {:else if col.slot == 'btns'} {/if}
Message消息提示
Message('这是一条默认提示信息') Message.success('恭喜你，这是一条成功消息', 10) // 10s后关闭 Message({ type: 'warning', title: '警告哦，这是一条警告消息' }) Message({ type: 'danger', title: '错了哦，这是一条错误消息', description: '这是一段描述性文字提示', effect: 'dark' }) Message.info('这是一条消息提示')
以上就是一些部分组件的使用范例介绍，感觉是不是和element-ui非常类似，没错，当初设计之初有借鉴其思路。
好了，今天就先分享到这里。后续还会为大家分享一些其他功能实例。