关于svelte:SvelteUI-20-基于sveltejs轻量级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 十分相似，没错，当初设计之初有借鉴其思路。

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