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消息提示组件支持多种类型及主题。文章来源:https://www.toymoban.com/news/detail-523139.html
Message('这是一条默认提示信息')
Message.success('恭喜你,这是一条成功消息', 10) // 10s后关闭
Message({
type: 'warning',
title: '警告哦,这是一条警告消息'
})
Message({
type: 'danger',
title: '错了哦,这是一条错误消息',
description: '这是一段描述性文字提示',
effect: 'dark'
})
Message.info('这是一条消息提示')
ok,以上就是部分组件的一些展示,后续还会完善一些功能,并且基于此组件做一个后台管理系统,到时也会分享出来。文章来源地址https://www.toymoban.com/news/detail-523139.html
- svelte聊天室|基于svelte3桌面pc端聊天实例
https://blog.csdn.net/yanxinyun1990/article/details/124778053
到了这里,关于svelte-ui:基于svelte3桌面pc版组件库的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!