重构tagview
This commit is contained in:
zouzhibing
parent
fea0add957
commit
3096dccd05
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<div class="m-container-layout">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -7,6 +8,10 @@
|
|||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.m-container-layout{
|
||||
margin: 20px;
|
||||
padding: 20px;
|
||||
background: white;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
>
|
||||
<template #reference>
|
||||
<el-badge :value="3" class="item-info-pop">
|
||||
<el-icon><Bell /></el-icon>
|
||||
<el-icon class="bell"><Bell /></el-icon>
|
||||
</el-badge>
|
||||
</template>
|
||||
<div>
|
||||
|
|
@ -58,4 +58,9 @@
|
|||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
.transverseMenu{
|
||||
.bell{
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<div class="m-screenful">
|
||||
<el-icon
|
||||
class="full-screen"
|
||||
title="全屏"
|
||||
@click.stop="click"
|
||||
style="margin-right: 10px;cursor: pointer" ><full-screen /></el-icon>
|
||||
|
|
@ -58,4 +59,9 @@
|
|||
cursor: pointer;
|
||||
transition: all .3s;
|
||||
}
|
||||
.transverseMenu{
|
||||
.full-screen{
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<section class="app-main" >
|
||||
<section class="app-main" >
|
||||
<router-view v-slot="{ Component,route }">
|
||||
<transition name="fade-slide" mode="out-in" appear>
|
||||
<keep-alive :include="cachedViews">
|
||||
<component :is="Component" :key="route.name" v-if="isReload"/>
|
||||
<component :is="Component" :key="route.name" />
|
||||
</keep-alive>
|
||||
</transition>
|
||||
</router-view>
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.app-main{
|
||||
padding: 20px;
|
||||
//padding: 20px;
|
||||
/*padding-top: 110px;*/
|
||||
//min-height: 100%;
|
||||
//overflow: auto;
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
//padding-top: 70px;
|
||||
background: white;
|
||||
// background: white;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div
|
||||
class="m-layout-header"
|
||||
:style="{left:`${mode==='horizontal'?0:isCollapse?'56':'210'}px`}">
|
||||
<div class="header" :class="{
|
||||
<div class="header" :class="{
|
||||
transverseMenu:mode==='horizontal'
|
||||
}">
|
||||
<menu-slide v-if="mode==='horizontal'"/>
|
||||
|
|
@ -161,4 +161,5 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -98,9 +98,9 @@
|
|||
z-index: 999;
|
||||
}
|
||||
.m-container-content{
|
||||
padding: 20px;
|
||||
//padding: 20px;
|
||||
/*background: #f6f8f9;*/
|
||||
padding-top: 110px;
|
||||
padding-top: 93px;
|
||||
position: relative;
|
||||
}
|
||||
.app-main-hide-tag{
|
||||
|
|
|
|||
|
|
@ -6,10 +6,12 @@ import store from './store'
|
|||
import './permission'
|
||||
import SvgIcon from './icons/index'
|
||||
import ElementPlus from 'element-plus'
|
||||
import UContainerLayout from '@/components/u-container-layout/index.vue'
|
||||
import 'element-plus/dist/index.css'
|
||||
import zhCn from 'element-plus/es/locale/lang/zh-cn'
|
||||
const app = createApp(App)
|
||||
app.component('svg-icon',SvgIcon)
|
||||
app.component('u-container-layout',UContainerLayout)
|
||||
import * as ElIconsModules from '@element-plus/icons-vue'
|
||||
// 全局注册element-plus icon图标组件
|
||||
Object.keys(ElIconsModules).forEach((key) => {//循环遍历组件名称
|
||||
|
|
|
|||
|
|
@ -3,280 +3,279 @@
|
|||
<div :id="id" :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import 'echarts-liquidfill/src/liquidFill.js'
|
||||
import {geoJson} from './get.js'
|
||||
import * as echarts from "echarts";
|
||||
import {EChartsType} from "echarts/core";
|
||||
import {onMounted} from "vue";
|
||||
import {geoJson} from './get.js'
|
||||
import * as echarts from "echarts";
|
||||
import {EChartsType} from "echarts/core";
|
||||
import {onMounted} from "vue";
|
||||
|
||||
let props = defineProps({
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
config:{
|
||||
type: Object,
|
||||
default: ()=>{}
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
})
|
||||
|
||||
var geoGpsMap = [109.1162, 34.2004]
|
||||
var geoCoordMap = {
|
||||
"江苏": [118.8062, 31.9208],
|
||||
'内蒙古': [110.3467, 41.4899],
|
||||
"辽宁": [123.1238, 42.1216],
|
||||
"陕西": [109.1162, 34.2004],
|
||||
"甘肃": [103.5901, 36.3043],
|
||||
"青海": [101.4038, 36.8207],
|
||||
"新疆": [87.9236, 43.5883],
|
||||
|
||||
"河南": [113.4668, 34.6234],
|
||||
"西藏": [116.3896, 39.91],
|
||||
"浙江": [119.5313, 29.8773],
|
||||
"福建": [119.4543, 25.9222],
|
||||
"湖南": [113.0823, 28.2568],
|
||||
"四川": [113.0823, 28.2568],
|
||||
"云南": [102.9199, 25.4663],
|
||||
"广东": [113.12244, 23.009505],
|
||||
"海南": [110.3893, 19.8516]
|
||||
};
|
||||
|
||||
var value = {
|
||||
'江苏': 10000,
|
||||
'内蒙古': 10000,
|
||||
'辽宁': 10000,
|
||||
'陕西': 10000,
|
||||
'福建': 10000,
|
||||
'甘肃': 10000,
|
||||
'青海': 10000,
|
||||
'新疆': 10000,
|
||||
'湖北': 10000,
|
||||
'浙江': 10000,
|
||||
'河南': 10000,
|
||||
'湖南': 10000,
|
||||
'云南': 10000,
|
||||
'广东': 10000,
|
||||
'海南': 10000,
|
||||
'西藏': 10000,
|
||||
|
||||
|
||||
|
||||
};
|
||||
var colors = '#f9b207';
|
||||
|
||||
var year = ["长春", "长春", "青岛", "青岛", "成都", "成都"];
|
||||
var mapData = [];
|
||||
|
||||
/*柱子Y名称*/
|
||||
var categoryData = [];
|
||||
var barData = [];
|
||||
|
||||
for (var key in geoCoordMap) {
|
||||
mapData.push({
|
||||
"year": '陕西',
|
||||
"name": key,
|
||||
"value": value[key] / 100,
|
||||
"value1": value[key] / 100,
|
||||
});
|
||||
}
|
||||
|
||||
mapData.sort(function sortNumber(a, b) {
|
||||
return a.value - b.value
|
||||
});
|
||||
for (var j = 0; j < mapData.length; j++) {
|
||||
barData.push(mapData[j].value1);
|
||||
categoryData.push(mapData[j].name);
|
||||
}
|
||||
|
||||
echarts.registerMap('china', geoJson);
|
||||
var convertData = function(data) {
|
||||
var res = [];
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var geoCoord = geoCoordMap[data[i].name];
|
||||
if (geoCoord) {
|
||||
res.push({
|
||||
name: data[i].name,
|
||||
value: geoCoord.concat(data[i].value)
|
||||
});
|
||||
}
|
||||
}
|
||||
return res;
|
||||
};
|
||||
var convertToLineData = function(data, gps) {
|
||||
var res = [];
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var dataItem = data[i];
|
||||
var toCoord = geoCoordMap[dataItem.name];
|
||||
// debugger;
|
||||
var fromCoord = gps; //郑州
|
||||
// var toCoord = geoGps[Math.random()*3];
|
||||
if (fromCoord && toCoord) {
|
||||
res.push([{
|
||||
coord: fromCoord,
|
||||
value: dataItem.value
|
||||
}, {
|
||||
coord: toCoord,
|
||||
}]);
|
||||
}
|
||||
}
|
||||
return res;
|
||||
};
|
||||
|
||||
|
||||
|
||||
const options = {
|
||||
backgroundColor: '#001540',
|
||||
geo: {
|
||||
show: true,
|
||||
map: 'china',
|
||||
roam: true,
|
||||
zoom: 1,
|
||||
center: [101.4038, 36.8207],
|
||||
label: {
|
||||
emphasis: {
|
||||
show: false
|
||||
}
|
||||
let props = defineProps({
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderColor: 'rgba(147, 235, 248, 1)',
|
||||
borderWidth: 1,
|
||||
areaColor: {
|
||||
type: 'radial',
|
||||
x: 0.5,
|
||||
y: 0.5,
|
||||
r: 0.8,
|
||||
colorStops: [{
|
||||
offset: 0,
|
||||
color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
|
||||
}],
|
||||
globalCoord: false // 缺省为 false
|
||||
},
|
||||
shadowColor: 'rgba(128, 217, 248, 1)',
|
||||
// shadowColor: 'rgba(255, 255, 255, 1)',
|
||||
shadowOffsetX: -2,
|
||||
shadowOffsetY: 2,
|
||||
shadowBlur: 10
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: '#389BB7',
|
||||
borderWidth: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
|
||||
//地图？
|
||||
{
|
||||
type: 'map',
|
||||
map: 'china',
|
||||
geoIndex: 0,
|
||||
aspectScale: 0.75, //长宽比
|
||||
showLegendSymbol: false, // 存在legend时显示
|
||||
label: {
|
||||
normal: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
show: false,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
roam: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: '#031525',
|
||||
borderColor: '#FFFFFF',
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: '#2B91B7'
|
||||
}
|
||||
},
|
||||
animation: false
|
||||
config:{
|
||||
type: Object,
|
||||
default: ()=>{}
|
||||
},
|
||||
//地图点的动画效果
|
||||
{
|
||||
// name: 'Top 5',
|
||||
type: 'effectScatter',
|
||||
coordinateSystem: 'geo',
|
||||
data: convertData(mapData.sort(function(a, b) {
|
||||
return b.value - a.value;
|
||||
}).slice(0, 20)),
|
||||
symbolSize: function(val) {
|
||||
return val[2] / 10;
|
||||
},
|
||||
showEffectOn: 'render',
|
||||
rippleEffect: {
|
||||
brushType: 'stroke'
|
||||
},
|
||||
hoverAnimation: true,
|
||||
label: {
|
||||
normal: {
|
||||
formatter: '{b}',
|
||||
position: 'right',
|
||||
show: true
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: colors,
|
||||
shadowBlur: 10,
|
||||
shadowColor: colors
|
||||
}
|
||||
},
|
||||
zlevel: 1
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
//地图线的动画效果
|
||||
{
|
||||
type: 'lines',
|
||||
zlevel: 2,
|
||||
effect: {
|
||||
show: true,
|
||||
period: 4, //箭头指向速度，值越小速度越快
|
||||
trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
|
||||
symbol: 'arrow', //箭头图标
|
||||
symbolSize: 3, //图标大小
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: colors,
|
||||
width: 0.1, //尾迹线条宽度
|
||||
opacity: 0.5, //尾迹线条透明度
|
||||
curveness: .3 //尾迹线条曲直度
|
||||
}
|
||||
},
|
||||
data: convertToLineData(mapData, geoGpsMap)
|
||||
width: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
]
|
||||
};
|
||||
let chart:EChartsType;
|
||||
const initChart =()=> {
|
||||
let chart = echarts.init(document.getElementById(props.id))
|
||||
chart.setOption(options)
|
||||
return chart
|
||||
}
|
||||
onMounted(()=>{
|
||||
chart = initChart()
|
||||
window.addEventListener('resize',function (){
|
||||
chart&&chart.resize()
|
||||
})
|
||||
|
||||
})
|
||||
var geoGpsMap = [109.1162, 34.2004]
|
||||
var geoCoordMap = {
|
||||
"江苏": [118.8062, 31.9208],
|
||||
'内蒙古': [110.3467, 41.4899],
|
||||
"辽宁": [123.1238, 42.1216],
|
||||
"陕西": [109.1162, 34.2004],
|
||||
"甘肃": [103.5901, 36.3043],
|
||||
"青海": [101.4038, 36.8207],
|
||||
"新疆": [87.9236, 43.5883],
|
||||
|
||||
"河南": [113.4668, 34.6234],
|
||||
"西藏": [116.3896, 39.91],
|
||||
"浙江": [119.5313, 29.8773],
|
||||
"福建": [119.4543, 25.9222],
|
||||
"湖南": [113.0823, 28.2568],
|
||||
"四川": [113.0823, 28.2568],
|
||||
"云南": [102.9199, 25.4663],
|
||||
"广东": [113.12244, 23.009505],
|
||||
"海南": [110.3893, 19.8516]
|
||||
};
|
||||
|
||||
var value = {
|
||||
'江苏': 10000,
|
||||
'内蒙古': 10000,
|
||||
'辽宁': 10000,
|
||||
'陕西': 10000,
|
||||
'福建': 10000,
|
||||
'甘肃': 10000,
|
||||
'青海': 10000,
|
||||
'新疆': 10000,
|
||||
'湖北': 10000,
|
||||
'浙江': 10000,
|
||||
'河南': 10000,
|
||||
'湖南': 10000,
|
||||
'云南': 10000,
|
||||
'广东': 10000,
|
||||
'海南': 10000,
|
||||
'西藏': 10000,
|
||||
|
||||
|
||||
|
||||
};
|
||||
var colors = '#f9b207';
|
||||
|
||||
var year = ["长春", "长春", "青岛", "青岛", "成都", "成都"];
|
||||
var mapData = [];
|
||||
|
||||
/*柱子Y名称*/
|
||||
var categoryData = [];
|
||||
var barData = [];
|
||||
|
||||
for (var key in geoCoordMap) {
|
||||
mapData.push({
|
||||
"year": '陕西',
|
||||
"name": key,
|
||||
"value": value[key] / 100,
|
||||
"value1": value[key] / 100,
|
||||
});
|
||||
}
|
||||
|
||||
mapData.sort(function sortNumber(a, b) {
|
||||
return a.value - b.value
|
||||
});
|
||||
for (var j = 0; j < mapData.length; j++) {
|
||||
barData.push(mapData[j].value1);
|
||||
categoryData.push(mapData[j].name);
|
||||
}
|
||||
|
||||
echarts.registerMap('china', geoJson);
|
||||
var convertData = function(data) {
|
||||
var res = [];
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var geoCoord = geoCoordMap[data[i].name];
|
||||
if (geoCoord) {
|
||||
res.push({
|
||||
name: data[i].name,
|
||||
value: geoCoord.concat(data[i].value)
|
||||
});
|
||||
}
|
||||
}
|
||||
return res;
|
||||
};
|
||||
var convertToLineData = function(data, gps) {
|
||||
var res = [];
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var dataItem = data[i];
|
||||
var toCoord = geoCoordMap[dataItem.name];
|
||||
// debugger;
|
||||
var fromCoord = gps; //郑州
|
||||
// var toCoord = geoGps[Math.random()*3];
|
||||
if (fromCoord && toCoord) {
|
||||
res.push([{
|
||||
coord: fromCoord,
|
||||
value: dataItem.value
|
||||
}, {
|
||||
coord: toCoord,
|
||||
}]);
|
||||
}
|
||||
}
|
||||
return res;
|
||||
};
|
||||
|
||||
|
||||
|
||||
const options = {
|
||||
backgroundColor: '#001540',
|
||||
geo: {
|
||||
show: true,
|
||||
map: 'china',
|
||||
roam: true,
|
||||
zoom: 1,
|
||||
center: [101.4038, 36.8207],
|
||||
label: {
|
||||
emphasis: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderColor: 'rgba(147, 235, 248, 1)',
|
||||
borderWidth: 1,
|
||||
areaColor: {
|
||||
type: 'radial',
|
||||
x: 0.5,
|
||||
y: 0.5,
|
||||
r: 0.8,
|
||||
colorStops: [{
|
||||
offset: 0,
|
||||
color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
|
||||
}],
|
||||
globalCoord: false // 缺省为 false
|
||||
},
|
||||
shadowColor: 'rgba(128, 217, 248, 1)',
|
||||
// shadowColor: 'rgba(255, 255, 255, 1)',
|
||||
shadowOffsetX: -2,
|
||||
shadowOffsetY: 2,
|
||||
shadowBlur: 10
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: '#389BB7',
|
||||
borderWidth: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
|
||||
//地图？
|
||||
{
|
||||
type: 'map',
|
||||
map: 'china',
|
||||
geoIndex: 0,
|
||||
aspectScale: 0.75, //长宽比
|
||||
showLegendSymbol: false, // 存在legend时显示
|
||||
label: {
|
||||
normal: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
show: false,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
roam: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: '#031525',
|
||||
borderColor: '#FFFFFF',
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: '#2B91B7'
|
||||
}
|
||||
},
|
||||
animation: false
|
||||
},
|
||||
//地图点的动画效果
|
||||
{
|
||||
// name: 'Top 5',
|
||||
type: 'effectScatter',
|
||||
coordinateSystem: 'geo',
|
||||
data: convertData(mapData.sort(function(a, b) {
|
||||
return b.value - a.value;
|
||||
}).slice(0, 20)),
|
||||
symbolSize: function(val) {
|
||||
return val[2] / 10;
|
||||
},
|
||||
showEffectOn: 'render',
|
||||
rippleEffect: {
|
||||
brushType: 'stroke'
|
||||
},
|
||||
hoverAnimation: true,
|
||||
label: {
|
||||
normal: {
|
||||
formatter: '{b}',
|
||||
position: 'right',
|
||||
show: true
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: colors,
|
||||
shadowBlur: 10,
|
||||
shadowColor: colors
|
||||
}
|
||||
},
|
||||
zlevel: 1
|
||||
},
|
||||
//地图线的动画效果
|
||||
{
|
||||
type: 'lines',
|
||||
zlevel: 2,
|
||||
effect: {
|
||||
show: true,
|
||||
period: 4, //箭头指向速度，值越小速度越快
|
||||
trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
|
||||
symbol: 'arrow', //箭头图标
|
||||
symbolSize: 3, //图标大小
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: colors,
|
||||
width: 0.1, //尾迹线条宽度
|
||||
opacity: 0.5, //尾迹线条透明度
|
||||
curveness: .3 //尾迹线条曲直度
|
||||
}
|
||||
},
|
||||
data: convertToLineData(mapData, geoGpsMap)
|
||||
}
|
||||
]
|
||||
};
|
||||
let chart:EChartsType;
|
||||
const initChart =()=> {
|
||||
let chart = echarts.init(document.getElementById(props.id))
|
||||
chart.setOption(options)
|
||||
return chart
|
||||
}
|
||||
onMounted(()=>{
|
||||
chart = initChart()
|
||||
window.addEventListener('resize',function (){
|
||||
chart&&chart.resize()
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
<div class="echarts-map">
|
||||
<migration-charts height="100%" width="100%" id="migration"/>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
|
|
@ -12,6 +13,6 @@ import MigrationCharts from './components/migration/index.vue'
|
|||
|
||||
<style>
|
||||
.echarts-map{
|
||||
height: calc(100vh - 150px);
|
||||
height: calc(100vh - 93px);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div style="width: 100%;">
|
||||
<u-container-layout style="width: 100%;">
|
||||
<el-row class="row-bg" :gutter="10">
|
||||
<el-col :xs="24" :sm="12" :lg="8">
|
||||
<el-card class="box-card">
|
||||
|
|
@ -105,7 +105,7 @@
|
|||
|
||||
|
||||
|
||||
</div>
|
||||
</u-container-layout>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import LineCharts from './components/simple/line.vue'
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
<template>
|
||||
<div>
|
||||
<div style="margin-bottom: 15px">聊天内容框，功能有发送emoji表情，上传图片，发送图片，内容滚动，发送文字</div>
|
||||
<u-chat-box/>
|
||||
</div>
|
||||
|
||||
<u-container-layout>
|
||||
<div>
|
||||
<div style="margin-bottom: 15px">聊天内容框，功能有发送emoji表情，上传图片，发送图片，内容滚动，发送文字</div>
|
||||
<u-chat-box/>
|
||||
</div>
|
||||
</u-container-layout>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<u-container-layout>
|
||||
<el-card style="margin-bottom: 20px">
|
||||
<div style="margin-bottom: 10px">输入内容，并点击复制按钮</div>
|
||||
<el-input v-model="inputData" placeholder="请输入" style="width:400px;max-width:100%;" />
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
<div style="margin-bottom: 10px">复制成功后可在这粘贴测试</div>
|
||||
<el-input v-model="testValue" placeholder="请输入" style="width:400px;max-width:100%;" />
|
||||
</el-card>
|
||||
</div>
|
||||
</u-container-layout>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import {ref} from 'vue'
|
||||
|
|
@ -22,4 +22,4 @@
|
|||
const handleCopy = (text, event)=> {
|
||||
clip(text, event)
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,130 +1,131 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<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>
|
||||
</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>
|
||||
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<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>
|
||||
</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>
|
||||
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>文字按钮
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<div>
|
||||
<el-button type="text" class="item">文字按钮</el-button>
|
||||
<el-button type="text" disabled class="item">文字按钮</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<div>
|
||||
<el-button type="text" class="item">文字按钮</el-button>
|
||||
<el-button type="text" disabled class="item">文字按钮</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-card>
|
||||
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<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>
|
||||
</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>
|
||||
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<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>
|
||||
</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>
|
||||
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<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="
|
||||
</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
|
||||
|
|
@ -132,35 +133,37 @@
|
|||
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>
|
||||
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">
|
||||
<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>
|
||||
</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>
|
||||
|
||||
<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>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
|
|
|
|||
|
|
@ -1,105 +1,106 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<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>
|
||||
</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">
|
||||
<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>
|
||||
</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">
|
||||
<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>
|
||||
</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">
|
||||
<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>
|
||||
</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">
|
||||
<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>
|
||||
</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">
|
||||
<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>
|
||||
</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>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
|
|
|
|||
|
|
@ -1,80 +1,83 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<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>
|
||||
</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">
|
||||
<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>
|
||||
</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">
|
||||
<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>
|
||||
</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">
|
||||
<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>
|
||||
</template>
|
||||
<div>
|
||||
<el-date-picker
|
||||
v-model="value5"
|
||||
type="datetimerange"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:default-time="defaultTime1"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</u-container-layout>
|
||||
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div>
|
||||
<u-container-layout>
|
||||
<zb-pipeline/>
|
||||
</div>
|
||||
</u-container-layout>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
|
|||
|
|
@ -1,77 +1,80 @@
|
|||
<template>
|
||||
<div style="max-width: 800px">
|
||||
<el-form
|
||||
ref="ruleFormRef"
|
||||
:model="ruleForm"
|
||||
:rules="rules"
|
||||
label-width="120px"
|
||||
class="demo-ruleForm"
|
||||
:size="formSize"
|
||||
>
|
||||
<el-form-item label="活动名称" prop="name">
|
||||
<el-input v-model="ruleForm.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="活动区域" prop="region">
|
||||
<el-select v-model="ruleForm.region" placeholder="活动区域">
|
||||
<el-option label="区域1" value="上海" />
|
||||
<el-option label="区域2" value="北京" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="即时配送" required>
|
||||
<el-col :span="11">
|
||||
<el-form-item prop="date1">
|
||||
<el-date-picker
|
||||
v-model="ruleForm.date1"
|
||||
type="date"
|
||||
placeholder="选择时间"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col class="text-center" :span="2" style="text-align: center">
|
||||
<span class="text-gray-500" >-</span>
|
||||
</el-col>
|
||||
<el-col :span="11">
|
||||
<el-form-item prop="date2">
|
||||
<el-time-picker
|
||||
v-model="ruleForm.date2"
|
||||
placeholder="选择时间"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="即时配送" prop="delivery">
|
||||
<el-switch v-model="ruleForm.delivery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="活动性质" prop="type">
|
||||
<el-checkbox-group v-model="ruleForm.type">
|
||||
<el-checkbox label="美食/餐厅线上活动" name="type" />
|
||||
<el-checkbox label="地推活动" name="type" />
|
||||
<el-checkbox label="线下主题活动" name="type" />
|
||||
<el-checkbox label="单纯品牌曝光" name="type" />
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="特殊资源" prop="resource">
|
||||
<el-radio-group v-model="ruleForm.resource">
|
||||
<el-radio label="线上品牌商赞助" />
|
||||
<el-radio label="线下场地免费" />
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="上传图片" prop="img">
|
||||
<u-upload v-model="ruleForm.img"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="desc">
|
||||
<el-input v-model="ruleForm.desc" type="textarea" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm(ruleFormRef)"
|
||||
>立即创建</el-button
|
||||
>
|
||||
<el-button @click="resetForm(ruleFormRef)">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<u-container-layout>
|
||||
<div style="max-width: 800px">
|
||||
<el-form
|
||||
ref="ruleFormRef"
|
||||
:model="ruleForm"
|
||||
:rules="rules"
|
||||
label-width="120px"
|
||||
class="demo-ruleForm"
|
||||
:size="formSize"
|
||||
>
|
||||
<el-form-item label="活动名称" prop="name">
|
||||
<el-input v-model="ruleForm.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="活动区域" prop="region">
|
||||
<el-select v-model="ruleForm.region" placeholder="活动区域">
|
||||
<el-option label="区域1" value="上海" />
|
||||
<el-option label="区域2" value="北京" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="即时配送" required>
|
||||
<el-col :span="11">
|
||||
<el-form-item prop="date1">
|
||||
<el-date-picker
|
||||
v-model="ruleForm.date1"
|
||||
type="date"
|
||||
placeholder="选择时间"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col class="text-center" :span="2" style="text-align: center">
|
||||
<span class="text-gray-500" >-</span>
|
||||
</el-col>
|
||||
<el-col :span="11">
|
||||
<el-form-item prop="date2">
|
||||
<el-time-picker
|
||||
v-model="ruleForm.date2"
|
||||
placeholder="选择时间"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item label="即时配送" prop="delivery">
|
||||
<el-switch v-model="ruleForm.delivery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="活动性质" prop="type">
|
||||
<el-checkbox-group v-model="ruleForm.type">
|
||||
<el-checkbox label="美食/餐厅线上活动" name="type" />
|
||||
<el-checkbox label="地推活动" name="type" />
|
||||
<el-checkbox label="线下主题活动" name="type" />
|
||||
<el-checkbox label="单纯品牌曝光" name="type" />
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="特殊资源" prop="resource">
|
||||
<el-radio-group v-model="ruleForm.resource">
|
||||
<el-radio label="线上品牌商赞助" />
|
||||
<el-radio label="线下场地免费" />
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="上传图片" prop="img">
|
||||
<u-upload v-model="ruleForm.img"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="desc">
|
||||
<el-input v-model="ruleForm.desc" type="textarea" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm(ruleFormRef)"
|
||||
>立即创建</el-button
|
||||
>
|
||||
<el-button @click="resetForm(ruleFormRef)">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</u-container-layout>
|
||||
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
|
|||
|
|
@ -1,113 +1,116 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
<div>
|
||||
<el-input v-model="input" placeholder="请输入内容" />
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
<div>
|
||||
<el-input v-model="input" disabled placeholder="请输入内容" />
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
<div>
|
||||
<el-input v-model="input" placeholder="请输入内容" clearable />
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<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>
|
||||
</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">
|
||||
<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>
|
||||
</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">
|
||||
<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">
|
||||
</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>
|
||||
</template>
|
||||
<div>
|
||||
<el-input
|
||||
v-model="textarea"
|
||||
:rows="2"
|
||||
type="textarea"
|
||||
placeholder="请输入内容"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
</div>
|
||||
</u-container-layout>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
|
|
|
|||
|
|
@ -1,86 +1,89 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<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>
|
||||
</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">
|
||||
<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>
|
||||
</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">
|
||||
<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>
|
||||
</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">
|
||||
<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>
|
||||
</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">
|
||||
<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>
|
||||
</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">
|
||||
<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>
|
||||
</template>
|
||||
<div>
|
||||
<el-input-number
|
||||
v-model="num"
|
||||
class="mx-4"
|
||||
:min="1"
|
||||
:max="10"
|
||||
controls-position="right"
|
||||
@change="handleChange"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</u-container-layout>
|
||||
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
|
|
|
|||
|
|
@ -1,69 +1,72 @@
|
|||
<template>
|
||||
<u-container-layout>
|
||||
<div>
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<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>
|
||||
</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">
|
||||
<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>
|
||||
</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">
|
||||
<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>
|
||||
</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">
|
||||
<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>
|
||||
</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'
|
||||
|
|
|
|||
|
|
@ -1,81 +1,84 @@
|
|||
<template>
|
||||
<u-container-layout>
|
||||
<div>
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<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>
|
||||
</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">
|
||||
<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>
|
||||
</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">
|
||||
<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>
|
||||
</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">
|
||||
<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>
|
||||
</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">
|
||||
<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>
|
||||
</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'
|
||||
|
|
|
|||
|
|
@ -1,10 +1,13 @@
|
|||
<template>
|
||||
<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>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,105 +1,108 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<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>
|
||||
</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">
|
||||
<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>
|
||||
</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">
|
||||
<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>
|
||||
</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">
|
||||
<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>
|
||||
</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">
|
||||
<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>
|
||||
</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">
|
||||
<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>
|
||||
</template>
|
||||
<div>
|
||||
<el-checkbox v-model="checked1" label="备选项1" border />
|
||||
<el-checkbox v-model="checked2" label="备选项2" border />
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</u-container-layout>
|
||||
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
|
|
|
|||
|
|
@ -1,56 +1,59 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
<div>
|
||||
<el-time-picker v-model="value4" placeholder="选择时间" />
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<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>
|
||||
</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">
|
||||
<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>
|
||||
</template>
|
||||
<div>
|
||||
<el-time-picker
|
||||
v-model="value3"
|
||||
is-range
|
||||
range-separator="-"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</u-container-layout>
|
||||
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
|
|
|
|||
|
|
@ -1,65 +1,68 @@
|
|||
<template>
|
||||
<u-container-layout>
|
||||
<div>
|
||||
<el-card style="margin-bottom: 10px">
|
||||
<template #header>
|
||||
<span>按钮上传</span>
|
||||
</template>
|
||||
<div class="demo-image__preview">
|
||||
<div
|
||||
class="upload-list"
|
||||
v-for="item,index in fileList">
|
||||
<el-image
|
||||
@click.stop="privew(index)"
|
||||
style="width: 100%; height: 100%"
|
||||
:src="item"
|
||||
:preview-src-list="fileList"
|
||||
:initial-index="initialIndex"
|
||||
fit="cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<el-upload action="/" multiple :before-upload="beforeUploadAction">
|
||||
<el-button type="primary">点击上传</el-button>
|
||||
</el-upload>
|
||||
</el-card>
|
||||
<el-card>
|
||||
<template #header>
|
||||
<span>多图片上传</span>
|
||||
</template>
|
||||
<u-upload @update="update" v-model="imgs"/>
|
||||
</el-card>
|
||||
<el-card style="margin-bottom: 10px">
|
||||
<template #header>
|
||||
<span>按钮上传</span>
|
||||
</template>
|
||||
<div class="demo-image__preview">
|
||||
<div
|
||||
class="upload-list"
|
||||
v-for="item,index in fileList">
|
||||
<el-image
|
||||
@click.stop="privew(index)"
|
||||
style="width: 100%; height: 100%"
|
||||
:src="item"
|
||||
:preview-src-list="fileList"
|
||||
:initial-index="initialIndex"
|
||||
fit="cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<el-upload action="/" multiple :before-upload="beforeUploadAction">
|
||||
<el-button type="primary">点击上传</el-button>
|
||||
</el-upload>
|
||||
</el-card>
|
||||
<el-card>
|
||||
<template #header>
|
||||
<span>多图片上传</span>
|
||||
</template>
|
||||
<u-upload @update="update" v-model="imgs"/>
|
||||
</el-card>
|
||||
|
||||
<el-card>
|
||||
<template #header>
|
||||
<span>拖拽上传</span>
|
||||
</template>
|
||||
<div
|
||||
class="upload-list"
|
||||
v-for="item,index in fileList1">
|
||||
<el-image
|
||||
@click.stop="privew1(index)"
|
||||
style="width: 100%; height: 100%"
|
||||
:src="item"
|
||||
:preview-src-list="fileList1"
|
||||
:initial-index="initialIndex1"
|
||||
fit="cover"
|
||||
/>
|
||||
</div>
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
drag
|
||||
:before-upload="beforeUploadAction1"
|
||||
action="/"
|
||||
multiple
|
||||
>
|
||||
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
||||
<div class="el-upload__text">
|
||||
拖拽上传 <em>或者点击上传</em>
|
||||
</div>
|
||||
</el-upload>
|
||||
</el-card>
|
||||
<el-card>
|
||||
<template #header>
|
||||
<span>拖拽上传</span>
|
||||
</template>
|
||||
<div
|
||||
class="upload-list"
|
||||
v-for="item,index in fileList1">
|
||||
<el-image
|
||||
@click.stop="privew1(index)"
|
||||
style="width: 100%; height: 100%"
|
||||
:src="item"
|
||||
:preview-src-list="fileList1"
|
||||
:initial-index="initialIndex1"
|
||||
fit="cover"
|
||||
/>
|
||||
</div>
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
drag
|
||||
:before-upload="beforeUploadAction1"
|
||||
action="/"
|
||||
multiple
|
||||
>
|
||||
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
||||
<div class="el-upload__text">
|
||||
拖拽上传 <em>或者点击上传</em>
|
||||
</div>
|
||||
</el-upload>
|
||||
</el-card>
|
||||
|
||||
</div>
|
||||
</u-container-layout>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
|
||||
<template>
|
||||
<div class="m-error-page">
|
||||
<u-container-layout class="m-error-page">
|
||||
<div class="error-page">
|
||||
<div class="img">
|
||||
<img :src="fourPng" style="width: 100%">
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
<el-button type="primary" @click="goBackHome">返回首页</el-button></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</u-container-layout>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
@ -67,4 +67,4 @@
|
|||
animation-fill-mode: forwards;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
|
||||
<template>
|
||||
<div class="m-error-page">
|
||||
<u-container-layout class="m-error-page">
|
||||
<div class="error-page">
|
||||
<div class="img">
|
||||
<img :src="fourPng" style="width: 100%">
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
<el-button type="primary" @click="goBackHome">返回首页</el-button></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</u-container-layout>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
@ -68,4 +68,4 @@
|
|||
animation-fill-mode: forwards;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<u-container-layout>
|
||||
<div style="margin-bottom: 15px;display: flex;align-items: center">
|
||||
<el-input v-model="input" placeholder="请输入文件名" style="width: 200px;margin-right: 10px"/>
|
||||
<div>
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
<el-table-column :prop="item.name" :label="item.label" :width="item.width" />
|
||||
</template>
|
||||
</el-table>
|
||||
</div>
|
||||
</u-container-layout>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
|
||||
<template>
|
||||
<div>
|
||||
<u-container-layout>
|
||||
<div style="margin-bottom: 15px">
|
||||
<el-input v-model="input" placeholder="请输入文件名" style="width: 200px;margin-right: 10px"/>
|
||||
<el-button @click="exportExcelAction" type="primary">
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
<el-table-column :prop="item.name" :label="item.label" :width="item.width" v-else/>
|
||||
</template>
|
||||
</el-table>
|
||||
</div>
|
||||
</u-container-layout>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<u-container-layout>
|
||||
<div style="margin-bottom: 15px;display: flex;align-items: center">
|
||||
<el-input v-model="input" placeholder="请输入文件名" style="width: 200px;margin-right: 10px"/>
|
||||
<el-button @click="exportExcelAction" type="primary">
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
<el-table-column :prop="item.name" :label="item.label" :width="item.width" />
|
||||
</template>
|
||||
</el-table>
|
||||
</div>
|
||||
</u-container-layout>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="m-upload-excel">
|
||||
<u-container-layout class="m-upload-excel">
|
||||
<el-upload
|
||||
style="width: 100%"
|
||||
class="upload-demo"
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</u-container-layout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
|
|||
|
|
@ -1,115 +1,118 @@
|
|||
|
||||
<template>
|
||||
<div style="width: 100%;">
|
||||
<el-row class="row-bg" :gutter="10">
|
||||
<el-col :xs="24" :sm="12" :lg="8">
|
||||
<el-card class="box-card" style="height: 100%">
|
||||
<div class="personal">
|
||||
<u-container-layout>
|
||||
<div>
|
||||
<el-row class="row-bg" :gutter="10">
|
||||
<el-col :xs="24" :sm="12" :lg="8">
|
||||
<el-card class="box-card" style="height: 100%">
|
||||
<div class="personal">
|
||||
<div>
|
||||
<el-avatar :size="50" :src="circleUrl" />
|
||||
</div>
|
||||
<div class="name"></div>
|
||||
<div class="description"></div>
|
||||
<div class="list">
|
||||
<div>昵称：小狼</div>
|
||||
<div>职业：前端</div>
|
||||
<div>公司：小公司</div>
|
||||
<div>年龄：~~</div>
|
||||
<div>性别：男</div>
|
||||
<div>现住址：中国-浙江-杭州</div>
|
||||
<div>邮箱：1135957121@qq.com</div>
|
||||
<div>技术栈：JavaScript、HTML、CSS、Vue、Node、React</div>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<div style="margin-bottom: 15px"><h5>个性标签</h5></div>
|
||||
<div>
|
||||
<el-tag style="margin-right: 10px">怕麻烦</el-tag>
|
||||
<el-tag style="margin-right: 10px">健身运动</el-tag>
|
||||
<el-tag style="margin-right: 10px">睡觉</el-tag>
|
||||
<el-tag style="margin-right: 10px">漫威</el-tag>
|
||||
<el-tag>向往</el-tag>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<div style="margin-bottom: 15px"><h5>最喜欢的一句话</h5></div>
|
||||
<div>---------- 开心最重要</div>
|
||||
<el-divider></el-divider>
|
||||
<div style="margin-bottom: 15px"><h5>如果对你有帮助的话，可以麻烦点一颗 star! 你的鼓励是我继续优化的动力~~</h5></div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="16">
|
||||
<el-row class="custom" :gutter="10" >
|
||||
<el-col :xs="24" :sm="12" :lg="8">
|
||||
<el-card style="margin-bottom: 10px">
|
||||
<div class="grid-content">
|
||||
<div class="left"><el-icon style="font-size: 24px;color: white"><user /></el-icon></div>
|
||||
<div class="right">
|
||||
<h2 style="color: #2d8cf0"><count-to :start-val="0" :end-val="5268" :duration="2000"
|
||||
:autoplay="true" ></count-to></h2>
|
||||
<div>用户访问量
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="8">
|
||||
<el-card style="margin-bottom: 10px">
|
||||
<div class="grid-content" >
|
||||
<div class="left" style="background: #64d572"><el-icon style="font-size: 24px;color: white"><user /></el-icon></div>
|
||||
<div class="right">
|
||||
<h2 style="color: #64d572"><count-to :start-val="0" :end-val="9599" :duration="2000"
|
||||
:autoplay="true" ></count-to></h2>
|
||||
<div>系统消息
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="8">
|
||||
<el-card style="margin-bottom: 10px">
|
||||
<div class="grid-content" >
|
||||
<div class="left" style="background: #f25e43"><el-icon style="font-size: 24px;color: white"><user /></el-icon></div>
|
||||
<div class="right">
|
||||
<h2 style="color: #f25e43"><count-to :start-val="0" :end-val="595453" :duration="2000"
|
||||
:autoplay="true" ></count-to></h2>
|
||||
<div>数量
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>系列开源产品</span>
|
||||
</div>
|
||||
</template>
|
||||
<div style="display: flex">
|
||||
<el-card style="flex: 1;margin-right: 20px;cursor: pointer" class="card-item" @click="goTo('https://ext.dcloud.net.cn/plugin?id=7511')">
|
||||
<div style="color: white;margin-bottom: 10px"><h3>zb-table</h3></div>
|
||||
<div style="font-size: 12px;color: white">uniapp 表格组件 支持固定表头和首列、上拉加载更多、及固定多列，表格自适应内容，排序，多选checkbox、可点击删除，编辑、合计功能，兼容多端</div>
|
||||
</el-card>
|
||||
<el-card style="flex: 1;cursor: pointer" class="card-item" @click="goTo('https://github.com/zouzhibin/vue-admin-perfect')">
|
||||
<div style="color: white;margin-bottom: 10px"><h3>vue-admin-perfect</h3></div>
|
||||
<div style="font-size: 12px;color: white">系统基于vue3+vuex+ element-plus+ts后台管理系统</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>每周用户活跃量</span>
|
||||
</div>
|
||||
</template>
|
||||
<div>
|
||||
<el-avatar :size="50" :src="circleUrl" />
|
||||
<bar-charts height="300px" width="100%" id="bar1"></bar-charts>
|
||||
</div>
|
||||
<div class="name"></div>
|
||||
<div class="description"></div>
|
||||
<div class="list">
|
||||
<div>昵称：小狼</div>
|
||||
<div>职业：前端</div>
|
||||
<div>公司：小公司</div>
|
||||
<div>年龄：~~</div>
|
||||
<div>性别：男</div>
|
||||
<div>现住址：中国-浙江-杭州</div>
|
||||
<div>邮箱：1135957121@qq.com</div>
|
||||
<div>技术栈：JavaScript、HTML、CSS、Vue、Node、React</div>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<div style="margin-bottom: 15px"><h5>个性标签</h5></div>
|
||||
<div>
|
||||
<el-tag style="margin-right: 10px">怕麻烦</el-tag>
|
||||
<el-tag style="margin-right: 10px">健身运动</el-tag>
|
||||
<el-tag style="margin-right: 10px">睡觉</el-tag>
|
||||
<el-tag style="margin-right: 10px">漫威</el-tag>
|
||||
<el-tag>向往</el-tag>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<div style="margin-bottom: 15px"><h5>最喜欢的一句话</h5></div>
|
||||
<div>---------- 开心最重要</div>
|
||||
<el-divider></el-divider>
|
||||
<div style="margin-bottom: 15px"><h5>如果对你有帮助的话，可以麻烦点一颗 star! 你的鼓励是我继续优化的动力~~</h5></div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="16">
|
||||
<el-row class="custom" :gutter="10" >
|
||||
<el-col :xs="24" :sm="12" :lg="8">
|
||||
<el-card style="margin-bottom: 10px">
|
||||
<div class="grid-content">
|
||||
<div class="left"><el-icon style="font-size: 24px;color: white"><user /></el-icon></div>
|
||||
<div class="right">
|
||||
<h2 style="color: #2d8cf0"><count-to :start-val="0" :end-val="5268" :duration="2000"
|
||||
:autoplay="true" ></count-to></h2>
|
||||
<div>用户访问量
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="8">
|
||||
<el-card style="margin-bottom: 10px">
|
||||
<div class="grid-content" >
|
||||
<div class="left" style="background: #64d572"><el-icon style="font-size: 24px;color: white"><user /></el-icon></div>
|
||||
<div class="right">
|
||||
<h2 style="color: #64d572"><count-to :start-val="0" :end-val="9599" :duration="2000"
|
||||
:autoplay="true" ></count-to></h2>
|
||||
<div>系统消息
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="8">
|
||||
<el-card style="margin-bottom: 10px">
|
||||
<div class="grid-content" >
|
||||
<div class="left" style="background: #f25e43"><el-icon style="font-size: 24px;color: white"><user /></el-icon></div>
|
||||
<div class="right">
|
||||
<h2 style="color: #f25e43"><count-to :start-val="0" :end-val="595453" :duration="2000"
|
||||
:autoplay="true" ></count-to></h2>
|
||||
<div>数量
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>系列开源产品</span>
|
||||
</div>
|
||||
</template>
|
||||
<div style="display: flex">
|
||||
<el-card style="flex: 1;margin-right: 20px;cursor: pointer" class="card-item" @click="goTo('https://ext.dcloud.net.cn/plugin?id=7511')">
|
||||
<div style="color: white;margin-bottom: 10px"><h3>zb-table</h3></div>
|
||||
<div style="font-size: 12px;color: white">uniapp 表格组件 支持固定表头和首列、上拉加载更多、及固定多列，表格自适应内容，排序，多选checkbox、可点击删除，编辑、合计功能，兼容多端</div>
|
||||
</el-card>
|
||||
<el-card style="flex: 1;cursor: pointer" class="card-item" @click="goTo('https://github.com/zouzhibin/vue-admin-perfect')">
|
||||
<div style="color: white;margin-bottom: 10px"><h3>vue-admin-perfect</h3></div>
|
||||
<div style="font-size: 12px;color: white">系统基于vue3+vuex+ element-plus+ts后台管理系统</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>每周用户活跃量</span>
|
||||
</div>
|
||||
</template>
|
||||
<div>
|
||||
<bar-charts height="300px" width="100%" id="bar1"></bar-charts>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-card>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</u-container-layout>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
|
|
@ -140,6 +143,7 @@
|
|||
margin-top: 18px;
|
||||
line-height: 30px;
|
||||
text-align: left;
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
.card-header {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="components-container">
|
||||
<u-container-layout class="components-container">
|
||||
<count-to ref="example" class="example" :start-val="options.startValInput" :end-val="options.endValInput" :duration="options.durationInput" :decimals="options.decimals"
|
||||
:prefix="options.prefix" :suffix="options.suffix" :autoplay="true" :separator="options.separator"></count-to>
|
||||
<div style="margin-top: 40px;">
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
<el-button type="primary" @click="start">开始</el-button>
|
||||
<el-button type="danger" @click="pauseResume">暂停/恢复</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</u-container-layout>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="m-cropper">
|
||||
<u-container-layout class="m-cropper">
|
||||
<div class="left">
|
||||
<div class="cropper-content">
|
||||
<vue-cropper
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
<img :src="option.cropImg" style="width: 100%;height: 100%" v-if="option.cropImg"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</u-container-layout>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
|
|||
|
|
@ -1,36 +1,39 @@
|
|||
<template>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="dynamicValidateForm"
|
||||
label-width="80px"
|
||||
class="demo-dynamic"
|
||||
>
|
||||
<el-form-item
|
||||
prop="title"
|
||||
label="标题"
|
||||
:rules="[
|
||||
<u-container-layout>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="dynamicValidateForm"
|
||||
label-width="80px"
|
||||
class="demo-dynamic"
|
||||
>
|
||||
<el-form-item
|
||||
prop="title"
|
||||
label="标题"
|
||||
:rules="[
|
||||
{ required: true, message: '请输入标题', trigger: 'blur', },
|
||||
|
||||
]"
|
||||
>
|
||||
<el-input v-model="dynamicValidateForm.title" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
prop="content"
|
||||
label="标题"
|
||||
:rules="[
|
||||
>
|
||||
<el-input v-model="dynamicValidateForm.title" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
prop="content"
|
||||
label="标题"
|
||||
:rules="[
|
||||
{ required: true, message: '请输入内容', trigger: 'blur', },
|
||||
|
||||
]"
|
||||
>
|
||||
<u-wang-edior v-model="dynamicValidateForm.content"/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm(formRef)">保存</el-button>
|
||||
<!-- <el-button @click="preview">预览</el-button>-->
|
||||
<el-button @click="resetForm(formRef)">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
>
|
||||
<u-wang-edior v-model="dynamicValidateForm.content"/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm(formRef)">保存</el-button>
|
||||
<!-- <el-button @click="preview">预览</el-button>-->
|
||||
<el-button @click="resetForm(formRef)">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</u-container-layout>
|
||||
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
|
||||
<template>
|
||||
<div class="row">
|
||||
<u-container-layout class="row">
|
||||
<div style="margin-bottom: 10px">卡片拖拽排序</div>
|
||||
<el-button class="btn " @click="sorter" type="primary" style="margin-bottom: 20px">
|
||||
还原
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
</draggable>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</u-container-layout>
|
||||
</template>
|
||||
<!--<li class="list-group-item" :style="{backgroundColor:`${element.color}` }">-->
|
||||
<!-- <i-->
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="mark-down">
|
||||
<u-container-layout class="mark-down">
|
||||
<el-alert
|
||||
title="Markdown 是基于 md-editor-v3"
|
||||
type="success"
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
<div style="margin-top: 20px;flex-shrink: 0">
|
||||
<el-button type="primary" @click="submit">提交</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</u-container-layout>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
// https://imzbf.github.io/md-editor-v3/index
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<u-container-layout>
|
||||
<div>
|
||||
<el-button type="primary" @click="print(1)">打印图片</el-button>
|
||||
<el-button type="primary" @click="print(2)">打印表格</el-button>
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
<el-table-column prop="address" label="地址" />
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</u-container-layout>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
|
||||
<template>
|
||||
<div>
|
||||
<u-container-layout>
|
||||
<el-input v-model="inputData" placeholder="请输入" style="width:400px;max-width:100%;" />
|
||||
<el-button type="primary" @click="handleQrcode(1)">
|
||||
<el-icon style="margin-right: 6px"><collection /></el-icon> 生成二维码
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
<div>
|
||||
<vue-qr :logoSrc="src" :text="inputData" :size="200"></vue-qr>
|
||||
</div>
|
||||
</div>
|
||||
</u-container-layout>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import {ref} from 'vue'
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<div style="min-height: 300px">
|
||||
<u-container-layout style="min-height: 300px">
|
||||
<el-button @contextmenu.prevent="rightClick">右键菜单</el-button>
|
||||
<u-right-click-menu :left="clientX" :top="clientY" @ok="operatingRightAction" :data="data"/>
|
||||
</div>
|
||||
</u-container-layout>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<u-container-layout>
|
||||
<splitpanes style="height: 800px">
|
||||
<pane min-size="20" class="left">1</pane>
|
||||
<pane>
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
</pane>
|
||||
<pane class="item4">5</pane>
|
||||
</splitpanes>
|
||||
</div>
|
||||
</u-container-layout>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="m-permission-page">
|
||||
<u-container-layout class="m-permission-page">
|
||||
<div style="margin-bottom: 20px">
|
||||
权限列表{{store.getters.roles}}
|
||||
</div>
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
<el-radio-button label="other" />
|
||||
<el-radio-button label="admin" />
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</u-container-layout>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
|
|||
|
|
@ -1,76 +1,79 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<comprehensive-table
|
||||
:loading="loading"
|
||||
@selection-change="selectionChange"
|
||||
:columns="column" :data="list" @reset="reset" @onSubmit="onSubmit">
|
||||
<template v-slot:btn>
|
||||
<div style="display: flex;justify-content: flex-end">
|
||||
<el-button type="primary" @click="add"><el-icon><plus /></el-icon> 添加</el-button>
|
||||
<el-button type="danger" @click="batchDelete"><el-icon><delete /></el-icon>删除</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:sex="scope">{{scope.row.sex?'男':'女'}}</template>
|
||||
<template v-slot:operation="scope">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
icon="Edit"
|
||||
@click="edit(scope.row)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
@click="del(scope.row)"
|
||||
type="danger"
|
||||
size="small"
|
||||
icon="Delete"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</comprehensive-table>
|
||||
<u-container-layout>
|
||||
<div class="app-container">
|
||||
<comprehensive-table
|
||||
:loading="loading"
|
||||
@selection-change="selectionChange"
|
||||
:columns="column" :data="list" @reset="reset" @onSubmit="onSubmit">
|
||||
<template v-slot:btn>
|
||||
<div style="display: flex;justify-content: flex-end">
|
||||
<el-button type="primary" @click="add"><el-icon><plus /></el-icon> 添加</el-button>
|
||||
<el-button type="danger" @click="batchDelete"><el-icon><delete /></el-icon>删除</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:sex="scope">{{scope.row.sex?'男':'女'}}</template>
|
||||
<template v-slot:operation="scope">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
icon="Edit"
|
||||
@click="edit(scope.row)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
@click="del(scope.row)"
|
||||
type="danger"
|
||||
size="small"
|
||||
icon="Delete"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</comprehensive-table>
|
||||
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
:title="title"
|
||||
width="50%"
|
||||
>
|
||||
<el-form
|
||||
ref="ruleFormRef"
|
||||
:model="ruleForm"
|
||||
:rules="rules"
|
||||
label-width="120px"
|
||||
class="demo-ruleForm"
|
||||
:size="formSize"
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
:title="title"
|
||||
width="50%"
|
||||
>
|
||||
<el-form-item label="活动名称" prop="name">
|
||||
<el-input v-model="ruleForm.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="性别" prop="sex">
|
||||
<el-radio-group v-model="ruleForm.sex">
|
||||
<el-radio :label="1" >男</el-radio>
|
||||
<el-radio :label="0" >女</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="价格" prop="price">
|
||||
<el-input v-model="ruleForm.price" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-form
|
||||
ref="ruleFormRef"
|
||||
:model="ruleForm"
|
||||
:rules="rules"
|
||||
label-width="120px"
|
||||
class="demo-ruleForm"
|
||||
:size="formSize"
|
||||
>
|
||||
<el-form-item label="活动名称" prop="name">
|
||||
<el-input v-model="ruleForm.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="性别" prop="sex">
|
||||
<el-radio-group v-model="ruleForm.sex">
|
||||
<el-radio :label="1" >男</el-radio>
|
||||
<el-radio :label="0" >女</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="价格" prop="price">
|
||||
<el-input v-model="ruleForm.price" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleClose(ruleFormRef)"
|
||||
>确定</el-button
|
||||
>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</u-container-layout>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import {ref, reactive, onMounted} from "vue";
|
||||
import {ref, reactive, onMounted} from "vue";
|
||||
import * as dayjs from 'dayjs'
|
||||
import { ElMessage,ElMessageBox } from 'element-plus'
|
||||
import type { FormInstance } from 'element-plus'
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<template>
|
||||
<u-container-layout>
|
||||
<div>
|
||||
<div style="display: flex;justify-content: flex-end">
|
||||
<el-radio-group v-model="radio">
|
||||
|
|
@ -24,6 +25,8 @@
|
|||
<el-button type="primary" @click="config">提交</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</u-container-layout>
|
||||
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
|
|||
|
|
@ -1,90 +1,93 @@
|
|||
<template>
|
||||
<div class="inline-edit-table">
|
||||
<el-form :inline="true" :model="formInline1" class="demo-form-inline">
|
||||
<el-form-item label="姓名">
|
||||
<el-input v-model="formInline1.username" placeholder="请输入姓名" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">搜索</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table :data="list" style="width: 100%" :border="true" v-loading="loading">
|
||||
<el-table-column prop="id" width="60" label="id"/>
|
||||
<el-table-column prop="name" label="姓名" min-width="200px">
|
||||
<template #default="scope">
|
||||
<template v-if="scope.row.edit">
|
||||
<div style="display: flex;align-items: center;">
|
||||
<el-input v-model="scope.row.name" size="small" />
|
||||
<el-button
|
||||
size="small"
|
||||
icon="Refresh"
|
||||
type="warning"
|
||||
@click="cancelEdit(scope.row)"
|
||||
>
|
||||
取消
|
||||
</el-button>
|
||||
</div>
|
||||
<u-container-layout>
|
||||
<div class="inline-edit-table">
|
||||
<el-form :inline="true" :model="formInline1" class="demo-form-inline">
|
||||
<el-form-item label="姓名">
|
||||
<el-input v-model="formInline1.username" placeholder="请输入姓名" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">搜索</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table :data="list" style="width: 100%" :border="true" v-loading="loading">
|
||||
<el-table-column prop="id" width="60" label="id"/>
|
||||
<el-table-column prop="name" label="姓名" min-width="200px">
|
||||
<template #default="scope">
|
||||
<template v-if="scope.row.edit">
|
||||
<div style="display: flex;align-items: center;">
|
||||
<el-input v-model="scope.row.name" size="small" />
|
||||
<el-button
|
||||
size="small"
|
||||
icon="Refresh"
|
||||
type="warning"
|
||||
@click="cancelEdit(scope.row)"
|
||||
>
|
||||
取消
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>{{scope.row.name}}</template>
|
||||
</template>
|
||||
<template v-else>{{scope.row.name}}</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="age" label="年龄" />
|
||||
<el-table-column prop="sex" label="性别" >
|
||||
<template #default="scope">
|
||||
{{scope.row.sex?'男':'女'}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="price" label="价格" />
|
||||
<el-table-column prop="admin" label="账号" />
|
||||
<el-table-column prop="address" label="地址" />
|
||||
<el-table-column prop="date" label="日期" />
|
||||
<el-table-column prop="province" label="省份" />
|
||||
<el-table-column prop="city" label="城市" />
|
||||
<el-table-column prop="operator" label="操作" width="180px" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
v-if="scope.row.edit"
|
||||
type="success"
|
||||
size="small"
|
||||
icon="CircleCheckFilled"
|
||||
@click="confirmEdit(scope.row)"
|
||||
>
|
||||
保存
|
||||
</el-button>
|
||||
<el-button
|
||||
v-else
|
||||
type="primary"
|
||||
size="small"
|
||||
icon="Edit"
|
||||
@click="scope.row.edit=!scope.row.edit"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
</el-table-column>
|
||||
<el-table-column prop="age" label="年龄" />
|
||||
<el-table-column prop="sex" label="性别" >
|
||||
<template #default="scope">
|
||||
{{scope.row.sex?'男':'女'}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="price" label="价格" />
|
||||
<el-table-column prop="admin" label="账号" />
|
||||
<el-table-column prop="address" label="地址" />
|
||||
<el-table-column prop="date" label="日期" />
|
||||
<el-table-column prop="province" label="省份" />
|
||||
<el-table-column prop="city" label="城市" />
|
||||
<el-table-column prop="operator" label="操作" width="180px" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
v-if="scope.row.edit"
|
||||
type="success"
|
||||
size="small"
|
||||
icon="CircleCheckFilled"
|
||||
@click="confirmEdit(scope.row)"
|
||||
>
|
||||
保存
|
||||
</el-button>
|
||||
<el-button
|
||||
v-else
|
||||
type="primary"
|
||||
size="small"
|
||||
icon="Edit"
|
||||
@click="scope.row.edit=!scope.row.edit"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
|
||||
<el-button
|
||||
type="danger"
|
||||
size="small"
|
||||
icon="Delete"
|
||||
@click="deleteAction(scope.row)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="small"
|
||||
icon="Delete"
|
||||
@click="deleteAction(scope.row)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div style="width: 100%;display: flex;justify-content: center;padding-top: 20px">
|
||||
<el-pagination
|
||||
v-model:currentPage="currentPage1"
|
||||
:page-size="10"
|
||||
background
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="transData.length"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div style="width: 100%;display: flex;justify-content: center;padding-top: 20px">
|
||||
<el-pagination
|
||||
v-model:currentPage="currentPage1"
|
||||
:page-size="10"
|
||||
background
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="transData.length"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</u-container-layout>
|
||||
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup >
|
||||
|
|
|
|||
|
|
@ -1,19 +1,22 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-table :data="list" style="width: 100%">
|
||||
<el-table-column prop="date" label="Date" width="150" />
|
||||
<el-table-column label="Delivery Info">
|
||||
<el-table-column prop="name" label="Name" width="120" />
|
||||
<el-table-column label="Address Info">
|
||||
<el-table-column prop="state" label="State" width="120" />
|
||||
<el-table-column prop="city" label="City" width="120" />
|
||||
<el-table-column prop="address" label="Address" />
|
||||
<el-table-column prop="zip" label="Zip" width="120" />
|
||||
<u-container-layout>
|
||||
<div class="app-container">
|
||||
<el-table :data="list" style="width: 100%">
|
||||
<el-table-column prop="date" label="Date" width="150" />
|
||||
<el-table-column label="Delivery Info">
|
||||
<el-table-column prop="name" label="Name" width="120" />
|
||||
<el-table-column label="Address Info">
|
||||
<el-table-column prop="state" label="State" width="120" />
|
||||
<el-table-column prop="city" label="City" width="120" />
|
||||
<el-table-column prop="address" label="Address" />
|
||||
<el-table-column prop="zip" label="Zip" width="120" />
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-table>
|
||||
|
||||
</div>
|
||||
</u-container-layout>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import {ref} from "vue";
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<u-container-layout>
|
||||
<div style="margin-bottom: 15px;display: flex;align-items: center">
|
||||
<el-input v-model="input" placeholder="请输入文件名" style="width: 200px;margin-right: 10px"/>
|
||||
<el-button @click="exportExcelAction" type="primary">
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
<el-table-column :prop="item.name" :label="item.label" :width="item.width" />
|
||||
</template>
|
||||
</el-table>
|
||||
</div>
|
||||
</u-container-layout>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
|
|||
Loading…
Reference in New Issue