Svelte-UI 2.0 基于svelte.js轻量级UI组件库

一、介绍

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()
}

<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 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
  }
  
  <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非常类似，没错，当初设计之初有借鉴其思路。

好了，今天就先分享到这里。后续还会为大家分享一些其他功能实例。