基于svelte3网页端组件库SvelteUI

最近这段时间一直捣鼓Svelte.js开发，期间完成了两个实例项目，一个手机端和一个桌面端。还有一个刚完成的svelte-ui2.0桌面PC端UI组件库。

juejin.cn/post/708476…

juejin.cn/post/709778…

Svelte-UI 一款轻量级基于svelte3.x开发的PC版组件库。超过32+组件，功能效果类似element-ui组件库。

包含了基础组件、表单组件、数据展示类组件及消息提示类组件，基本涵盖了各种常用组件。

在语法及使用上比较类似element-ui组件库，这是为了降低学习使用成本，在设计开发之初就借鉴了饿了么组件库设计思想。

引入组件

通过如下方式快速引入需要使用的组件。

import {
    Button,
    Input,
    Switch,
    Select,
    Form,
    ...
} from 'svelte-ui'

快速使用

<Button type="primary">主要按钮</Button>
<Button type="success">成功按钮</Button>
<Button type="info">信息按钮</Button>
<Button type="warning">警告按钮</Button>
<Button type="danger">危险按钮</Button>
<Button type="primary" loading>加载中</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组件支持rule验证及自定义验证规则。input / textarea / switch / radio / checkbox等组件支持组合验证。

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>

<Progress percent={50} insidetext strokeWidth={30} />
<Progress percent={100} insidetext strokeWidth={25} status="success" />
<Progress percent={80} insidetext strokeWidth={20} status="warning" />
<Progress percent={30} insidetext strokeWidth={15} status="exception" />
<Progress percent={60} color="#ff3e00" background="#fcc" strokeWidth={20} />

Message('这是一条默认提示信息')

Message.success('恭喜你，这是一条成功消息', 10) // 10s后关闭

Message({
    type: 'warning',
    title: '警告哦，这是一条警告消息'
})

Message({
    type: 'danger',
    title: '错了哦，这是一条错误消息',
    description: '这是一段描述性文字提示',
    effect: 'dark'
})

Message.info('这是一条消息提示')

以上就是svelte-ui组件库的一些常用组件分享，后续还会基于这个组件开发一个后台管理，到时也会分享出来。