svelte-ui：基于svelte3桌面pc版组件库

Svelte-UI 一套轻量级svelte3.x网页端UI组件库

历时快两个月的svelte-ui组件库终于见面了。整体功能效果比较类似element-ui组件库，因为在开发之初就借鉴了其设计思路。所以用起来就比较熟悉。



svelte-ui共整理设计了32+组件，都是平时比较常用且出现频率比较高的一些组件。


引入组件

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

快速使用

<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>

在UI展示及使用语法上比较靠近element-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('这是一条消息提示')

ok，以上就是部分组件的一些展示，后续还会完善一些功能，并且基于此组件做一个后台管理系统，到时也会分享出来。

• svelte聊天室|基于svelte3桌面pc端聊天实例
  https://blog.csdn.net/yanxinyun1990/article/details/124778053