基于Svelte3.x桌面端UI组件库SvelteUI

Svelte-UI，一套基于svelte.js开发的桌面pc端ui组件库

最近一直忙于写svelte-ui，一套svelte3开发的桌面端ui组件库。在设计及功能上借鉴了element-ui组件库。所以组件的使用方法也非常类似饿了么组件库。起因是想开发一个svelte后台管理系统，无赖发现没有比较合适的svelte组件库。于是便着手开发了这个svelte-ui。

早前使用svelte3开发的两个组件 svelte-layer弹窗 和 svelte-scrollbar虚拟滚动条 也整合到该组件库中了。

◆ 特色

• 一致

在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。

• 反馈

通过界面样式和交互动效让用户可以清晰的感知自己的操作；

• 效率

设计简洁直观的操作流程。

◆ 引入组件

在需要用到组件功能的页面引入组件。

import {    Button,    Input,    Radio,    Checkbox,    ...} from 'svelte-ui'

◆ 快速使用

<Button>默认按钮</el-button><Button type="primary">主要按钮</Button><Button type="success">成功按钮</Button><Button type="info">信息按钮</Button><Button type="warning">警告按钮</Button><Button type="danger">危险按钮</Button><Input bind:value={inputVal} /><Radio bind:checked={radioVal} label="radio组件" value="1" /><Scrollbar autohide size={10}>...</Scrollbar><Layer title="标题" content="弹窗内容" resize />...

<Radio {checked} label="默认选中" value={true} /><Radio checked value={false}>默认不选中</Radio><Radio bind:checked={radioValue1} label="Radio" value="1" /><Radio bind:checked={radioValue2} label="选项A" value="a1" /><Radio bind:checked={radioValue2} label="选项B" value="a2" /><Radio bind:checked={radioValue3} label="备选项" value={1} /><Radio bind:checked={radioValue3} label="备选项" value={2} /><Radio bind:checked={radioValue3} label="备选项" value={3} /><h3>自定义事件</h3><p>radio value：{radioValue4}</p><Radio bind:checked={radioValue4} value="1" on:change={handleChange}>置顶</Radio><Radio bind:checked={radioValue4} value="2" on:change={handleChange}>热门</Radio><Radio bind:checked={radioValue4} value="3" on:change={handleChange}>推荐</Radio>

单选框组的写法，支持自定义样式。

<script>    let radioGroup = '2'    function handleGroupChange(e) {        console.log('groupChange：', e.detail)    }</script><RadioGroup    bind:checked={radioGroup}    on:change={handleGroupChange}    style="background: #fee; padding: 10px;">    <Radio value="1" style="background: #e4f2ff; padding: 10px;">复选框A</Radio>    <Radio value="2">复选框B</Radio>    <Radio value="3">复选框C</Radio>    <Radio value="4" disabled>禁用</Radio></RadioGroup>

<Input bind:value={value1} placeholder="输入关键词" clearable /><Input bind:value={value1} placeholder="输入关键词" size="small" clearable /><Input bind:value={value1} placeholder="输入关键词" prefixIcon="sv-icon-search" clearable /><Input bind:value={value1} placeholder="输入关键词" suffixIcon="sv-icon-locationfill" clearable>    <div slot="prepend"><i class="sv-icon-mail"></i></div></Input><Input bind:value={value1} placeholder="输入关键词" clearable>    <div slot="prepend"><i class="sv-icon-edit"></i></div>    <div slot="append"><span>RMB</span></div></Input>

<Switch bind:checked={value1} activeColor="#d3bef9" inactiveColor="#eee" /><Switch bind:checked={value2} activeText="open" inactiveText="close" /><Switch bind:checked={value2} activeText="按季度结" inactiveText="按月结" /><Switch bind:checked={value3} activeIcon="sv-icon-check" inactiveIcon="sv-icon-close" /><Switch bind:checked={value3} activeIcon="sv-icon-musicfill" inactiveIcon="sv-icon-musicforbidfill" />

<script>    let activeKey1 = '2'    let tabArr1 = [        { key: '1', label: '用户管理' },         { key: '2', label: '系统管理' },         { key: '3', label: '角色管理' },        { key: '4', label: '定时任务管理' },    ]</script><Tabs bind:value={activeKey1} tabs={tabArr1}>    {#each tabArr1 as item, index}    <TabPane key={item.key}>{item.label}{index}</TabPane>    {/each}</Tabs>

<script>    let activeKey2 = 'k3'    let tabArr2 = [        { key: 'k1', label: '用户管理' },         { key: 'k2', label: '系统管理' },         { key: 'k3', label: '角色管理' },        { key: 'k4', label: '定时任务管理' },    ]    let tabPosition = 'left'    function changePosition(pos) {        tabPosition = pos    }</script><Button on:click={()=>changePosition('top')}>top</Button><Tabs    bind:value={activeKey2}    tabs={tabArr2}    {tabPosition}    style="height: 200px;">    {#each tabArr2 as item, index}    <TabPane key={item.key}>{item.label}{index}</TabPane>    {/each}</Tabs>

支持动态增减选项卡。

Divider分割线，支持各种样式。

OK，由于还有部分组件还在开发中，目前就先分享出来这么多，接下来还会陆续分享出来。