lemons
/
zb-admin
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor:去掉多余的部分

This commit is contained in:
zouzhibing 2022-09-14 09:37:17 +08:00
parent 70b640af4f
commit 619fe79c27
17 changed files with 4 additions and 1338 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/router/index.ts
View File

@ -16,7 +16,6 @@ import nestedRouter from './modules/nested'
import systemRouter from './modules/system'
import chartsRouter from './modules/charts'
import chatRouter from './modules/chat'
import componentsRouter from './modules/components'
import othersRouter from './modules/other'
import externalLink from './modules/externalLink'
import formRouter from './modules/from'
@ -118,10 +117,10 @@ export const asyncRoutes = [
externalLink,
clipboardTable,
systemRouter,
// {
// path: '/:pathMatch(.*)',
// redirect: '/error/404'
// }
{
path: '/:pathMatch(.*)',
redirect: '/error/404'
}
]
const router = createRouter({

78
src/router/modules/components.ts
View File

@ -1,78 +0,0 @@
/** When your routing table is too long, you can split it into small modules**/
import Layout from "@/layout/index.vue";
const componentsRouter = {
path: '/components',
component: Layout,
redirect: 'noRedirect',
name: 'components',
meta: {
title: '基础组件',
icon: 'Histogram',
roles:['other']
},
children: [
{
path: 'button',
component: () => import('@/views/components-demo/button.vue'),
name: 'button',
meta: { title: '按钮', icon: 'MenuIcon' }
},
{
path: 'link',
component: () => import('@/views/components-demo/link.vue'),
name: 'link',
meta: { title: '文字链接', roles:['other'], icon: 'MenuIcon'}
},
{
path: 'radio',
component: () => import('@/views/components-demo/radio.vue'),
name: 'radio',
meta: { title: '单选框', roles:['other'], icon: 'MenuIcon'}
},
{
path: 'checkbox',
component: () => import('@/views/components-demo/checkbox.vue'),
name: 'checkbox',
meta: { title: '多选框', roles:['other'], icon: 'MenuIcon'}
},
{
path: 'input',
component: () => import('@/views/components-demo/input.vue'),
name: 'components-input',
meta: { title: '输入框', roles:['other'], icon: 'MenuIcon'}
},
{
path: 'components-inputnumber',
component: () => import('@/views/components-demo/inputnumber.vue'),
name: 'components-inputnumber',
meta: { title: '数字输入框', roles:['other'], icon: 'MenuIcon'}
},
{
path: 'timepicker',
component: () => import('@/views/components-demo/timepicker.vue'),
name: 'timepicker',
meta: { title: '时间选择器', roles:['other'], icon: 'MenuIcon'}
},
{
path: 'datetimepicker',
component: () => import('@/views/components-demo/datetimepicker.vue'),
name: 'datetimepicker',
meta: { title: '日期时间选择器', roles:['other'], icon: 'MenuIcon'}
},
{
path: 'scroll',
component: () => import('@/views/components-demo/scroll.vue'),
name: 'scroll',
meta: { title: '无限滚动', icon: 'MenuIcon' }
},
]
}
export default componentsRouter

3
src/utils/index.ts
View File

@ -1,6 +1,3 @@
/**
* Created by PanJiaChen on 16/11/18.
*/
/**
* Parse the time to string

3
src/utils/validate.ts
View File

@ -1,6 +1,3 @@
/**
* Created by PanJiaChen on 16/11/18.
*/
/**
* @param {string} path

179
src/views/components-demo/button.vue
View File

@ -1,179 +0,0 @@
<template>
<u-container-layout>
<div>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>基础用法 </span>
</div>
</template>
<div>
<el-button class="item">Default</el-button>
<el-button type="primary" class="item">Primary</el-button>
<el-button type="success" class="item">Success</el-button>
<el-button type="info" class="item">Info</el-button>
<el-button type="warning" class="item">Warning</el-button>
<el-button type="danger" class="item">Danger</el-button>
<el-button class="item">中文</el-button>
<el-button plain class="item">Plain</el-button>
<el-button type="primary" plain class="item">Primary</el-button>
<el-button type="success" plain class="item">Success</el-button>
<el-button type="info" plain class="item">Info</el-button>
<el-button type="warning" plain class="item">Warning</el-button>
<el-button type="danger" plain class="item">Danger</el-button>
<el-button round class="item">Round</el-button>
<el-button type="primary" round class="item">Primary</el-button>
<el-button type="success" round class="item">Success</el-button>
<el-button type="info" round class="item">Info</el-button>
<el-button type="warning" round class="item">Warning</el-button>
<el-button type="danger" round class="item">Danger</el-button>
<el-button :icon="Search" circle class="item" />
<el-button type="primary" :icon="Edit" circle class="item" />
<el-button type="success" :icon="Check" circle class="item" />
<el-button type="info" :icon="Message" circle class="item" />
<el-button type="warning" :icon="Star" circle class="item" />
<el-button type="danger" :icon="Delete" circle class="item" />
</div>
</el-card>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>禁用状态 </span>
</div>
</template>
<div>
<el-button disabled class="item">Default</el-button>
<el-button type="primary" disabled class="item">Primary</el-button>
<el-button type="success" disabled class="item">Success</el-button>
<el-button type="info" disabled class="item">Info</el-button>
<el-button type="warning" disabled class="item">Warning</el-button>
<el-button type="danger" disabled class="item">Danger</el-button>
<el-button plain disabled class="item">Plain</el-button>
<el-button type="primary" plain disabled class="item">Primary</el-button>
<el-button type="success" plain disabled class="item">Success</el-button>
<el-button type="info" plain disabled class="item"> Info</el-button>
<el-button type="warning" plain disabled class="item">Warning</el-button>
<el-button type="danger" plain disabled class="item">Danger</el-button>
</div>
</el-card>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>文字按钮 </span>
</div>
</template>
<div>
<el-button type="primary" link class="item">文字按钮</el-button>
<el-button type="primary" link disabled class="item">文字按钮</el-button>
</div>
</el-card>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>图标按钮 </span>
</div>
</template>
<div>
<el-button type="primary" :icon="Edit" class="item" />
<el-button type="primary" :icon="Share" class="item" />
<el-button type="primary" :icon="Delete" class="item" />
<el-button type="primary" :icon="Search" class="item">Search</el-button>
<el-button type="primary" class="item">
Upload<el-icon class="el-icon--right"><Upload /></el-icon>
</el-button>
</div>
</el-card>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>按钮组 </span>
</div>
</template>
<div>
<el-button type="primary" icon="ArrowLeft" class="item">上一页</el-button>
<el-button type="primary" class="item">
下一页<el-icon class="el-icon--right"><ArrowRight /></el-icon>
</el-button>
<el-button type="primary" :icon="Edit" class="item" />
<el-button type="primary" :icon="Share" class="item" />
<el-button type="primary" :icon="Delete" class="item" />
</div>
</el-card>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>加载中 </span>
</div>
</template>
<div>
<el-button type="primary" loading class="item">Loading</el-button>
<el-button type="primary" loading-icon="Eleme" loading class="item">Loading</el-button>
<el-button type="primary" loading class="item">
<template #loading>
<div class="custom-loading">
<svg class="circular" viewBox="-10, -10, 50, 50">
<path
class="path"
d="
M 30 15
L 28 17
M 25.61 25.61
A 15 15, 0, 0, 1, 15 30
A 15 15, 0, 1, 1, 27.99 7.5
L 15 15
"
style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"
/>
</svg>
</div>
</template>
Loading
</el-button>
</div>
</el-card>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>自定义颜色 </span>
</div>
</template>
<div>
<el-button color="#626aef" class="item">Default</el-button>
<el-button color="#626aef" plain class="item">Plain</el-button>
<el-button color="#626aef" disabled class="item">Disabled</el-button>
<el-button color="#626aef" disabled plain class="item">Disabled Plain</el-button>
</div>
</el-card>
</div>
</u-container-layout>
</template>
<script lang="ts" setup>
import { Check, Delete, Edit, Message, Search, Share, Star } from '@element-plus/icons-vue'
</script>
<style>
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.text {
font-size: 14px;
}
.item {
margin-bottom: 18px;
}
.box-card {
width: 100%;
margin-bottom: 20px;
}
</style>

137
src/views/components-demo/checkbox.vue
View File

@ -1,137 +0,0 @@
<template>
<u-container-layout>
<div>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>基础用法 </span>
</div>
</template>
<div>
<el-checkbox v-model="checked1" label="备选项1" />
<el-checkbox v-model="checked2" label="备选项1" />
</div>
</el-card>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>禁用状态 </span>
</div>
</template>
<div>
<el-checkbox v-model="checked1" disabled>备选项11</el-checkbox>
<el-checkbox v-model="checked2">备选项2</el-checkbox>
</div>
</el-card>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>多选框组 </span>
</div>
</template>
<div>
<el-checkbox-group v-model="checkList">
<el-checkbox label="备选项 A" />
<el-checkbox label="备选项 B" />
<el-checkbox label="备选项 C" />
<el-checkbox label="禁用" disabled />
<el-checkbox label="选中且禁用" disabled />
</el-checkbox-group>
</div>
</el-card>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>中间状态 </span>
</div>
</template>
<div>
<el-checkbox
v-model="checkAll"
:indeterminate="isIndeterminate"
@change="handleCheckAllChange"
>全选</el-checkbox
>
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
<el-checkbox v-for="city in cities" :key="city" :label="city">{{ city }}</el-checkbox>
</el-checkbox-group>
</div>
</el-card>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>按钮样式 </span>
</div>
</template>
<div>
<el-checkbox-group v-model="checkboxGroup1">
<el-checkbox-button v-for="city in cities" :key="city" :label="city">
{{ city }}
</el-checkbox-button>
</el-checkbox-group>
</div>
</el-card>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>带有边框 </span>
</div>
</template>
<div>
<el-checkbox v-model="checked1" label="备选项1" border />
<el-checkbox v-model="checked2" label="备选项2" border />
</div>
</el-card>
</div>
</u-container-layout>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const checked1 = ref(false)
const checked2 = ref(true)
const checkList = ref(['选中且禁用', '备选项 A'])
const cities = ['上海', '北京', '广州', '深圳']
const checkAll = ref(false)
const isIndeterminate = ref(true)
const checkedCities = ref(['上海', '北京'])
const checkboxGroup1 = ref(['上海'])
const handleCheckAllChange = (val: boolean) => {
checkedCities.value = val ? cities : []
isIndeterminate.value = false
}
const handleCheckedCitiesChange = (value: string[]) => {
const checkedCount = value.length
checkAll.value = checkedCount === cities.length
isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
}
</script>
<style>
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.el-link {
margin-right: 8px;
}
.el-link .el-icon--right.el-icon {
vertical-align: text-bottom;
}
.text {
font-size: 14px;
}
.item {
margin-bottom: 18px;
}
.box-card {
width: 100%;
margin-bottom: 20px;
}
</style>

152
src/views/components-demo/datetimepicker.vue
View File

@ -1,152 +0,0 @@
<template>
<u-container-layout>
<div>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>日期和时间点 </span>
</div>
</template>
<div>
<el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间点" />
</div>
</el-card>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>日期时间格式 </span>
</div>
</template>
<div>
<el-date-picker
v-model="value4"
type="datetime"
placeholder="选择时间"
format="YYYY/MM/DD hh:mm:ss"
/>
</div>
</el-card>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>日期和时间范围 </span>
</div>
</template>
<div>
<el-date-picker
:shortcuts="shortcuts1"
v-model="value3"
type="datetimerange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
/>
</div>
</el-card>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>默认的起始与结束时刻 </span>
</div>
</template>
<div>
<el-date-picker
v-model="value5"
type="datetimerange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="defaultTime1"
/>
</div>
</el-card>
</div>
</u-container-layout>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const value1 = ref('')
const value4 = ref('')
const value5 = ref('')
const defaultTime1 = [new Date(2000, 1, 1, 12, 0, 0)]
const value3 = ref([new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)])
const shortcuts = [
{
text: 'Today',
value: new Date(),
},
{
text: 'Yesterday',
value: () => {
const date = new Date()
date.setTime(date.getTime() - 3600 * 1000 * 24)
return date
},
},
{
text: 'A week ago',
value: () => {
const date = new Date()
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
return date
},
},
]
const shortcuts1 = [
{
text: 'Last week',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
return [start, end]
},
},
{
text: 'Last month',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
return [start, end]
},
},
{
text: 'Last 3 months',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
return [start, end]
},
},
]
</script>
<style>
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.el-link {
margin-right: 8px;
}
.el-link .el-icon--right.el-icon {
vertical-align: text-bottom;
}
.text {
font-size: 14px;
}
.item {
margin-bottom: 18px;
}
.box-card {
width: 100%;
margin-bottom: 20px;
}
</style>

11
src/views/components-demo/flow-chart.vue
View File

@ -1,11 +0,0 @@
<template>
<u-container-layout>
<zb-pipeline />
</u-container-layout>
</template>
<script lang="ts" setup>
import ZbPipeline from '@/components/pipeline/index.vue'
</script>
<style></style>

105
src/views/components-demo/input.vue
View File

@ -1,105 +0,0 @@
<template>
<u-container-layout>
<div>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>基础用法 </span>
</div>
</template>
<div>
<el-input v-model="input" placeholder="请输入内容" />
</div>
</el-card>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>禁用状态 </span>
</div>
</template>
<div>
<el-input v-model="input" disabled placeholder="请输入内容" />
</div>
</el-card>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>一键清空 </span>
</div>
</template>
<div>
<el-input v-model="input" placeholder="请输入内容" clearable />
</div>
</el-card>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>格式化 </span>
</div>
</template>
<div>
<el-input
v-model="input"
placeholder="请输入内容"
:formatter="(value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
:parser="(value) => value.replace(/\$\s?|(,*)/g, '')"
/>
</div>
</el-card>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>密码框 </span>
</div>
</template>
<div>
<el-input v-model="input" type="password" placeholder="请输入密码" show-password />
</div>
</el-card>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>带 icon 的输入框 </span>
</div>
</template>
<div>
<el-input v-model="input" placeholder="请输入内容" :suffix-icon="Calendar" />
<el-input v-model="input2" placeholder="请输入内容" :prefix-icon="Search" />
</div>
</el-card>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>文本域 </span>
</div>
</template>
<div>
<el-input v-model="textarea" :rows="2" type="textarea" placeholder="请输入内容" />
</div>
</el-card>
</div>
</u-container-layout>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { Calendar, Search } from '@element-plus/icons-vue'
const input = ref('')
const input2 = ref('')
const textarea = ref('')
</script>
<style>
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.box-card {
width: 100%;
margin-bottom: 20px;
}
</style>

110
src/views/components-demo/inputnumber.vue
View File

@ -1,110 +0,0 @@
<template>
<u-container-layout>
<div>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>基础用法 </span>
</div>
</template>
<div>
<el-input-number v-model="num" :min="1" :max="10" @change="handleChange" />
</div>
</el-card>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>禁用状态 </span>
</div>
</template>
<div>
<el-input-number v-model="num" :disabled="true" />
</div>
</el-card>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>步进 </span>
</div>
</template>
<div>
<el-input-number v-model="num" :step="2" />
</div>
</el-card>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>严格步进 </span>
</div>
</template>
<div>
<el-input-number v-model="num" :step="2" step-strictly />
</div>
</el-card>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>精度 </span>
</div>
</template>
<div>
<el-input-number v-model="num" :precision="2" :step="0.1" :max="10" />
</div>
</el-card>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>按钮位置 </span>
</div>
</template>
<div>
<el-input-number
v-model="num"
class="mx-4"
:min="1"
:max="10"
controls-position="right"
@change="handleChange"
/>
</div>
</el-card>
</div>
</u-container-layout>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const num = ref(1)
const handleChange = (value: number) => {
console.log(value)
}
</script>
<style>
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.el-link {
margin-right: 8px;
}
.el-link .el-icon--right.el-icon {
vertical-align: text-bottom;
}
.text {
font-size: 14px;
}
.item {
margin-bottom: 18px;
}
.box-card {
width: 100%;
margin-bottom: 20px;
}
</style>

91
src/views/components-demo/link.vue
View File

@ -1,91 +0,0 @@
<template>
<u-container-layout>
<div>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>基础用法 </span>
</div>
</template>
<div>
<el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>
<el-link type="primary">主要链接</el-link>
<el-link type="success">成功链接</el-link>
<el-link type="warning">警告链接</el-link>
<el-link type="danger">危险链接</el-link>
<el-link type="info">信息链接</el-link>
</div>
</el-card>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>禁用状态 </span>
</div>
</template>
<div>
<el-link disabled>默认链接</el-link>
<el-link type="primary" disabled>主要链接</el-link>
<el-link type="success" disabled>成功链接</el-link>
<el-link type="warning" disabled>警告链接</el-link>
<el-link type="danger" disabled>危险链接</el-link>
<el-link type="info" disabled>信息链接</el-link>
</div>
</el-card>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>下划线 </span>
</div>
</template>
<div>
<el-link :underline="false">无下划线</el-link>
<el-link>有下划线</el-link>
</div>
</el-card>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>图标 </span>
</div>
</template>
<div>
<el-link :icon="Edit">编辑</el-link>
<el-link>
查看<el-icon class="el-icon--right"><icon-view /></el-icon>
</el-link>
</div>
</el-card>
</div>
</u-container-layout>
</template>
<script lang="ts" setup>
import { Edit, View as IconView } from '@element-plus/icons-vue'
</script>
<style lang="scss" scoped>
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.el-link {
margin-right: 8px;
}
.el-link .el-icon--right.el-icon {
vertical-align: text-bottom;
}
.text {
font-size: 14px;
}
.item {
margin-bottom: 18px;
}
.box-card {
width: 100%;
margin-bottom: 20px;
}
</style>

107
src/views/components-demo/radio.vue
View File

@ -1,107 +0,0 @@
<template>
<u-container-layout>
<div>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>基础用法 </span>
</div>
</template>
<div>
<el-radio v-model="radio4" label="1">备选项</el-radio>
<el-radio v-model="radio4" label="2">备选项1</el-radio>
</div>
</el-card>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>禁用状态 </span>
</div>
</template>
<div>
<el-radio v-model="radio1" disabled label="disabled">备选项 1</el-radio>
<el-radio v-model="radio1" disabled label="selected and disabled">备选项 2</el-radio>
</div>
</el-card>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>单选框组 </span>
</div>
</template>
<div>
<el-radio-group v-model="radio">
<el-radio :label="3">备选项 1</el-radio>
<el-radio :label="6">备选项 2</el-radio>
<el-radio :label="9">备选项 3</el-radio>
</el-radio-group>
</div>
</el-card>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>按钮样式 </span>
</div>
</template>
<div>
<el-radio-group v-model="radio2">
<el-radio-button label="上海" />
<el-radio-button label="北京" />
<el-radio-button label="广州" />
<el-radio-button label="深圳" />
</el-radio-group>
</div>
</el-card>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>带有边框 </span>
</div>
</template>
<div>
<el-radio v-model="radio3" label="1" border>备选项1</el-radio>
<el-radio v-model="radio3" label="2" border>备选项2</el-radio>
</div>
</el-card>
</div>
</u-container-layout>
</template>
<script lang="ts" setup>
import { Edit, View as IconView } from '@element-plus/icons-vue'
import { ref } from 'vue'
const radio = ref(3)
const radio1 = ref('selected and disabled')
const radio2 = ref('上海')
const radio3 = ref('1')
const radio4 = ref('1')
</script>
<style scoped>
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.el-link {
margin-right: 8px;
}
.el-link .el-icon--right.el-icon {
vertical-align: text-bottom;
}
.text {
font-size: 14px;
}
.item {
margin-bottom: 18px;
}
.box-card {
width: 100%;
margin-bottom: 20px;
}
</style>

48
src/views/components-demo/scroll.vue
View File

@ -1,48 +0,0 @@
<template>
<u-container-layout>
<ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
<li v-for="i in count" :key="i" class="infinite-list-item">{{ i }}</li>
<div
v-if="isLoading"
style="
height: 50px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
"
>正在加载中...</div
>
</ul>
</u-container-layout>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const count = ref(0)
const isLoading = ref(true)
const load = () => {
count.value += 3
}
</script>
<style>
.infinite-list {
height: 300px;
padding: 0;
margin: 0;
list-style: none;
}
.infinite-list .infinite-list-item {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
background: var(--el-color-primary-light-9);
margin: 10px;
color: var(--el-color-primary);
}
.infinite-list .infinite-list-item + .list-item {
margin-top: 10px;
}
</style>

137
src/views/components-demo/slider.vue
View File

@ -1,137 +0,0 @@
<template>
<u-container-layout>
<div>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>基础用法 </span>
</div>
</template>
<div>
<el-checkbox v-model="checked1" label="备选项1" />
<el-checkbox v-model="checked2" label="备选项1" />
</div>
</el-card>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>禁用状态 </span>
</div>
</template>
<div>
<el-checkbox v-model="checked1" disabled>备选项11</el-checkbox>
<el-checkbox v-model="checked2">备选项2</el-checkbox>
</div>
</el-card>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>多选框组 </span>
</div>
</template>
<div>
<el-checkbox-group v-model="checkList">
<el-checkbox label="备选项 A" />
<el-checkbox label="备选项 B" />
<el-checkbox label="备选项 C" />
<el-checkbox label="禁用" disabled />
<el-checkbox label="选中且禁用" disabled />
</el-checkbox-group>
</div>
</el-card>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>中间状态 </span>
</div>
</template>
<div>
<el-checkbox
v-model="checkAll"
:indeterminate="isIndeterminate"
@change="handleCheckAllChange"
>全选</el-checkbox
>
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
<el-checkbox v-for="city in cities" :key="city" :label="city">{{ city }}</el-checkbox>
</el-checkbox-group>
</div>
</el-card>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>按钮样式 </span>
</div>
</template>
<div>
<el-checkbox-group v-model="checkboxGroup1">
<el-checkbox-button v-for="city in cities" :key="city" :label="city">
{{ city }}
</el-checkbox-button>
</el-checkbox-group>
</div>
</el-card>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>带有边框 </span>
</div>
</template>
<div>
<el-checkbox v-model="checked1" label="备选项1" border />
<el-checkbox v-model="checked2" label="备选项2" border />
</div>
</el-card>
</div>
</u-container-layout>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const checked1 = ref(false)
const checked2 = ref(true)
const checkList = ref(['选中且禁用', '备选项 A'])
const cities = ['上海', '北京', '广州', '深圳']
const checkAll = ref(false)
const isIndeterminate = ref(true)
const checkedCities = ref(['上海', '北京'])
const checkboxGroup1 = ref(['上海'])
const handleCheckAllChange = (val: boolean) => {
checkedCities.value = val ? cities : []
isIndeterminate.value = false
}
const handleCheckedCitiesChange = (value: string[]) => {
const checkedCount = value.length
checkAll.value = checkedCount === cities.length
isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
}
</script>
<style>
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.el-link {
margin-right: 8px;
}
.el-link .el-icon--right.el-icon {
vertical-align: text-bottom;
}
.text {
font-size: 14px;
}
.item {
margin-bottom: 18px;
}
.box-card {
width: 100%;
margin-bottom: 20px;
}
</style>

67
src/views/components-demo/split-pane.vue
View File

@ -1,67 +0,0 @@
<template>
<div class="components-container">
<!-- <aside><strong>SplitPane</strong> If you've used-->
<!-- <a href="https://codepen.io/" target="_blank"> codepen</a>,-->
<!-- <a href="https://jsfiddle.net/" target="_blank"> jsfiddle </a>will not be unfamiliar.-->
<!-- <a href="https://github.com/PanJiaChen/vue-split-pane" target="_blank"> Github repository</a>-->
<!-- </aside>-->
<!-- <split-pane split="vertical">-->
<!-- <template slot="paneL">-->
<!-- <div class="left-container" />-->
<!-- </template>-->
<!-- <template slot="paneR">-->
<!-- <split-pane split="horizontal">-->
<!-- <template slot="paneL">-->
<!-- <div class="top-container" />-->
<!-- </template>-->
<!-- <template slot="paneR">-->
<!-- <div class="bottom-container" />-->
<!-- </template>-->
<!-- </split-pane>-->
<!-- </template>-->
<!-- </split-pane>-->
</div>
</template>
<script lang="ts" setup>
import SplitPane from 'vue-splitpane'
// export default {
// name: 'SplitpaneDemo',
// components: { splitPane },
// methods: {
// resize() {
// console.log('resize')
// }
// }
// }
</script>
<style scoped>
.components-container {
position: relative;
height: 100vh;
}
.left-container {
background-color: #f38181;
height: 100%;
}
.right-container {
background-color: #fce38a;
height: 200px;
}
.top-container {
background-color: #fce38a;
width: 100%;
height: 100%;
}
.bottom-container {
width: 100%;
background-color: #95e1d3;
height: 100%;
}
</style>

105
src/views/components-demo/timepicker.vue
View File

@ -1,105 +0,0 @@
<template>
<u-container-layout>
<div>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>任意时间点 </span>
</div>
</template>
<div>
<el-time-picker v-model="value4" placeholder="选择时间" />
</div>
</el-card>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>限制时间选择范围 </span>
</div>
</template>
<div>
<el-time-picker
v-model="value1"
:disabled-hours="disabledHours"
:disabled-minutes="disabledMinutes"
:disabled-seconds="disabledSeconds"
placeholder="选择时间"
/>
</div>
</el-card>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>任意时间范围 </span>
</div>
</template>
<div>
<el-time-picker
v-model="value3"
is-range
range-separator="-"
start-placeholder="开始时间"
end-placeholder="结束时间"
/>
</div>
</el-card>
</div>
</u-container-layout>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const value4 = ref()
const value1 = ref(new Date(2016, 9, 10, 18, 30))
const value3 = ref([new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)])
const value2 = ref([new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)])
const makeRange = (start: number, end: number) => {
const result: number[] = []
for (let i = start; i <= end; i++) {
result.push(i)
}
return result
}
const disabledHours = () => {
return makeRange(0, 16).concat(makeRange(19, 23))
}
const disabledMinutes = (hour: number) => {
if (hour === 17) {
return makeRange(0, 29)
}
if (hour === 18) {
return makeRange(31, 59)
}
}
const disabledSeconds = (hour: number, minute: number) => {
if (hour === 18 && minute === 30) {
return makeRange(1, 59)
}
}
</script>
<style>
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.el-link {
margin-right: 8px;
}
.el-link .el-icon--right.el-icon {
vertical-align: text-bottom;
}
.text {
font-size: 14px;
}
.item {
margin-bottom: 18px;
}
.box-card {
width: 100%;
margin-bottom: 20px;
}
</style>

0
src/views/components-demo/watermark.vue
View File