初始化项目
This commit is contained in:
38
src/views/fun/clipboard/index.vue
Normal file
38
src/views/fun/clipboard/index.vue
Normal file
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<el-card shadow="hover" header="复制剪切演示">
|
||||
<el-alert
|
||||
title="感谢优秀的 `vue-clipboard3`，项目地址：https://github.com/JamieCurnow/vue-clipboard3`"
|
||||
type="success"
|
||||
:closable="false"
|
||||
class="mb15"
|
||||
></el-alert>
|
||||
<el-input placeholder="请输入内容" v-model="copyVal">
|
||||
<template #append>
|
||||
<el-button @click="copyText(copyVal)">复制链接</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
<el-input placeholder="先点击上方 `复制链接` 按钮，然后 `Ctrl + V` 进行粘贴！ " v-model="shearVal" class="mt15"> </el-input>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { reactive, toRefs, onMounted, defineComponent } from 'vue';
|
||||
import commonFunction from '/@/utils/commonFunction';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'funClipboard',
|
||||
setup() {
|
||||
const { copyText } = commonFunction();
|
||||
const state = reactive({
|
||||
copyVal: 'https://gitee.com/lyt-top/vue-next-admin',
|
||||
shearVal: '',
|
||||
});
|
||||
// 页面加载时
|
||||
onMounted(() => {});
|
||||
return {
|
||||
copyText,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
58
src/views/fun/codemirror/index.vue
Normal file
58
src/views/fun/codemirror/index.vue
Normal file
@@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<codemirror
|
||||
v-model="code"
|
||||
placeholder="Code goes here..."
|
||||
:style="{ height: '400px' }"
|
||||
:autofocus="true"
|
||||
:indent-with-tab="true"
|
||||
:tab-size="2"
|
||||
:extensions="extensions"
|
||||
@ready="handleReady"
|
||||
@change="log('change', $event)"
|
||||
@focus="log('focus', $event)"
|
||||
@blur="log('blur', $event)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent,ref,shallowRef } from 'vue'
|
||||
import { Codemirror } from 'vue-codemirror'
|
||||
import { javascript } from '@codemirror/lang-javascript'
|
||||
import { oneDark } from '@codemirror/theme-one-dark'
|
||||
|
||||
export default defineComponent({
|
||||
name:"demoCodeMirror",
|
||||
components: {
|
||||
Codemirror
|
||||
},
|
||||
setup() {
|
||||
const code = ref(`console.log('Hello, world!')`)
|
||||
const extensions = [javascript(), oneDark]
|
||||
|
||||
// Codemirror EditorView instance ref
|
||||
const view = shallowRef()
|
||||
const handleReady = (payload) => {
|
||||
view.value = payload.view
|
||||
}
|
||||
|
||||
// Status is available at all times via Codemirror EditorView
|
||||
const getCodemirrorStates = () => {
|
||||
const state = view.value.state
|
||||
const ranges = state.selection.ranges
|
||||
const selected = ranges.reduce((r, range) => r + range.to - range.from, 0)
|
||||
const cursor = ranges[0].anchor
|
||||
const length = state.doc.length
|
||||
const lines = state.doc.lines
|
||||
// more state info ...
|
||||
// return ...
|
||||
}
|
||||
|
||||
return {
|
||||
code,
|
||||
extensions,
|
||||
handleReady,
|
||||
log: console.log
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
159
src/views/fun/countup/index.vue
Normal file
159
src/views/fun/countup/index.vue
Normal file
@@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card shadow="hover" header="数字滚动演示">
|
||||
<el-alert
|
||||
title="感谢优秀的 `countup.js`，项目地址：https://github.com/inorganik/countUp.js"
|
||||
type="success"
|
||||
:closable="false"
|
||||
class="mb15"
|
||||
></el-alert>
|
||||
<el-row :gutter="20">
|
||||
<el-col :sm="6" class="mb15" v-for="(v, k) in topCardItemList" :key="k">
|
||||
<div class="countup-card-item countup-card-item-box" :style="{ background: `var(${v.color})` }">
|
||||
<div class="countup-card-item-flex" ref="topCardItemRefs">
|
||||
<div class="countup-card-item-title pb3">{{ v.title }}</div>
|
||||
<div class="countup-card-item-title-num pb6"></div>
|
||||
<div class="countup-card-item-tip pb3">{{ v.tip }}</div>
|
||||
<div class="countup-card-item-tip-num"></div>
|
||||
</div>
|
||||
<i :class="v.icon" :style="{ color: v.iconColor }"></i>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="flex-warp">
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="primary" size="default" @click="refreshCurrent">
|
||||
<el-icon>
|
||||
<ele-RefreshRight />
|
||||
</el-icon>
|
||||
重置/刷新数值
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { reactive, toRefs, onMounted, nextTick, defineComponent } from 'vue';
|
||||
import { CountUp } from 'countup.js';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'funCountup',
|
||||
setup() {
|
||||
const state = reactive({
|
||||
topCardItemRefs: null as any,
|
||||
topCardItemList: [
|
||||
{
|
||||
title: '今日访问人数',
|
||||
titleNum: '123',
|
||||
tip: '在场人数',
|
||||
tipNum: '911',
|
||||
color: '--el-color-primary',
|
||||
iconColor: '#ffcb47',
|
||||
icon: 'iconfont icon-jinridaiban',
|
||||
},
|
||||
{
|
||||
title: '实验室总数',
|
||||
titleNum: '123',
|
||||
tip: '使用中',
|
||||
tipNum: '611',
|
||||
color: '--el-color-success',
|
||||
iconColor: '#70cf41',
|
||||
icon: 'iconfont icon-AIshiyanshi',
|
||||
},
|
||||
{
|
||||
title: '申请人数（月）',
|
||||
titleNum: '123',
|
||||
tip: '通过人数',
|
||||
tipNum: '911',
|
||||
color: '--el-color-warning',
|
||||
iconColor: '#dfae64',
|
||||
icon: 'iconfont icon-shenqingkaiban',
|
||||
},
|
||||
{
|
||||
title: '销售情况',
|
||||
titleNum: '123',
|
||||
tip: '销售数',
|
||||
tipNum: '911',
|
||||
color: '--el-color-danger',
|
||||
iconColor: '#e56565',
|
||||
icon: 'iconfont icon-ditu',
|
||||
},
|
||||
],
|
||||
});
|
||||
// 初始化数字滚动
|
||||
const initNumCountUp = () => {
|
||||
nextTick(() => {
|
||||
state.topCardItemRefs.forEach((v: HTMLDivElement) => {
|
||||
new CountUp(v.querySelector('.countup-card-item-title-num') as HTMLDivElement, Math.random() * 10000).start();
|
||||
new CountUp(v.querySelector('.countup-card-item-tip-num') as HTMLDivElement, Math.random() * 1000).start();
|
||||
});
|
||||
});
|
||||
};
|
||||
// 重置/刷新数值
|
||||
const refreshCurrent = () => {
|
||||
initNumCountUp();
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initNumCountUp();
|
||||
});
|
||||
return {
|
||||
refreshCurrent,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.countup-card-item {
|
||||
width: 100%;
|
||||
height: 103px;
|
||||
background: var(--el-text-color-secondary);
|
||||
border-radius: 4px;
|
||||
transition: all ease 0.3s;
|
||||
&:hover {
|
||||
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
|
||||
transition: all ease 0.3s;
|
||||
}
|
||||
}
|
||||
.countup-card-item-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
&:hover {
|
||||
i {
|
||||
right: 0px !important;
|
||||
bottom: 0px !important;
|
||||
transition: all ease 0.3s;
|
||||
}
|
||||
}
|
||||
i {
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
bottom: -10px;
|
||||
font-size: 70px;
|
||||
transform: rotate(-30deg);
|
||||
transition: all ease 0.3s;
|
||||
}
|
||||
.countup-card-item-flex {
|
||||
padding: 0 20px;
|
||||
color: var(--el-color-white);
|
||||
.countup-card-item-title,
|
||||
.countup-card-item-tip {
|
||||
font-size: 13px;
|
||||
}
|
||||
.countup-card-item-title-num {
|
||||
font-size: 18px;
|
||||
}
|
||||
.countup-card-item-tip-num {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
63
src/views/fun/cropper/index.vue
Normal file
63
src/views/fun/cropper/index.vue
Normal file
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<div class="croppers-container">
|
||||
<el-card shadow="hover" header="cropper 图片裁剪">
|
||||
<el-alert
|
||||
title="感谢优秀的 `cropperjs`，项目地址：https://github.com/fengyuanchen/cropperjs"
|
||||
type="success"
|
||||
:closable="false"
|
||||
class="mb15"
|
||||
></el-alert>
|
||||
<div class="cropper-img-warp">
|
||||
<div class="mb15 mt15">
|
||||
<img class="cropper-img" :src="cropperImg" />
|
||||
</div>
|
||||
<el-button type="primary" size="default" @click="onCropperDialogOpen">
|
||||
<el-icon>
|
||||
<ele-Crop />
|
||||
</el-icon>
|
||||
更换头像
|
||||
</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
<CropperDialog ref="cropperDialogRef" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { ref, toRefs, reactive, defineComponent } from 'vue';
|
||||
import CropperDialog from '/@/components/cropper/index.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'funCropper',
|
||||
components: { CropperDialog },
|
||||
setup() {
|
||||
const cropperDialogRef = ref();
|
||||
const state = reactive({
|
||||
cropperImg: 'https://yxh-1301841944.cos.ap-chongqing.myqcloud.com/gfast/2022-06-08/timg.jpg',
|
||||
});
|
||||
// 打开裁剪弹窗
|
||||
const onCropperDialogOpen = () => {
|
||||
cropperDialogRef.value.openDialog(state.cropperImg);
|
||||
};
|
||||
return {
|
||||
cropperDialogRef,
|
||||
onCropperDialogOpen,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.croppers-container {
|
||||
.cropper-img-warp {
|
||||
text-align: center;
|
||||
.cropper-img {
|
||||
margin: auto;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
141
src/views/fun/echartsMap/index.vue
Normal file
141
src/views/fun/echartsMap/index.vue
Normal file
@@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<div :style="{ height: `calc(100vh - ${initTagViewHeight}` }">
|
||||
<div class="layout-view-bg-white">
|
||||
<div ref="echartsMap" style="height: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, computed, onMounted, defineComponent } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import 'echarts/extension/bmap/bmap';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
|
||||
import { echartsMapList, echartsMapData } from './mock';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'funEchartsMap',
|
||||
setup() {
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const storesTagsViewRoutes = useTagsViewRoutes();
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
|
||||
const state: any = reactive({
|
||||
echartsMap: null,
|
||||
echartsMapList,
|
||||
echartsMapData,
|
||||
});
|
||||
// 设置主内容的高度
|
||||
const initTagViewHeight = computed(() => {
|
||||
let { isTagsview } = themeConfig.value;
|
||||
if (isTagsViewCurrenFull.value) {
|
||||
return `30px`;
|
||||
} else {
|
||||
if (isTagsview) return `114px`;
|
||||
else return `80px`;
|
||||
}
|
||||
});
|
||||
// echartsMap 将坐标信息和对应物理量的值合在一起
|
||||
const convertData = (data: any) => {
|
||||
let res = [];
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
let geoCoord = state.echartsMapData[data[i].name];
|
||||
if (geoCoord) {
|
||||
res.push({
|
||||
name: data[i].name,
|
||||
value: geoCoord.concat(data[i].value),
|
||||
});
|
||||
}
|
||||
}
|
||||
return res;
|
||||
};
|
||||
// 初始化 echartsMap
|
||||
const initEchartsMap = () => {
|
||||
const myChart = echarts.init(<HTMLElement>state.echartsMap);
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
},
|
||||
color: ['#9a60b4', '#ea7ccc'],
|
||||
bmap: {
|
||||
center: [104.114129, 37.550339],
|
||||
zoom: 5,
|
||||
roam: true,
|
||||
mapStyle: {},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'pm2.5',
|
||||
type: 'scatter',
|
||||
coordinateSystem: 'bmap',
|
||||
data: convertData(state.echartsMapList),
|
||||
symbolSize: function (val: any) {
|
||||
return val[2] / 10;
|
||||
},
|
||||
encode: {
|
||||
value: 2,
|
||||
},
|
||||
label: {
|
||||
formatter: '{b}',
|
||||
position: 'right',
|
||||
show: false,
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Top 5',
|
||||
type: 'effectScatter',
|
||||
coordinateSystem: 'bmap',
|
||||
data: convertData(
|
||||
state.echartsMapList
|
||||
.sort(function (a: any, b: any) {
|
||||
return b.value - a.value;
|
||||
})
|
||||
.slice(0, 6)
|
||||
),
|
||||
symbolSize: function (val: any) {
|
||||
return val[2] / 10;
|
||||
},
|
||||
encode: {
|
||||
value: 2,
|
||||
},
|
||||
showEffectOn: 'render',
|
||||
rippleEffect: {
|
||||
brushType: 'stroke',
|
||||
},
|
||||
hoverAnimation: true,
|
||||
label: {
|
||||
formatter: '{b}',
|
||||
position: 'right',
|
||||
show: true,
|
||||
},
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: '#333',
|
||||
},
|
||||
zlevel: 1,
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.resize();
|
||||
});
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
//initEchartsMap();
|
||||
});
|
||||
return {
|
||||
initTagViewHeight,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
387
src/views/fun/echartsMap/mock.ts
Normal file
387
src/views/fun/echartsMap/mock.ts
Normal file
@@ -0,0 +1,387 @@
|
||||
// 地图模拟数据
|
||||
export const echartsMapList = [
|
||||
{ name: '海门', value: 9 },
|
||||
{ name: '鄂尔多斯', value: 12 },
|
||||
{ name: '招远', value: 12 },
|
||||
{ name: '舟山', value: 12 },
|
||||
{ name: '齐齐哈尔', value: 14 },
|
||||
{ name: '盐城', value: 15 },
|
||||
{ name: '赤峰', value: 16 },
|
||||
{ name: '青岛', value: 18 },
|
||||
{ name: '乳山', value: 18 },
|
||||
{ name: '金昌', value: 19 },
|
||||
{ name: '泉州', value: 21 },
|
||||
{ name: '莱西', value: 21 },
|
||||
{ name: '日照', value: 21 },
|
||||
{ name: '胶南', value: 22 },
|
||||
{ name: '南通', value: 23 },
|
||||
{ name: '拉萨', value: 24 },
|
||||
{ name: '云浮', value: 24 },
|
||||
{ name: '梅州', value: 25 },
|
||||
{ name: '文登', value: 25 },
|
||||
{ name: '上海', value: 25 },
|
||||
{ name: '攀枝花', value: 25 },
|
||||
{ name: '威海', value: 25 },
|
||||
{ name: '承德', value: 25 },
|
||||
{ name: '厦门', value: 26 },
|
||||
{ name: '汕尾', value: 26 },
|
||||
{ name: '潮州', value: 26 },
|
||||
{ name: '丹东', value: 27 },
|
||||
{ name: '太仓', value: 27 },
|
||||
{ name: '曲靖', value: 27 },
|
||||
{ name: '烟台', value: 28 },
|
||||
{ name: '福州', value: 29 },
|
||||
{ name: '瓦房店', value: 30 },
|
||||
{ name: '即墨', value: 30 },
|
||||
{ name: '抚顺', value: 31 },
|
||||
{ name: '玉溪', value: 31 },
|
||||
{ name: '张家口', value: 31 },
|
||||
{ name: '阳泉', value: 31 },
|
||||
{ name: '莱州', value: 32 },
|
||||
{ name: '湖州', value: 32 },
|
||||
{ name: '汕头', value: 32 },
|
||||
{ name: '昆山', value: 33 },
|
||||
{ name: '宁波', value: 33 },
|
||||
{ name: '湛江', value: 33 },
|
||||
{ name: '揭阳', value: 34 },
|
||||
{ name: '荣成', value: 34 },
|
||||
{ name: '连云港', value: 35 },
|
||||
{ name: '葫芦岛', value: 35 },
|
||||
{ name: '常熟', value: 36 },
|
||||
{ name: '东莞', value: 36 },
|
||||
{ name: '河源', value: 36 },
|
||||
{ name: '淮安', value: 36 },
|
||||
{ name: '泰州', value: 36 },
|
||||
{ name: '南宁', value: 37 },
|
||||
{ name: '营口', value: 37 },
|
||||
{ name: '惠州', value: 37 },
|
||||
{ name: '江阴', value: 37 },
|
||||
{ name: '蓬莱', value: 37 },
|
||||
{ name: '韶关', value: 38 },
|
||||
{ name: '嘉峪关', value: 38 },
|
||||
{ name: '广州', value: 38 },
|
||||
{ name: '延安', value: 38 },
|
||||
{ name: '太原', value: 39 },
|
||||
{ name: '清远', value: 39 },
|
||||
{ name: '中山', value: 39 },
|
||||
{ name: '昆明', value: 39 },
|
||||
{ name: '寿光', value: 40 },
|
||||
{ name: '盘锦', value: 40 },
|
||||
{ name: '长治', value: 41 },
|
||||
{ name: '深圳', value: 360 },
|
||||
{ name: '珠海', value: 42 },
|
||||
{ name: '宿迁', value: 43 },
|
||||
{ name: '咸阳', value: 43 },
|
||||
{ name: '铜川', value: 44 },
|
||||
{ name: '平度', value: 44 },
|
||||
{ name: '佛山', value: 44 },
|
||||
{ name: '海口', value: 44 },
|
||||
{ name: '江门', value: 45 },
|
||||
{ name: '章丘', value: 45 },
|
||||
{ name: '肇庆', value: 46 },
|
||||
{ name: '大连', value: 47 },
|
||||
{ name: '临汾', value: 47 },
|
||||
{ name: '吴江', value: 47 },
|
||||
{ name: '石嘴山', value: 49 },
|
||||
{ name: '沈阳', value: 50 },
|
||||
{ name: '苏州', value: 50 },
|
||||
{ name: '茂名', value: 50 },
|
||||
{ name: '嘉兴', value: 51 },
|
||||
{ name: '长春', value: 51 },
|
||||
{ name: '胶州', value: 52 },
|
||||
{ name: '银川', value: 52 },
|
||||
{ name: '张家港', value: 52 },
|
||||
{ name: '三门峡', value: 53 },
|
||||
{ name: '锦州', value: 54 },
|
||||
{ name: '南昌', value: 54 },
|
||||
{ name: '柳州', value: 54 },
|
||||
{ name: '三亚', value: 54 },
|
||||
{ name: '自贡', value: 56 },
|
||||
{ name: '吉林', value: 56 },
|
||||
{ name: '阳江', value: 57 },
|
||||
{ name: '泸州', value: 57 },
|
||||
{ name: '西宁', value: 57 },
|
||||
{ name: '宜宾', value: 58 },
|
||||
{ name: '呼和浩特', value: 58 },
|
||||
{ name: '成都', value: 58 },
|
||||
{ name: '大同', value: 58 },
|
||||
{ name: '镇江', value: 59 },
|
||||
{ name: '桂林', value: 59 },
|
||||
{ name: '张家界', value: 59 },
|
||||
{ name: '宜兴', value: 59 },
|
||||
{ name: '北海', value: 60 },
|
||||
{ name: '西安', value: 61 },
|
||||
{ name: '金坛', value: 62 },
|
||||
{ name: '东营', value: 62 },
|
||||
{ name: '牡丹江', value: 63 },
|
||||
{ name: '遵义', value: 63 },
|
||||
{ name: '绍兴', value: 63 },
|
||||
{ name: '扬州', value: 64 },
|
||||
{ name: '常州', value: 64 },
|
||||
{ name: '潍坊', value: 65 },
|
||||
{ name: '重庆', value: 66 },
|
||||
{ name: '台州', value: 67 },
|
||||
{ name: '南京', value: 67 },
|
||||
{ name: '滨州', value: 70 },
|
||||
{ name: '贵阳', value: 71 },
|
||||
{ name: '无锡', value: 71 },
|
||||
{ name: '本溪', value: 71 },
|
||||
{ name: '克拉玛依', value: 72 },
|
||||
{ name: '渭南', value: 72 },
|
||||
{ name: '马鞍山', value: 72 },
|
||||
{ name: '宝鸡', value: 72 },
|
||||
{ name: '焦作', value: 75 },
|
||||
{ name: '句容', value: 75 },
|
||||
{ name: '北京', value: 79 },
|
||||
{ name: '徐州', value: 79 },
|
||||
{ name: '衡水', value: 80 },
|
||||
{ name: '包头', value: 80 },
|
||||
{ name: '绵阳', value: 80 },
|
||||
{ name: '乌鲁木齐', value: 84 },
|
||||
{ name: '枣庄', value: 84 },
|
||||
{ name: '杭州', value: 84 },
|
||||
{ name: '淄博', value: 85 },
|
||||
{ name: '鞍山', value: 86 },
|
||||
{ name: '溧阳', value: 86 },
|
||||
{ name: '库尔勒', value: 86 },
|
||||
{ name: '安阳', value: 90 },
|
||||
{ name: '开封', value: 90 },
|
||||
{ name: '济南', value: 92 },
|
||||
{ name: '德阳', value: 93 },
|
||||
{ name: '温州', value: 95 },
|
||||
{ name: '九江', value: 96 },
|
||||
{ name: '邯郸', value: 98 },
|
||||
{ name: '临安', value: 99 },
|
||||
{ name: '兰州', value: 99 },
|
||||
{ name: '沧州', value: 100 },
|
||||
{ name: '临沂', value: 103 },
|
||||
{ name: '南充', value: 104 },
|
||||
{ name: '天津', value: 105 },
|
||||
{ name: '富阳', value: 106 },
|
||||
{ name: '泰安', value: 112 },
|
||||
{ name: '诸暨', value: 112 },
|
||||
{ name: '郑州', value: 113 },
|
||||
{ name: '哈尔滨', value: 114 },
|
||||
{ name: '聊城', value: 116 },
|
||||
{ name: '芜湖', value: 117 },
|
||||
{ name: '唐山', value: 119 },
|
||||
{ name: '平顶山', value: 119 },
|
||||
{ name: '邢台', value: 119 },
|
||||
{ name: '德州', value: 120 },
|
||||
{ name: '济宁', value: 120 },
|
||||
{ name: '荆州', value: 127 },
|
||||
{ name: '宜昌', value: 130 },
|
||||
{ name: '义乌', value: 132 },
|
||||
{ name: '丽水', value: 133 },
|
||||
{ name: '洛阳', value: 134 },
|
||||
{ name: '秦皇岛', value: 136 },
|
||||
{ name: '株洲', value: 143 },
|
||||
{ name: '石家庄', value: 147 },
|
||||
{ name: '莱芜', value: 148 },
|
||||
{ name: '常德', value: 152 },
|
||||
{ name: '保定', value: 153 },
|
||||
{ name: '湘潭', value: 154 },
|
||||
{ name: '金华', value: 157 },
|
||||
{ name: '岳阳', value: 169 },
|
||||
{ name: '长沙', value: 175 },
|
||||
{ name: '衢州', value: 177 },
|
||||
{ name: '廊坊', value: 93 },
|
||||
{ name: '菏泽', value: 194 },
|
||||
{ name: '合肥', value: 229 },
|
||||
{ name: '武汉', value: 273 },
|
||||
{ name: '大庆', value: 279 },
|
||||
];
|
||||
|
||||
// 地图经纬度数据
|
||||
export const echartsMapData = {
|
||||
海门: [121.15, 31.89],
|
||||
鄂尔多斯: [109.781327, 39.608266],
|
||||
招远: [120.38, 37.35],
|
||||
舟山: [122.207216, 29.985295],
|
||||
齐齐哈尔: [123.97, 47.33],
|
||||
盐城: [120.13, 33.38],
|
||||
赤峰: [118.87, 42.28],
|
||||
青岛: [120.33, 36.07],
|
||||
乳山: [121.52, 36.89],
|
||||
金昌: [102.188043, 38.520089],
|
||||
泉州: [118.58, 24.93],
|
||||
莱西: [120.53, 36.86],
|
||||
日照: [119.46, 35.42],
|
||||
胶南: [119.97, 35.88],
|
||||
南通: [121.05, 32.08],
|
||||
拉萨: [91.11, 29.97],
|
||||
云浮: [112.02, 22.93],
|
||||
梅州: [116.1, 24.55],
|
||||
文登: [122.05, 37.2],
|
||||
上海: [121.48, 31.22],
|
||||
攀枝花: [101.718637, 26.582347],
|
||||
威海: [122.1, 37.5],
|
||||
承德: [117.93, 40.97],
|
||||
厦门: [118.1, 24.46],
|
||||
汕尾: [115.375279, 22.786211],
|
||||
潮州: [116.63, 23.68],
|
||||
丹东: [124.37, 40.13],
|
||||
太仓: [121.1, 31.45],
|
||||
曲靖: [103.79, 25.51],
|
||||
烟台: [121.39, 37.52],
|
||||
福州: [119.3, 26.08],
|
||||
瓦房店: [121.979603, 39.627114],
|
||||
即墨: [120.45, 36.38],
|
||||
抚顺: [123.97, 41.97],
|
||||
玉溪: [102.52, 24.35],
|
||||
张家口: [114.87, 40.82],
|
||||
阳泉: [113.57, 37.85],
|
||||
莱州: [119.942327, 37.177017],
|
||||
湖州: [120.1, 30.86],
|
||||
汕头: [116.69, 23.39],
|
||||
昆山: [120.95, 31.39],
|
||||
宁波: [121.56, 29.86],
|
||||
湛江: [110.359377, 21.270708],
|
||||
揭阳: [116.35, 23.55],
|
||||
荣成: [122.41, 37.16],
|
||||
连云港: [119.16, 34.59],
|
||||
葫芦岛: [120.836932, 40.711052],
|
||||
常熟: [120.74, 31.64],
|
||||
东莞: [113.75, 23.04],
|
||||
河源: [114.68, 23.73],
|
||||
淮安: [119.15, 33.5],
|
||||
泰州: [119.9, 32.49],
|
||||
南宁: [108.33, 22.84],
|
||||
营口: [122.18, 40.65],
|
||||
惠州: [114.4, 23.09],
|
||||
江阴: [120.26, 31.91],
|
||||
蓬莱: [120.75, 37.8],
|
||||
韶关: [113.62, 24.84],
|
||||
嘉峪关: [98.289152, 39.77313],
|
||||
广州: [113.23, 23.16],
|
||||
延安: [109.47, 36.6],
|
||||
太原: [112.53, 37.87],
|
||||
清远: [113.01, 23.7],
|
||||
中山: [113.38, 22.52],
|
||||
昆明: [102.73, 25.04],
|
||||
寿光: [118.73, 36.86],
|
||||
盘锦: [122.070714, 41.119997],
|
||||
长治: [113.08, 36.18],
|
||||
深圳: [114.07, 22.62],
|
||||
珠海: [113.52, 22.3],
|
||||
宿迁: [118.3, 33.96],
|
||||
咸阳: [108.72, 34.36],
|
||||
铜川: [109.11, 35.09],
|
||||
平度: [119.97, 36.77],
|
||||
佛山: [113.11, 23.05],
|
||||
海口: [110.35, 20.02],
|
||||
江门: [113.06, 22.61],
|
||||
章丘: [117.53, 36.72],
|
||||
肇庆: [112.44, 23.05],
|
||||
大连: [121.62, 38.92],
|
||||
临汾: [111.5, 36.08],
|
||||
吴江: [120.63, 31.16],
|
||||
石嘴山: [106.39, 39.04],
|
||||
沈阳: [123.38, 41.8],
|
||||
苏州: [120.62, 31.32],
|
||||
茂名: [110.88, 21.68],
|
||||
嘉兴: [120.76, 30.77],
|
||||
长春: [125.35, 43.88],
|
||||
胶州: [120.03336, 36.264622],
|
||||
银川: [106.27, 38.47],
|
||||
张家港: [120.555821, 31.875428],
|
||||
三门峡: [111.19, 34.76],
|
||||
锦州: [121.15, 41.13],
|
||||
南昌: [115.89, 28.68],
|
||||
柳州: [109.4, 24.33],
|
||||
三亚: [109.511909, 18.252847],
|
||||
自贡: [104.778442, 29.33903],
|
||||
吉林: [126.57, 43.87],
|
||||
阳江: [111.95, 21.85],
|
||||
泸州: [105.39, 28.91],
|
||||
西宁: [101.74, 36.56],
|
||||
宜宾: [104.56, 29.77],
|
||||
呼和浩特: [111.65, 40.82],
|
||||
成都: [104.06, 30.67],
|
||||
大同: [113.3, 40.12],
|
||||
镇江: [119.44, 32.2],
|
||||
桂林: [110.28, 25.29],
|
||||
张家界: [110.479191, 29.117096],
|
||||
宜兴: [119.82, 31.36],
|
||||
北海: [109.12, 21.49],
|
||||
西安: [108.95, 34.27],
|
||||
金坛: [119.56, 31.74],
|
||||
东营: [118.49, 37.46],
|
||||
牡丹江: [129.58, 44.6],
|
||||
遵义: [106.9, 27.7],
|
||||
绍兴: [120.58, 30.01],
|
||||
扬州: [119.42, 32.39],
|
||||
常州: [119.95, 31.79],
|
||||
潍坊: [119.1, 36.62],
|
||||
重庆: [106.54, 29.59],
|
||||
台州: [121.420757, 28.656386],
|
||||
南京: [118.78, 32.04],
|
||||
滨州: [118.03, 37.36],
|
||||
贵阳: [106.71, 26.57],
|
||||
无锡: [120.29, 31.59],
|
||||
本溪: [123.73, 41.3],
|
||||
克拉玛依: [84.77, 45.59],
|
||||
渭南: [109.5, 34.52],
|
||||
马鞍山: [118.48, 31.56],
|
||||
宝鸡: [107.15, 34.38],
|
||||
焦作: [113.21, 35.24],
|
||||
句容: [119.16, 31.95],
|
||||
北京: [116.46, 39.92],
|
||||
徐州: [117.2, 34.26],
|
||||
衡水: [115.72, 37.72],
|
||||
包头: [110, 40.58],
|
||||
绵阳: [104.73, 31.48],
|
||||
乌鲁木齐: [87.68, 43.77],
|
||||
枣庄: [117.57, 34.86],
|
||||
杭州: [120.19, 30.26],
|
||||
淄博: [118.05, 36.78],
|
||||
鞍山: [122.85, 41.12],
|
||||
溧阳: [119.48, 31.43],
|
||||
库尔勒: [86.06, 41.68],
|
||||
安阳: [114.35, 36.1],
|
||||
开封: [114.35, 34.79],
|
||||
济南: [117, 36.65],
|
||||
德阳: [104.37, 31.13],
|
||||
温州: [120.65, 28.01],
|
||||
九江: [115.97, 29.71],
|
||||
邯郸: [114.47, 36.6],
|
||||
临安: [119.72, 30.23],
|
||||
兰州: [103.73, 36.03],
|
||||
沧州: [116.83, 38.33],
|
||||
临沂: [118.35, 35.05],
|
||||
南充: [106.110698, 30.837793],
|
||||
天津: [117.2, 39.13],
|
||||
富阳: [119.95, 30.07],
|
||||
泰安: [117.13, 36.18],
|
||||
诸暨: [120.23, 29.71],
|
||||
郑州: [113.65, 34.76],
|
||||
哈尔滨: [126.63, 45.75],
|
||||
聊城: [115.97, 36.45],
|
||||
芜湖: [118.38, 31.33],
|
||||
唐山: [118.02, 39.63],
|
||||
平顶山: [113.29, 33.75],
|
||||
邢台: [114.48, 37.05],
|
||||
德州: [116.29, 37.45],
|
||||
济宁: [116.59, 35.38],
|
||||
荆州: [112.239741, 30.335165],
|
||||
宜昌: [111.3, 30.7],
|
||||
义乌: [120.06, 29.32],
|
||||
丽水: [119.92, 28.45],
|
||||
洛阳: [112.44, 34.7],
|
||||
秦皇岛: [119.57, 39.95],
|
||||
株洲: [113.16, 27.83],
|
||||
石家庄: [114.48, 38.03],
|
||||
莱芜: [117.67, 36.19],
|
||||
常德: [111.69, 29.05],
|
||||
保定: [115.48, 38.85],
|
||||
湘潭: [112.91, 27.87],
|
||||
金华: [119.64, 29.12],
|
||||
岳阳: [113.09, 29.37],
|
||||
长沙: [113, 28.21],
|
||||
衢州: [118.88, 28.97],
|
||||
廊坊: [116.7, 39.53],
|
||||
菏泽: [115.480656, 35.23375],
|
||||
合肥: [117.27, 31.86],
|
||||
武汉: [114.31, 30.52],
|
||||
大庆: [125.03, 46.58],
|
||||
};
|
||||
62
src/views/fun/gridLayout/index.vue
Normal file
62
src/views/fun/gridLayout/index.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<div class="grid-layout-container">
|
||||
<el-card shadow="hover" header="vue-grid-layout 拖拽布局演示">
|
||||
<el-alert
|
||||
title="感谢优秀的 `vue-grid-layout`，项目地址：https://github.com/jbaysolutions/vue-grid-layout"
|
||||
type="success"
|
||||
:closable="false"
|
||||
class="mb15"
|
||||
></el-alert>
|
||||
<grid-layout
|
||||
v-model:layout="layouts"
|
||||
:col-num="12"
|
||||
:row-height="30"
|
||||
:is-draggable="true"
|
||||
:is-resizable="true"
|
||||
:is-mirrored="false"
|
||||
:vertical-compact="true"
|
||||
:margin="[10, 10]"
|
||||
:use-css-transforms="true"
|
||||
>
|
||||
<grid-item v-for="item in layouts" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i" :key="item.i">
|
||||
<div class="w100 h100 flex">
|
||||
<span class="flex-margin font14">{{ item.i }}</span>
|
||||
</div>
|
||||
</grid-item>
|
||||
</grid-layout>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'FunGridLayout',
|
||||
setup() {
|
||||
const state = reactive({
|
||||
layouts: [
|
||||
{ x: 0, y: 0, w: 2, h: 2, i: '0' },
|
||||
{ x: 2, y: 0, w: 2, h: 4, i: '1' },
|
||||
{ x: 4, y: 0, w: 2, h: 5, i: '2' },
|
||||
{ x: 6, y: 0, w: 2, h: 3, i: '3' },
|
||||
{ x: 8, y: 0, w: 2, h: 3, i: '4' },
|
||||
{ x: 10, y: 0, w: 2, h: 3, i: '5' },
|
||||
{ x: 0, y: 5, w: 2, h: 5, i: '6' },
|
||||
],
|
||||
});
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.grid-layout-container {
|
||||
.vue-grid-item {
|
||||
background: var(--el-color-primary);
|
||||
color: var(--el-color-white);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
44
src/views/fun/printJs/index.vue
Normal file
44
src/views/fun/printJs/index.vue
Normal file
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<div ref="printRef">
|
||||
<el-card shadow="hover" header="打印演示">
|
||||
<el-alert
|
||||
title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`"
|
||||
type="success"
|
||||
:closable="false"
|
||||
class="mb15"
|
||||
></el-alert>
|
||||
<el-button @click="onPrintJs" size="default" type="primary">
|
||||
<SvgIcon name="iconfont icon-dayin" />
|
||||
点击打印演示
|
||||
</el-button>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { reactive, toRefs, defineComponent } from 'vue';
|
||||
import printJs from 'print-js';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'funPrintJs',
|
||||
setup() {
|
||||
const state = reactive({
|
||||
printRef: null as null | HTMLDivElement,
|
||||
});
|
||||
// 打印点击
|
||||
const onPrintJs = () => {
|
||||
printJs({
|
||||
printable: state.printRef,
|
||||
type: 'html',
|
||||
css: ['//at.alicdn.com/t/font_2298093_o73r8wjdhlg.css', '//unpkg.com/element-plus/dist/index.css'],
|
||||
scanStyles: false,
|
||||
style: `@media print{.mb15{margin-bottom:15px;}.el-button--small i.iconfont{font-size: 12px !important;margin-right: 5px;}}`,
|
||||
});
|
||||
};
|
||||
return {
|
||||
onPrintJs,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
79
src/views/fun/qrcode/index.vue
Normal file
79
src/views/fun/qrcode/index.vue
Normal file
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<div class="qrcode-container">
|
||||
<el-card shadow="hover" header="qrcodejs2 二维码生成">
|
||||
<el-alert
|
||||
title="感谢优秀的 `qrcodejs2`，项目地址：https://github.com/davidshimjs/qrcodejs"
|
||||
type="success"
|
||||
:closable="false"
|
||||
class="mb15"
|
||||
></el-alert>
|
||||
<div class="qrcode-img-warp">
|
||||
<div class="mb30 mt30 qrcode-img">
|
||||
<div class="qrcode" ref="qrcodeRef"></div>
|
||||
</div>
|
||||
<el-button type="primary" size="default" @click="onInitQrcode">
|
||||
<el-icon>
|
||||
<ele-Refresh />
|
||||
</el-icon>
|
||||
重新生成
|
||||
</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, onMounted, getCurrentInstance, defineComponent } from 'vue';
|
||||
import QRCode from 'qrcodejs2-fixes';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'funQrcode',
|
||||
setup() {
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
const state = reactive({
|
||||
qrcode: '',
|
||||
});
|
||||
// 初始化生成二维码
|
||||
const initQrcode = () => {
|
||||
new QRCode(proxy.$refs.qrcodeRef, {
|
||||
text: `https://lyt-top.gitee.io/vue-next-admin-preview/#/login?t=${new Date().getTime()}`,
|
||||
width: 125,
|
||||
height: 125,
|
||||
colorDark: '#000000',
|
||||
colorLight: '#ffffff',
|
||||
});
|
||||
};
|
||||
// 重新生成
|
||||
const onInitQrcode = () => {
|
||||
proxy.$refs.qrcodeRef.innerHTML = '';
|
||||
initQrcode();
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initQrcode();
|
||||
});
|
||||
return {
|
||||
onInitQrcode,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.qrcode-container {
|
||||
.qrcode-img-warp {
|
||||
text-align: center;
|
||||
.qrcode-img {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 125px;
|
||||
.qrcode {
|
||||
margin: auto;
|
||||
width: 125px;
|
||||
height: 125px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
54
src/views/fun/splitpanes/index.vue
Normal file
54
src/views/fun/splitpanes/index.vue
Normal file
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<div class="splitpanes-container">
|
||||
<el-card shadow="hover" header="splitpanes 窗格拆分器">
|
||||
<el-alert
|
||||
title="感谢优秀的 `splitpanes`，项目地址：https://github.com/antoniandre/splitpanes"
|
||||
type="success"
|
||||
:closable="false"
|
||||
class="mb15"
|
||||
></el-alert>
|
||||
<splitpanes class="default-theme" @resize="paneSize = $event[0].size" style="height: 500px">
|
||||
<pane :size="32"> 1 </pane>
|
||||
<pane :size="36">
|
||||
<splitpanes class="default-theme" :horizontal="true">
|
||||
<pane :size="100"> 2 </pane>
|
||||
<pane :size="100"> 3 </pane>
|
||||
</splitpanes>
|
||||
</pane>
|
||||
<pane :size="32"> 4 </pane>
|
||||
</splitpanes>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, defineComponent } from 'vue';
|
||||
import { Splitpanes, Pane } from 'splitpanes';
|
||||
import 'splitpanes/dist/splitpanes.css';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'funSplitpanes',
|
||||
components: { Splitpanes, Pane },
|
||||
setup() {
|
||||
const state = reactive({
|
||||
paneSize: 50,
|
||||
});
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.splitpanes__pane {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
position: relative;
|
||||
font-size: 70px;
|
||||
color: var(--el-color-primary-light-5);
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
background-color: var(--el-color-primary) !important;
|
||||
}
|
||||
</style>
|
||||
118
src/views/fun/tagsView/index.vue
Normal file
118
src/views/fun/tagsView/index.vue
Normal file
@@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<div class="fun-tagsview">
|
||||
<NoticeBar
|
||||
text="已删除非当前页 tagsView 演示，后续有时间可以再加回来！，tagsview 支持多标签（参数不同）、单标签共用（参数不同）"
|
||||
background="#ecf5ff"
|
||||
color="#409eff"
|
||||
/>
|
||||
<el-card shadow="hover" header="tagsView 当前页演示" class="mt15">
|
||||
<div class="flex-warp">
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="primary" size="default" @click="refreshCurrentTagsView">
|
||||
<el-icon>
|
||||
<ele-RefreshRight />
|
||||
</el-icon>
|
||||
刷新当前页
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="info" size="default" @click="closeCurrentTagsView">
|
||||
<el-icon>
|
||||
<ele-Close />
|
||||
</el-icon>
|
||||
关闭当前页
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="warning" size="default" @click="closeOtherTagsView">
|
||||
<el-icon>
|
||||
<ele-CircleClose />
|
||||
</el-icon>
|
||||
关闭其它
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="danger" size="default" @click="closeAllTagsView">
|
||||
<el-icon>
|
||||
<ele-FolderDelete />
|
||||
</el-icon>
|
||||
全部关闭
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="success" size="default" @click="openCurrenFullscreen">
|
||||
<el-icon>
|
||||
<ele-FullScreen />
|
||||
</el-icon>
|
||||
当前页全屏
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { getCurrentInstance, reactive, toRefs, defineComponent } from 'vue';
|
||||
import NoticeBar from '/@/components/noticeBar/index.vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'funTagsView',
|
||||
components: { NoticeBar },
|
||||
setup() {
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
const route = useRoute();
|
||||
const state = reactive({});
|
||||
// 0 刷新当前，1 关闭当前，2 关闭其它，3 关闭全部 4 当前页全屏
|
||||
// 1、刷新当前 tagsView
|
||||
const refreshCurrentTagsView = () => {
|
||||
proxy.mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 0, ...route }));
|
||||
};
|
||||
// 2、关闭当前 tagsView
|
||||
const closeCurrentTagsView = () => {
|
||||
proxy.mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
|
||||
};
|
||||
// 3、关闭其它 tagsView
|
||||
const closeOtherTagsView = () => {
|
||||
proxy.mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 2, ...route }));
|
||||
};
|
||||
// 4、关闭全部 tagsView
|
||||
const closeAllTagsView = () => {
|
||||
proxy.mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 3, ...route }));
|
||||
};
|
||||
// 5、开启当前页面全屏
|
||||
const openCurrenFullscreen = () => {
|
||||
proxy.mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 4, ...route }));
|
||||
};
|
||||
return {
|
||||
refreshCurrentTagsView,
|
||||
closeCurrentTagsView,
|
||||
closeOtherTagsView,
|
||||
closeAllTagsView,
|
||||
openCurrenFullscreen,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.fun-tagsview {
|
||||
.fun-tagsview-from-item {
|
||||
:deep(.el-form-item__content) {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user