mirror of
https://gitee.com/log4j/pig-ui.git
synced 2024-12-22 21:22:33 +08:00
'admin-21.03.07:新增图片裁剪、富文本、城市多级联动，修复错误界面图片404问题等'
This commit is contained in:
lyt-Top
parent
2d9c9f3fb0
commit
970ce01765
@ -113,8 +113,6 @@ cnpm run build
|
||||
- <a href="https://github.com/sass/sass" target="_blank">sass</a>
|
||||
- <a href="https://github.com/microsoft/TypeScript" target="_blank">typescript</a>
|
||||
- <a href="https://github.com/vitejs/vite" target="_blank">vite</a>
|
||||
- <a href="https://github.com/wangeditor-team/wangEditor" target="_blank">wangeditor</a>
|
||||
- <a href="https://github.com/fengyuanchen/cropperjs" target="_blank">cropperjs</a>
|
||||
|
||||
#### 特别感谢
|
||||
|
||||
|
||||
@ -9,7 +9,6 @@
|
||||
"axios": "^0.21.1",
|
||||
"clipboard": "^2.0.6",
|
||||
"countup.js": "^2.0.7",
|
||||
"cropperjs": "^1.5.11",
|
||||
"echarts": "^5.0.2",
|
||||
"echarts-wordcloud": "^2.0.0",
|
||||
"element-plus": "^1.0.2-beta.33",
|
||||
@ -19,8 +18,7 @@
|
||||
"sortablejs": "^1.13.0",
|
||||
"vue": "^3.0.5",
|
||||
"vue-router": "^4.0.2",
|
||||
"vuex": "^4.0.0-rc.2",
|
||||
"wangeditor": "^4.6.8"
|
||||
"vuex": "^4.0.0-rc.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/axios": "^0.14.0",
|
||||
@ -36,4 +34,4 @@
|
||||
"typescript": "^4.2.3",
|
||||
"vite": "^2.0.5"
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,148 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog title="更换头像" v-model="isShowDialog" width="769px">
|
||||
<div class="cropper-warp">
|
||||
<div class="cropper-warp-left">
|
||||
<img :src="cropperImg" class="cropper-warp-left-img" />
|
||||
</div>
|
||||
<div class="cropper-warp-right">
|
||||
<div class="cropper-warp-right-title">预览</div>
|
||||
<div class="cropper-warp-right-item">
|
||||
<div class="cropper-warp-right-value">
|
||||
<img :src="cropperImgBase64" class="cropper-warp-right-value-img" />
|
||||
</div>
|
||||
<div class="cropper-warp-right-label">100 x 100</div>
|
||||
</div>
|
||||
<div class="cropper-warp-right-item">
|
||||
<div class="cropper-warp-right-value">
|
||||
<img :src="cropperImgBase64" class="cropper-warp-right-value-img cropper-size" />
|
||||
</div>
|
||||
<div class="cropper-warp-right-label">50 x 50</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="onCancel" size="small">取 消</el-button>
|
||||
<el-button type="primary" @click="onSubmit" size="small">更 换</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { reactive, toRefs, nextTick } from "vue";
|
||||
import Cropper from "cropperjs";
|
||||
import "cropperjs/dist/cropper.css";
|
||||
export default {
|
||||
name: "cropperIndex",
|
||||
setup() {
|
||||
const state = reactive({
|
||||
isShowDialog: false,
|
||||
cropperImg: "",
|
||||
cropperImgBase64: "",
|
||||
});
|
||||
// 打开弹窗
|
||||
const openDialog = (imgs) => {
|
||||
state.cropperImg = imgs;
|
||||
state.isShowDialog = true;
|
||||
nextTick(() => {
|
||||
initCropper();
|
||||
});
|
||||
};
|
||||
// 关闭弹窗
|
||||
const closeDialog = (row) => {
|
||||
state.isShowDialog = false;
|
||||
};
|
||||
// 取消
|
||||
const onCancel = () => {
|
||||
closeDialog();
|
||||
};
|
||||
// 新增
|
||||
const onSubmit = () => {};
|
||||
// 初始化cropperjs图片裁剪
|
||||
const initCropper = () => {
|
||||
const cropper = new Cropper(
|
||||
document.querySelector(".cropper-warp-left-img"),
|
||||
{
|
||||
viewMode: 1,
|
||||
dragMode: "none",
|
||||
initialAspectRatio: 1,
|
||||
aspectRatio: 1,
|
||||
preview: ".before",
|
||||
background: false,
|
||||
autoCropArea: 0.6,
|
||||
zoomOnWheel: false,
|
||||
crop: (e) => {
|
||||
state.cropperImgBase64 = cropper
|
||||
.getCroppedCanvas()
|
||||
.toDataURL("image/jpeg");
|
||||
},
|
||||
}
|
||||
);
|
||||
};
|
||||
return {
|
||||
openDialog,
|
||||
closeDialog,
|
||||
onCancel,
|
||||
onSubmit,
|
||||
initCropper,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.cropper-warp {
|
||||
display: flex;
|
||||
.cropper-warp-left {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
height: 350px;
|
||||
flex: 1;
|
||||
border: 1px solid #ebeef5;
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
background-repeat: no-repeat;
|
||||
cursor: move;
|
||||
border-radius: 3px;
|
||||
.cropper-warp-left-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.cropper-warp-right {
|
||||
width: 150px;
|
||||
height: 350px;
|
||||
.cropper-warp-right-title {
|
||||
text-align: center;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.cropper-warp-right-item {
|
||||
margin: 15px 0;
|
||||
.cropper-warp-right-value {
|
||||
.cropper-warp-right-value-img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
.cropper-size {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
.cropper-warp-right-label {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because one or more lines are too long
@ -376,36 +376,6 @@ export const dynamicRoutes = [
|
||||
auth: ['admin', 'test'],
|
||||
icon: 'iconfont icon-xuanzeqi'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/fun/wangEditor',
|
||||
name: 'wangEditor',
|
||||
component: () => import('/@/views/fun/wangEditor/index.vue'),
|
||||
meta: {
|
||||
title: 'wangEditor 编辑器',
|
||||
isLink: '',
|
||||
isHide: false,
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
icon: 'iconfont icon-fuwenbenkuang'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/fun/cropper',
|
||||
name: 'cropper',
|
||||
component: () => import('/@/views/fun/cropper/index.vue'),
|
||||
meta: {
|
||||
title: 'cropper 图片裁剪',
|
||||
isLink: '',
|
||||
isHide: false,
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
icon: 'iconfont icon-caijian'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -485,21 +455,6 @@ export const dynamicRoutes = [
|
||||
icon: 'el-icon-set-up'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/pages/cityLinkage',
|
||||
name: 'cityLinkage',
|
||||
component: () => import('/@/views/pages/cityLinkage/index.vue'),
|
||||
meta: {
|
||||
title: '城市多级联动',
|
||||
isLink: '',
|
||||
isHide: false,
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
icon: 'iconfont icon-jiliandongxuanzeqi'
|
||||
}
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
|
||||
@ -22,7 +22,6 @@ body,
|
||||
background-color: #f8f8f8;
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 主布局样式
|
||||
@ -44,14 +43,13 @@ body,
|
||||
}
|
||||
}
|
||||
.layout-header {
|
||||
box-shadow: 0 1px 4px rgb(0 21 41 / 4%);
|
||||
padding: 0 !important;
|
||||
}
|
||||
.layout-main {
|
||||
padding: 0 !important;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
background-color: #f8f8f8;
|
||||
border-top: 1px solid #f1f2f3;
|
||||
}
|
||||
.el-scrollbar {
|
||||
width: 100%;
|
||||
|
||||
@ -949,9 +949,6 @@
|
||||
.el-select-dropdown .el-scrollbar__wrap {
|
||||
overflow-x: scroll !important;
|
||||
}
|
||||
.el-select-dropdown__wrap {
|
||||
max-height: 274px !important; /*修复Select 选择器高度问题*/
|
||||
}
|
||||
|
||||
/* Drawer 抽屉
|
||||
------------------------------- */
|
||||
@ -959,4 +956,4 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
@ -1,6 +1,5 @@
|
||||
@import './app.scss';
|
||||
@import './base.scss';
|
||||
@import './other.scss';
|
||||
@import './element.scss';
|
||||
@import './iconSelector.scss';
|
||||
@import './media/media.scss';
|
||||
|
||||
@ -1,10 +0,0 @@
|
||||
@import './index.scss';
|
||||
|
||||
/* 页面宽度小于576px
|
||||
------------------------------- */
|
||||
@media screen and (max-width: $xs) {
|
||||
.el-cascader__dropdown.el-popper {
|
||||
overflow: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
@ -9,4 +9,3 @@
|
||||
@import './scrollbar.scss';
|
||||
@import './pagination.scss';
|
||||
@import './dialog.scss';
|
||||
@import './cityLinkage.scss';
|
||||
|
||||
@ -1,16 +0,0 @@
|
||||
/* wangeditor富文本编辑器
|
||||
------------------------------- */
|
||||
.w-e-toolbar {
|
||||
border: 1px solid #ebeef5 !important;
|
||||
border-bottom: 1px solid #ebeef5 !important;
|
||||
border-top-left-radius: 3px;
|
||||
border-top-right-radius: 3px;
|
||||
z-index: 2 !important;
|
||||
}
|
||||
.w-e-text-container {
|
||||
border: 1px solid #ebeef5 !important;
|
||||
border-top: none !important;
|
||||
border-bottom-left-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
z-index: 1 !important;
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
// 字体图标 url
|
||||
const cssCdnUrlList: Array<string> = [
|
||||
'//at.alicdn.com/t/font_2298093_sctkh48ml1.css',
|
||||
'//at.alicdn.com/t/font_2298093_xviws8fx96h.css',
|
||||
'//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'
|
||||
]
|
||||
// 第三方 js url
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<img src="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/error/401.png" />
|
||||
<img src="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/images/error/401.png" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<img src="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/error/404.png" />
|
||||
<img src="https://gitee.com/lyt-top/vue-next-admin-images/raw/master/images/error/404.png" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,54 +0,0 @@
|
||||
<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" icon="el-icon-crop" size="small" @click="onCropperDialogOpen">更换头像</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
<CropperDialog ref="cropperDialogRef" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { ref, toRefs, reactive } from "vue";
|
||||
import CropperDialog from "/@/components/cropper/index.vue";
|
||||
export default {
|
||||
name: "cropper",
|
||||
components: { CropperDialog },
|
||||
setup() {
|
||||
const cropperDialogRef = ref();
|
||||
const state = reactive({
|
||||
cropperImg:
|
||||
"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.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>
|
||||
@ -49,12 +49,6 @@
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<el-button type="success" size="small" icon="el-icon-full-screen" @click="openCurrenFullscreen">当前页全屏
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
@ -121,13 +115,6 @@ export default {
|
||||
path: route.path,
|
||||
});
|
||||
};
|
||||
// 5、开启当前页面全屏
|
||||
const openCurrenFullscreen = () => {
|
||||
proxy.mittBus.emit("onCurrentContextmenuClick", {
|
||||
id: 4,
|
||||
path: route.path,
|
||||
});
|
||||
};
|
||||
// 执行点击
|
||||
const onImplementClick = () => {
|
||||
proxy.mittBus.emit("onCurrentContextmenuClick", {
|
||||
@ -140,7 +127,6 @@ export default {
|
||||
closeCurrentTagsView,
|
||||
closeOtherTagsView,
|
||||
closeAllTagsView,
|
||||
openCurrenFullscreen,
|
||||
onImplementClick,
|
||||
...toRefs(state),
|
||||
};
|
||||
|
||||
@ -1,40 +0,0 @@
|
||||
<template>
|
||||
<div class="editor-container">
|
||||
<el-card shadow="hover" header="wangeditor富文本编辑器">
|
||||
<el-alert title="感谢优秀的 `wangeditor`，项目地址：https://github.com/wangeditor-team/wangEditor" type="success"
|
||||
:closable="false" class="mb15"></el-alert>
|
||||
<div id="wangeditor"></div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, onMounted } from "vue";
|
||||
import wangeditor from "wangeditor";
|
||||
export default {
|
||||
name: "wangeditor",
|
||||
components: {},
|
||||
setup() {
|
||||
const state = reactive({});
|
||||
// 初始化富文本
|
||||
// https://doc.wangeditor.com/
|
||||
const initWangeditor = () => {
|
||||
const editor = new wangeditor("#wangeditor");
|
||||
editor.config.placeholder = "请输入内容";
|
||||
editor.config.onchange = (html) => {
|
||||
console.log(html);
|
||||
// console.log(editor.txt.html());
|
||||
// console.log(editor.txt.text());
|
||||
};
|
||||
editor.create();
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initWangeditor();
|
||||
});
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -130,5 +130,6 @@ export default {
|
||||
padding-right: 15px;
|
||||
background: var(--bg-topBar);
|
||||
overflow: hidden;
|
||||
border-bottom: 1px solid rgb(238, 238, 238);
|
||||
}
|
||||
</style>
|
||||
@ -41,12 +41,6 @@ export default defineComponent({
|
||||
{ id: 1, txt: "关闭", affix: false, icon: "el-icon-close" },
|
||||
{ id: 2, txt: "关闭其它", affix: false, icon: "el-icon-circle-close" },
|
||||
{ id: 3, txt: "全部关闭", affix: false, icon: "el-icon-folder-delete" },
|
||||
{
|
||||
id: 4,
|
||||
txt: "当前全屏",
|
||||
affix: false,
|
||||
icon: "iconfont icon-fullscreen",
|
||||
},
|
||||
],
|
||||
path: {},
|
||||
});
|
||||
@ -99,9 +93,6 @@ export default defineComponent({
|
||||
position: fixed;
|
||||
.el-dropdown-menu__item {
|
||||
font-size: 12px !important;
|
||||
i {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -38,7 +38,6 @@ import {
|
||||
watch,
|
||||
} from "vue";
|
||||
import { useRoute, useRouter, onBeforeRouteUpdate } from "vue-router";
|
||||
import screenfull from "screenfull";
|
||||
import { useStore } from "/@/store/index.ts";
|
||||
import { setSession, getSession, removeSession } from "/@/utils/storage.ts";
|
||||
import Sortable from "sortablejs";
|
||||
@ -154,14 +153,6 @@ export default {
|
||||
});
|
||||
addBrowserSetSession(state.tagsViewList);
|
||||
};
|
||||
// 6、开启当前页面全屏
|
||||
const openCurrenFullscreen = (path: string) => {
|
||||
nextTick(() => {
|
||||
router.push(path);
|
||||
const element = document.querySelector(".layout-main");
|
||||
screenfull.request(element);
|
||||
});
|
||||
};
|
||||
// 当前项右键菜单点击
|
||||
const onCurrentContextmenuClick = (data: object) => {
|
||||
let { id, path } = data;
|
||||
@ -180,9 +171,6 @@ export default {
|
||||
case 3:
|
||||
closeAllTagsView(path);
|
||||
break;
|
||||
case 4:
|
||||
openCurrenFullscreen(path);
|
||||
break;
|
||||
}
|
||||
};
|
||||
// 判断页面高亮
|
||||
@ -305,7 +293,6 @@ export default {
|
||||
.layout-navbars-tagsview {
|
||||
flex: 1;
|
||||
background-color: #ffffff;
|
||||
border-top: 1px solid #ebeef5;
|
||||
::v-deep(.el-scrollbar__wrap) {
|
||||
overflow-x: auto !important;
|
||||
}
|
||||
|
||||
@ -1,92 +0,0 @@
|
||||
<template>
|
||||
<div class="city-linkage-container">
|
||||
<el-alert title="温馨提示：箭头问题为 `element plus，Cascader 级联选择器` 宽度设为 100%后自带bug" type="warning" :closable="false">
|
||||
</el-alert>
|
||||
<el-card shadow="hover" header="1、三级联动（省市区）" class="mt15">
|
||||
<el-cascader v-model="threeLevelLinkage" :options="threeLevelLinkageList" :props="{ expandTrigger: 'hover',
|
||||
value: 'code' , label: 'name' }" size="small" clearable class="w100">
|
||||
</el-cascader>
|
||||
</el-card>
|
||||
<el-card shadow="hover" header="2、分开联动" class="mt15">
|
||||
<el-form size="small" label-width="40px">
|
||||
<el-row :gutter="15">
|
||||
<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" class="mb15">
|
||||
<el-form-item label="省级">
|
||||
<el-select v-model="linkage.province" placeholder="请选择" size="small" clearable @change="onProvinceChange"
|
||||
class="w100">
|
||||
<el-option v-for="(v,k) in linkage.provinceList" :key="k" :label="v.name" :value="v.name"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" class="mb15">
|
||||
<el-form-item label="市级">
|
||||
<el-select v-model="linkage.city" placeholder="请选择" size="small" clearable @change="onCityChange"
|
||||
class="w100">
|
||||
<el-option v-for="(v,k) in linkage.cityList" :key="k" :label="v.name" :value="v.name"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
|
||||
<el-form-item label="区级">
|
||||
<el-select v-model="linkage.area" placeholder="请选择" size="small" clearable class="w100">
|
||||
<el-option v-for="(v,k) in linkage.areaList" :key="k" :label="v.name" :value="v.name"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, onMounted } from "vue";
|
||||
import threeLevelLinkageJson from "/@/mock/threeLevelLinkage.json";
|
||||
export default {
|
||||
name: "cityLinkage",
|
||||
setup() {
|
||||
const state = reactive({
|
||||
threeLevelLinkage: "",
|
||||
threeLevelLinkageList: [],
|
||||
linkage: {
|
||||
province: "",
|
||||
city: "",
|
||||
area: "",
|
||||
provinceList: [], // 省
|
||||
cityList: [], // 市
|
||||
areaList: [], // 区
|
||||
},
|
||||
});
|
||||
// 初始化城市数据
|
||||
const initCityData = () => {
|
||||
state.threeLevelLinkageList = threeLevelLinkageJson;
|
||||
state.linkage.provinceList = threeLevelLinkageJson;
|
||||
};
|
||||
// 省下拉改变时
|
||||
const onProvinceChange = (name) => {
|
||||
state.linkage.city = "";
|
||||
state.linkage.cityList = [];
|
||||
state.linkage.provinceList.map((v) => {
|
||||
if (v.name === name) state.linkage.cityList = v.children;
|
||||
});
|
||||
};
|
||||
// 市下拉改变时
|
||||
const onCityChange = (name) => {
|
||||
state.linkage.area = "";
|
||||
state.linkage.areaList = [];
|
||||
state.linkage.cityList.map((v) => {
|
||||
if (v.name === name) state.linkage.areaList = v.children;
|
||||
});
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initCityData();
|
||||
});
|
||||
return {
|
||||
onProvinceChange,
|
||||
onCityChange,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user