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

259 阅读4分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第0天,点击查看活动详情

一、介绍

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>

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

    <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('这是一条消息提示')

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

以上就是一些部分组件的使用范例介绍,感觉是不是和element-ui非常类似,没错,当初设计之初有借鉴其思路。

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