'admin-21.07.14:优化、修复诸多内容，具体查看根目录CHANGELOG.md文件'
This commit is contained in:
lyt-Top
parent
f7275035e5
commit
d9e9779581
19
CHANGELOG.md
19
CHANGELOG.md
@ -2,6 +2,25 @@
|
||||
|
||||
🎉🎉🔥 `vue-next-admin` 基于 vue3.x 、Typescript、vite、Element plus 等，适配手机、平板、pc 的后台开源免费模板库（vue2.x 请切换 vue-prev-admin 分支）
|
||||
|
||||
## 1.0.11
|
||||
|
||||
`2021.07.14`
|
||||
|
||||
- 🌟 更新 依赖更新最新版本
|
||||
- 🎉 新增 路由参数、图片懒加载界面演示
|
||||
- ⚠️ 警告 Form 表单 `binding value must be a string or number`，解决：加上 `label-position="top"` 不报警告（等待官方修复）
|
||||
- 🎯 优化 锁屏界面动画效果、首页图表显示
|
||||
- 🎯 优化 tagsView 右键菜单 `关闭` 功能逻辑
|
||||
- 🐞 修复 开启 TagsView 拖拽报错及小于 `1000px` 时自动设置禁止拖拽（<a href="https://gitee.com/lyt-top/vue-next-admin/issues/I3ZRRI" target="_blank">#I3ZRRI</a>）
|
||||
- 🐞 修复 `iframe 内嵌、外链` 高度问题，使用 computed 进行计算
|
||||
- 🐞 修复 默认布局开启 `侧边栏 Logo` 与关闭 `菜单水平折叠`，切换到横向布局时，菜单看不见的问题
|
||||
- 🐞 修复 切换不同布局时，再去开启 `经典布局分割菜单` 功能不生效问题
|
||||
- 🐞 修复 浏览器窗口标题中/英文切换不实时生效的问题
|
||||
- 🐞 修复 切换布局时，某些功能不可以使用。部分界面不需要取消事件监听(proxy.mittBus.off('xxx'))
|
||||
- 🐞 修复 动态路由带参数，router-link 跳转问题（<a href="hhttps://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G" target="_blank">#I3YX6G</a>）
|
||||
- 🐞 修复 横向菜单有二级菜单时，点击子级菜单不高亮问题
|
||||
- 🐞 修复 功能 tagsView 操作演示不生效
|
||||
|
||||
## 1.0.10
|
||||
|
||||
`2021.07.07`
|
||||
|
||||
16
package.json
16
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "vue-next-admin",
|
||||
"version": "1.0.9",
|
||||
"version": "1.0.11",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
@ -12,7 +12,7 @@
|
||||
"cropperjs": "^1.5.12",
|
||||
"echarts": "^5.1.2",
|
||||
"echarts-wordcloud": "^2.0.0",
|
||||
"element-plus": "^1.0.2-beta.54",
|
||||
"element-plus": "^1.0.2-beta.55",
|
||||
"mitt": "^3.0.0",
|
||||
"nprogress": "^0.2.0",
|
||||
"print-js": "^1.6.0",
|
||||
@ -32,21 +32,21 @@
|
||||
"devDependencies": {
|
||||
"@types/axios": "^0.14.0",
|
||||
"@types/clipboard": "^2.0.1",
|
||||
"@types/node": "^16.0.0",
|
||||
"@types/node": "^16.3.1",
|
||||
"@types/nprogress": "^0.2.0",
|
||||
"@types/sortablejs": "^1.10.7",
|
||||
"@typescript-eslint/eslint-plugin": "^4.28.2",
|
||||
"@typescript-eslint/parser": "^4.28.2",
|
||||
"@vitejs/plugin-vue": "^1.2.4",
|
||||
"@typescript-eslint/eslint-plugin": "^4.28.3",
|
||||
"@typescript-eslint/parser": "^4.28.3",
|
||||
"@vitejs/plugin-vue": "^1.2.5",
|
||||
"@vue/compiler-sfc": "^3.1.4",
|
||||
"dotenv": "^10.0.0",
|
||||
"eslint": "^7.30.0",
|
||||
"eslint-plugin-vue": "^7.13.0",
|
||||
"prettier": "^2.3.2",
|
||||
"sass": "^1.35.1",
|
||||
"sass": "^1.35.2",
|
||||
"sass-loader": "^12.1.0",
|
||||
"typescript": "^4.3.5",
|
||||
"vite": "^2.4.1",
|
||||
"vite": "^2.4.2",
|
||||
"vue-eslint-parser": "^7.8.0"
|
||||
},
|
||||
"browserslist": [
|
||||
|
||||
10
src/App.vue
10
src/App.vue
@ -7,8 +7,8 @@
|
||||
<script lang="ts">
|
||||
import { computed, ref, getCurrentInstance, onBeforeMount, onMounted, onUnmounted, nextTick, defineComponent, watch } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useStore } from '/@/store/index';
|
||||
import { useTitle } from '/@/utils/setWebTitle';
|
||||
import { Local } from '/@/utils/storage';
|
||||
import setIntroduction from '/@/utils/setIconfont';
|
||||
import LockScreen from '/@/layout/lockScreen/index.vue';
|
||||
@ -17,11 +17,11 @@ export default defineComponent({
|
||||
name: 'app',
|
||||
components: { LockScreen, Setings },
|
||||
setup() {
|
||||
const { t } = useI18n();
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
const setingsRef = ref();
|
||||
const route = useRoute();
|
||||
const store = useStore();
|
||||
const title = useTitle();
|
||||
// 获取布局配置信息
|
||||
const getThemeConfig = computed(() => {
|
||||
return store.state.themeConfig.themeConfig;
|
||||
@ -59,11 +59,7 @@ export default defineComponent({
|
||||
watch(
|
||||
() => route.path,
|
||||
() => {
|
||||
nextTick(() => {
|
||||
let webTitle = '';
|
||||
route.path === '/login' ? (webTitle = route.meta.title) : (webTitle = t(route.meta.title));
|
||||
document.title = `${webTitle} - ${getThemeConfig.value.globalTitle}` || getThemeConfig.value.globalTitle;
|
||||
});
|
||||
title();
|
||||
}
|
||||
);
|
||||
return {
|
||||
|
||||
@ -51,6 +51,12 @@ export default {
|
||||
pagesWaves: 'Wave effect',
|
||||
pagesTree: 'tree alter table',
|
||||
pagesDrag: 'Drag command',
|
||||
pagesLazyImg: 'Image lazy loading',
|
||||
paramsIndex: 'Routing parameters',
|
||||
paramsCommon: 'General routing',
|
||||
paramsDynamic: 'Dynamic routing',
|
||||
paramsCommonDetails: 'General routing details',
|
||||
paramsDynamicDetails: 'Dynamic routing details',
|
||||
chartIndex: 'chartIndex',
|
||||
personal: 'personal',
|
||||
tools: 'tools',
|
||||
|
||||
@ -51,6 +51,12 @@ export default {
|
||||
pagesWaves: '波浪效果',
|
||||
pagesTree: '树形改表格',
|
||||
pagesDrag: '拖动指令',
|
||||
pagesLazyImg: '图片懒加载',
|
||||
paramsIndex: '路由参数',
|
||||
paramsCommon: '普通路由',
|
||||
paramsDynamic: '动态路由',
|
||||
paramsCommonDetails: '普通路由详情',
|
||||
paramsDynamicDetails: '动态路由详情',
|
||||
chartIndex: '大数据图表',
|
||||
personal: '个人中心',
|
||||
tools: '工具类集合',
|
||||
|
||||
@ -51,6 +51,12 @@ export default {
|
||||
pagesWaves: '波浪效果',
|
||||
pagesTree: '樹形改表格',
|
||||
pagesDrag: '拖動指令',
|
||||
pagesLazyImg: '圖片懶加載',
|
||||
paramsIndex: '路由參數',
|
||||
paramsCommon: '普通路由',
|
||||
paramsDynamic: '動態路由',
|
||||
paramsCommonDetails: '普通路由詳情',
|
||||
paramsDynamicDetails: '動態路由詳情',
|
||||
chartIndex: '大資料圖表',
|
||||
personal: '個人中心',
|
||||
tools: '工具類集合',
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, computed, watch, getCurrentInstance, onBeforeMount, onUnmounted } from 'vue';
|
||||
import { toRefs, reactive, computed, watch, getCurrentInstance, onBeforeMount } from 'vue';
|
||||
import { useStore } from '/@/store/index';
|
||||
import Logo from '/@/layout/logo/index.vue';
|
||||
import Vertical from '/@/layout/navMenu/vertical.vue';
|
||||
@ -95,6 +95,8 @@ export default {
|
||||
onBeforeMount(() => {
|
||||
initMenuFixed(document.body.clientWidth);
|
||||
setFilterRoutes();
|
||||
// 此界面不需要取消监听(proxy.mittBus.off('setSendColumnsChildren))
|
||||
// 因为切换布局时有的监听需要使用，取消了监听，某些操作将不生效
|
||||
proxy.mittBus.on('setSendColumnsChildren', (res: any) => {
|
||||
state.menuList = res.children;
|
||||
});
|
||||
@ -112,13 +114,6 @@ export default {
|
||||
initMenuFixed(res.clientWidth);
|
||||
});
|
||||
});
|
||||
// 页面卸载时
|
||||
onUnmounted(() => {
|
||||
proxy.mittBus.off('setSendColumnsChildren');
|
||||
proxy.mittBus.off('setSendClassicChildren');
|
||||
proxy.mittBus.off('getBreadcrumbIndexSetFilterRoutes');
|
||||
proxy.mittBus.off('layoutMobileResize');
|
||||
});
|
||||
return {
|
||||
setCollapseWidth,
|
||||
setShowLogo,
|
||||
|
||||
@ -200,6 +200,7 @@ export default defineComponent({
|
||||
.layout-lock-screen-filter {
|
||||
filter: blur(5px);
|
||||
transform: scale(1.01);
|
||||
transition: all 0.1s 0.1s ease-in-out;
|
||||
}
|
||||
.layout-lock-screen-mask {
|
||||
background: rgba(255, 255, 255, 1);
|
||||
@ -271,6 +272,7 @@ export default defineComponent({
|
||||
&:hover {
|
||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
box-shadow: 0 0 12px 0 rgba(255, 255, 255, 0.5);
|
||||
color: #ffffff;
|
||||
opacity: 1;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
@ -524,6 +524,8 @@ export default defineComponent({
|
||||
getThemeConfig.value.topBarColor = '#FFFFFF';
|
||||
initLayoutChangeFun();
|
||||
} else if (getThemeConfig.value.layout === 'columns') {
|
||||
// 1.0.11 更新日志
|
||||
getThemeConfig.value.isShowLogo = false;
|
||||
getThemeConfig.value.menuBar = '#FFFFFF';
|
||||
getThemeConfig.value.menuBarColor = '#606266';
|
||||
getThemeConfig.value.topBar = '#ffffff';
|
||||
|
||||
@ -79,6 +79,7 @@ import screenfull from 'screenfull';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { resetRoute } from '/@/router/index';
|
||||
import { useStore } from '/@/store/index';
|
||||
import { useTitle } from '/@/utils/setWebTitle';
|
||||
import { Session, Local } from '/@/utils/storage';
|
||||
import UserNews from '/@/layout/navBars/breadcrumb/userNews.vue';
|
||||
import Search from '/@/layout/navBars/breadcrumb/search.vue';
|
||||
@ -90,6 +91,7 @@ export default {
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
const router = useRouter();
|
||||
const store = useStore();
|
||||
const title = useTitle();
|
||||
const searchRef = ref();
|
||||
const state = reactive({
|
||||
isScreenfull: false,
|
||||
@ -190,6 +192,7 @@ export default {
|
||||
Local.set('themeConfig', getThemeConfig.value);
|
||||
proxy.$i18n.locale = lang;
|
||||
initI18n();
|
||||
title();
|
||||
};
|
||||
// 初始化言语国际化
|
||||
const initI18n = () => {
|
||||
|
||||
@ -81,7 +81,7 @@ export default {
|
||||
};
|
||||
// 获取 vuex 中的 tagsViewRoutes 列表
|
||||
const getTagsViewRoutes = () => {
|
||||
state.routePath = route.path;
|
||||
state.routePath = route.meta.isDynamic ? route.meta.isDynamicPath : route.path;
|
||||
state.tagsViewList = [];
|
||||
if (!store.state.themeConfig.themeConfig.isCacheTagsView) Session.remove('tagsViewList');
|
||||
state.tagsViewRoutesList = store.state.tagsViewRoutes.tagsViewRoutes;
|
||||
@ -95,7 +95,7 @@ export default {
|
||||
state.tagsViewRoutesList.map((v: any) => {
|
||||
if (v.meta.isAffix && !v.meta.isHide) state.tagsViewList.push({ ...v });
|
||||
});
|
||||
addTagsView(route.path);
|
||||
addTagsView(route.path, route);
|
||||
}
|
||||
// 初始化当前元素(li)的下标
|
||||
getTagsRefsIndex(route.path);
|
||||
@ -103,11 +103,19 @@ export default {
|
||||
tagsViewmoveToCurrentTag();
|
||||
};
|
||||
// 1、添加 tagsView：未设置隐藏（isHide）也添加到在 tagsView 中
|
||||
const addTagsView = (path: string, to: any) => {
|
||||
const addTagsView = (path: string, to?: any) => {
|
||||
// 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
|
||||
let item = '';
|
||||
if (to && to.meta.isDynamic) {
|
||||
if (state.tagsViewList.some((v: any) => v.path === to.meta.isDynamicPath)) return false;
|
||||
item = state.tagsViewRoutesList.find((v: any) => v.path === to.meta.isDynamicPath);
|
||||
} else {
|
||||
if (state.tagsViewList.some((v: any) => v.path === path)) return false;
|
||||
const item = state.tagsViewRoutesList.find((v: any) => v.path === path);
|
||||
item = state.tagsViewRoutesList.find((v: any) => v.path === path);
|
||||
}
|
||||
if (item.meta.isLink && !item.meta.isIframe) return false;
|
||||
item.query = to?.query ? to?.query : route.query;
|
||||
if (to && to.meta.isDynamic) item.params = to?.params ? to?.params : route.params;
|
||||
else item.query = to?.query ? to?.query : route.query;
|
||||
state.tagsViewList.push({ ...item });
|
||||
addBrowserSetSession(state.tagsViewList);
|
||||
};
|
||||
@ -122,10 +130,27 @@ export default {
|
||||
if (v.path === path) {
|
||||
state.tagsViewList.splice(k, 1);
|
||||
setTimeout(() => {
|
||||
// 最后一个
|
||||
if (state.tagsViewList.length === k) router.push({ path: arr[arr.length - 1].path, query: arr[arr.length - 1].query });
|
||||
// 否则，跳转到下一个
|
||||
else router.push({ path: arr[k].path, query: arr[k].query });
|
||||
if (state.tagsViewList.length === k && state.routePath === path) {
|
||||
// 最后一个且高亮时
|
||||
if (arr[arr.length - 1].meta.isDynamic) {
|
||||
// 动态路由（xxx/:id/:name"）
|
||||
router.push({ name: arr[arr.length - 1].name, params: arr[arr.length - 1].params });
|
||||
} else {
|
||||
// 普通路由
|
||||
router.push({ path: arr[arr.length - 1].path, query: arr[arr.length - 1].query });
|
||||
}
|
||||
} else {
|
||||
// 非最后一个且高亮时，跳转到下一个
|
||||
if (state.tagsViewList.length !== k && state.routePath === path) {
|
||||
if (arr[k].meta.isDynamic) {
|
||||
// 动态路由（xxx/:id/:name"）
|
||||
router.push({ name: arr[k].name, params: arr[k].params });
|
||||
} else {
|
||||
// 普通路由
|
||||
router.push({ path: arr[k].path, query: arr[k].query });
|
||||
}
|
||||
}
|
||||
}
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
@ -138,7 +163,7 @@ export default {
|
||||
state.tagsViewRoutesList.map((v: any) => {
|
||||
if (v.meta.isAffix && !v.meta.isHide) state.tagsViewList.push({ ...v });
|
||||
});
|
||||
addTagsView(path);
|
||||
addTagsView(path, route);
|
||||
};
|
||||
// 5、关闭全部 tagsView：如果是设置了固定的（isAffix），不进行关闭
|
||||
const closeAllTagsView = (path: string) => {
|
||||
@ -163,19 +188,21 @@ export default {
|
||||
});
|
||||
};
|
||||
// 当前项右键菜单点击
|
||||
const onCurrentContextmenuClick = (data: any) => {
|
||||
let { id, path } = data;
|
||||
let currentTag = state.tagsViewList.find((v: any) => v.path === path);
|
||||
const onCurrentContextmenuClick = (item) => {
|
||||
const { id, path } = item;
|
||||
const { meta, name, params, query } = route;
|
||||
switch (id) {
|
||||
case 0:
|
||||
refreshCurrentTagsView(path);
|
||||
router.push({ path, query: currentTag.query });
|
||||
if (meta.isDynamic) router.push({ name, params });
|
||||
else router.push({ path, query });
|
||||
break;
|
||||
case 1:
|
||||
closeCurrentTagsView(path);
|
||||
break;
|
||||
case 2:
|
||||
router.push({ path, query: currentTag.query });
|
||||
if (meta.isDynamic) router.push({ name, params });
|
||||
else router.push({ path, query });
|
||||
closeOtherTagsView(path);
|
||||
break;
|
||||
case 3:
|
||||
@ -186,7 +213,7 @@ export default {
|
||||
break;
|
||||
}
|
||||
};
|
||||
// 判断页面高亮
|
||||
// 判断页面高亮（修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G）
|
||||
const isActive = (path: string) => {
|
||||
return path === state.routePath;
|
||||
};
|
||||
@ -271,13 +298,13 @@ export default {
|
||||
};
|
||||
// 设置 tagsView 可以进行拖拽
|
||||
const initSortable = () => {
|
||||
const el: any = document.querySelector('.layout-navbars-tagsview-ul');
|
||||
const el = document.querySelector('.layout-navbars-tagsview-ul') as HTMLElement;
|
||||
if (!el) return false;
|
||||
if (!getThemeConfig.value.isSortableTagsView) state.sortable && state.sortable.destroy();
|
||||
if (getThemeConfig.value.isSortableTagsView) {
|
||||
state.sortable && state.sortable.destroy();
|
||||
state.sortable = Sortable.create(el, {
|
||||
animation: 300,
|
||||
dataIdAttr: 'data-name',
|
||||
disabled: getThemeConfig.value.isSortableTagsView ? false : true,
|
||||
onEnd: () => {
|
||||
const sortEndList: any = [];
|
||||
state.sortable.toArray().map((val: any) => {
|
||||
@ -288,7 +315,13 @@ export default {
|
||||
addBrowserSetSession(sortEndList);
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
// 拖动问题，https://gitee.com/lyt-top/vue-next-admin/issues/I3ZRRI
|
||||
const onSortableResize = () => {
|
||||
const clientWidth = document.body.clientWidth;
|
||||
if (clientWidth < 1000) getThemeConfig.value.isSortableTagsView = false;
|
||||
else getThemeConfig.value.isSortableTagsView = true;
|
||||
initSortable();
|
||||
};
|
||||
// 监听路由的变化，动态赋值给 tagsView
|
||||
watch(store.state, (val) => {
|
||||
@ -297,6 +330,8 @@ export default {
|
||||
});
|
||||
// 页面加载前
|
||||
onBeforeMount(() => {
|
||||
// 拖动问题，https://gitee.com/lyt-top/vue-next-admin/issues/I3ZRRI
|
||||
window.addEventListener('resize', onSortableResize);
|
||||
// 监听非本页面调用 0 刷新当前，1 关闭当前，2 关闭其它，3 关闭全部 4 当前页全屏
|
||||
proxy.mittBus.on('onCurrentContextmenuClick', (data: object) => {
|
||||
onCurrentContextmenuClick(data);
|
||||
@ -312,6 +347,8 @@ export default {
|
||||
proxy.mittBus.off('onCurrentContextmenuClick');
|
||||
// 取消监听布局配置界面开启/关闭拖拽
|
||||
proxy.mittBus.off('openOrCloseSortable');
|
||||
// 取消窗口 resize 监听
|
||||
window.removeEventListener('resize', onSortableResize);
|
||||
});
|
||||
// 页面更新时
|
||||
onBeforeUpdate(() => {
|
||||
@ -325,7 +362,7 @@ export default {
|
||||
});
|
||||
// 路由更新时
|
||||
onBeforeRouteUpdate((to) => {
|
||||
state.routePath = to.path;
|
||||
state.routePath = to.meta.isDynamic ? to.meta.isDynamicPath : to.path;
|
||||
addTagsView(to.path, to);
|
||||
getTagsRefsIndex(to.path);
|
||||
tagsViewmoveToCurrentTag();
|
||||
|
||||
@ -102,11 +102,12 @@ export default defineComponent({
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initElMenuOffsetLeft();
|
||||
setCurrentRouterHighlight(route.path);
|
||||
setCurrentRouterHighlight(route.meta.isDynamic ? route.meta.isDynamicPath : route.path);
|
||||
});
|
||||
// 路由更新时
|
||||
onBeforeRouteUpdate((to) => {
|
||||
setCurrentRouterHighlight(to.path);
|
||||
// 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
|
||||
setCurrentRouterHighlight(to.meta.isDynamic ? to.meta.isDynamicPath : to.path);
|
||||
proxy.mittBus.emit('onMenuClick');
|
||||
// 修复经典布局开启切割菜单时，点击tagsView后左侧导航菜单数据不变的问题
|
||||
let { layout, isClassicSplitMenu } = store.state.themeConfig.themeConfig;
|
||||
|
||||
@ -47,7 +47,8 @@ export default defineComponent({
|
||||
const store = useStore();
|
||||
const route = useRoute();
|
||||
const state = reactive({
|
||||
defaultActive: route.path,
|
||||
// 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
|
||||
defaultActive: route.meta.isDynamic ? route.meta.isDynamicPath : route.path,
|
||||
});
|
||||
// 获取父级菜单数据
|
||||
const menuLists = computed(() => {
|
||||
@ -63,7 +64,8 @@ export default defineComponent({
|
||||
});
|
||||
// 路由更新时
|
||||
onBeforeRouteUpdate((to) => {
|
||||
state.defaultActive = to.path;
|
||||
// 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
|
||||
state.defaultActive = to.meta.isDynamic ? to.meta.isDynamicPath : to.path;
|
||||
proxy.mittBus.emit('onMenuClick');
|
||||
const clientWidth = document.body.clientWidth;
|
||||
if (clientWidth < 1000) getThemeConfig.value.isCollapse = false;
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div class="layout-view-bg-white flex" :style="{ height: `calc(100vh - ${iframeHeight}`, border: 'none' }" v-loading="iframeLoading">
|
||||
<div class="layout-view-bg-white flex" :style="{ height: `calc(100vh - ${setIframeHeight}`, border: 'none' }" v-loading="iframeLoading">
|
||||
<iframe :src="iframeUrl" frameborder="0" height="100%" width="100%" id="iframe" v-show="!iframeLoading"></iframe>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, toRefs, onMounted, nextTick, watch } from 'vue';
|
||||
import { defineComponent, reactive, toRefs, onMounted, nextTick, watch, computed } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useStore } from '/@/store/index';
|
||||
export default defineComponent({
|
||||
@ -16,7 +16,6 @@ export default defineComponent({
|
||||
const state = reactive({
|
||||
iframeLoading: true,
|
||||
iframeUrl: '',
|
||||
iframeHeight: '',
|
||||
});
|
||||
// 初始化页面加载 loading
|
||||
const initIframeLoad = () => {
|
||||
@ -31,15 +30,14 @@ export default defineComponent({
|
||||
});
|
||||
};
|
||||
// 设置 iframe 的高度
|
||||
const initIframeHeight = () => {
|
||||
const setIframeHeight = computed(() => {
|
||||
let { isTagsview } = store.state.themeConfig.themeConfig;
|
||||
if (isTagsview) return (state.iframeHeight = `84px`);
|
||||
else return (state.iframeHeight = `20px`);
|
||||
};
|
||||
if (isTagsview) return `84px`;
|
||||
else return `50px`;
|
||||
});
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initIframeLoad();
|
||||
initIframeHeight();
|
||||
});
|
||||
// 监听路由变化，多个 iframe 时使用
|
||||
watch(
|
||||
@ -49,6 +47,7 @@ export default defineComponent({
|
||||
}
|
||||
);
|
||||
return {
|
||||
setIframeHeight,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="layout-view-bg-white flex layout-view-link" :style="{ height: `calc(100vh - ${linkHeight}` }">
|
||||
<div class="layout-view-bg-white flex layout-view-link" :style="{ height: `calc(100vh - ${setLinkHeight}` }">
|
||||
<a href="https://element-plus.gitee.io/#/zh-CN/component/installation" target="_blank" class="flex-margin"
|
||||
>{{ currentRouteMeta.title }}：{{ currentRouteMeta.isLink }}</a
|
||||
>
|
||||
@ -7,7 +7,7 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, toRefs, reactive, onMounted } from 'vue';
|
||||
import { defineComponent, toRefs, reactive, onMounted, computed } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useStore } from '/@/store/index';
|
||||
export default defineComponent({
|
||||
@ -17,24 +17,23 @@ export default defineComponent({
|
||||
const store = useStore();
|
||||
const state = reactive({
|
||||
currentRouteMeta: {},
|
||||
linkHeight: '',
|
||||
});
|
||||
// 初始化获取当前路由 meta
|
||||
const initGetMeta = () => {
|
||||
state.currentRouteMeta = route.meta;
|
||||
};
|
||||
// 设置 iframe 的高度
|
||||
const initLinkHeight = () => {
|
||||
// 设置 link 的高度
|
||||
const setLinkHeight = computed(() => {
|
||||
let { isTagsview } = store.state.themeConfig.themeConfig;
|
||||
if (isTagsview) return (state.linkHeight = `114px`);
|
||||
else return (state.linkHeight = `50px`);
|
||||
};
|
||||
if (isTagsview) return `114px`;
|
||||
else return `80px`;
|
||||
});
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initGetMeta();
|
||||
initLinkHeight();
|
||||
});
|
||||
return {
|
||||
setLinkHeight,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
|
||||
@ -41,9 +41,16 @@ export default defineComponent({
|
||||
onBeforeMount(() => {
|
||||
state.keepAliveNameList = getKeepAliveNames.value;
|
||||
proxy.mittBus.on('onTagsViewRefreshRouterView', (path: string) => {
|
||||
// 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
|
||||
if (route.meta.isDynamic) {
|
||||
// 动态路由（xxx/:id/:name）
|
||||
if (route.meta.isDynamicPath !== path) return false;
|
||||
} else {
|
||||
// 普通路由
|
||||
if (route.path !== path) return false;
|
||||
}
|
||||
state.keepAliveNameList = getKeepAliveNames.value.filter((name: string) => route.name !== name);
|
||||
state.refreshRouterViewKey = route.path;
|
||||
state.refreshRouterViewKey = route.meta.isDynamic ? route.meta.isDynamicPath : route.path;
|
||||
nextTick(() => {
|
||||
state.refreshRouterViewKey = null;
|
||||
state.keepAliveNameList = getKeepAliveNames.value;
|
||||
|
||||
@ -57,6 +57,12 @@ export function formatTwoStageRoutes(arr: any) {
|
||||
if (v.path === '/') {
|
||||
newArr.push({ component: v.component, name: v.name, path: v.path, redirect: v.redirect, meta: v.meta, children: [] });
|
||||
} else {
|
||||
// 判断是否是动态路由（xx/:id/:name），用于 tagsView 等中使用
|
||||
// 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
|
||||
if (v.path.indexOf('/:') > -1) {
|
||||
v.meta['isDynamic'] = true;
|
||||
v.meta['isDynamicPath'] = v.path;
|
||||
}
|
||||
newArr[0].children.push({ ...v });
|
||||
// 存 name 值，keep-alive 中 include 使用，实现路由的缓存
|
||||
// 路径：/@/layout/routerView/parent.vue
|
||||
|
||||
@ -800,6 +800,99 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
icon: 'el-icon-thumb',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/pages/lazyImg',
|
||||
name: 'pagesLazyImg',
|
||||
component: () => import('/@/views/pages/lazyImg/index.vue'),
|
||||
meta: {
|
||||
title: 'message.router.pagesLazyImg',
|
||||
isLink: '',
|
||||
isHide: false,
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin'],
|
||||
icon: 'el-icon-picture-outline',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '/params',
|
||||
name: 'paramsIndex',
|
||||
component: () => import('/@/layout/routerView/parent.vue'),
|
||||
redirect: '/params/common',
|
||||
meta: {
|
||||
title: 'message.router.paramsIndex',
|
||||
isLink: '',
|
||||
isHide: false,
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
icon: 'iconfont icon-zhongduancanshu',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: '/params/common',
|
||||
name: 'paramsCommon',
|
||||
component: () => import('/@/views/params/common/index.vue'),
|
||||
meta: {
|
||||
title: 'message.router.paramsCommon',
|
||||
isLink: '',
|
||||
isHide: false,
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin'],
|
||||
icon: 'iconfont icon-putong',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/params/common/details',
|
||||
name: 'paramsCommonDetails',
|
||||
component: () => import('/@/views/params/common/details.vue'),
|
||||
meta: {
|
||||
title: 'message.router.paramsCommonDetails',
|
||||
isLink: '',
|
||||
isHide: true,
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin'],
|
||||
icon: 'el-icon-s-order',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/params/dynamic',
|
||||
name: 'paramsDynamic',
|
||||
component: () => import('/@/views/params/dynamic/index.vue'),
|
||||
meta: {
|
||||
title: 'message.router.paramsDynamic',
|
||||
isLink: '',
|
||||
isHide: false,
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin'],
|
||||
icon: 'iconfont icon-dongtai',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/params/dynamic/details/:t/:id',
|
||||
name: 'paramsDynamicDetails',
|
||||
component: () => import('/@/views/params/dynamic/details.vue'),
|
||||
meta: {
|
||||
title: 'message.router.paramsDynamicDetails',
|
||||
isLink: '',
|
||||
isHide: true,
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin'],
|
||||
icon: 'el-icon-s-order',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
@ -106,6 +106,7 @@ const themeConfigModule: Module<ThemeConfigState, RootStateTypes> = {
|
||||
* 其它设置
|
||||
*/
|
||||
// Tagsview 风格：可选值"<tags-style-one|tags-style-two|tags-style-three|tags-style-four>"，默认 tags-style-one
|
||||
// 定义的值与 `/src/layout/navBars/tagsView/tagsView.vue` 中的 class 同名
|
||||
tagsStyle: 'tags-style-one',
|
||||
// 主页面切换动画：可选值"<slide-right|slide-left|opacitys>"，默认 slide-right
|
||||
animation: 'slide-right',
|
||||
|
||||
@ -760,7 +760,7 @@
|
||||
.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
|
||||
border-bottom: 3px solid !important;
|
||||
border-bottom-color: set-color(primary);
|
||||
color: set-color(primary);
|
||||
color: set-color(primary) !important;
|
||||
}
|
||||
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
|
||||
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover,
|
||||
@ -768,7 +768,7 @@
|
||||
.el-menu--horizontal > .el-submenu:hover .el-submenu__title,
|
||||
.el-menu--horizontal .el-menu .el-menu-item.is-active,
|
||||
.el-menu--horizontal .el-menu .el-submenu.is-active > .el-submenu__title {
|
||||
color: set-color(primary);
|
||||
color: set-color(primary) !important;
|
||||
}
|
||||
.el-menu.el-menu--horizontal {
|
||||
border-bottom: none !important;
|
||||
|
||||
25
src/utils/lazyImgLoading.ts
Normal file
25
src/utils/lazyImgLoading.ts
Normal file
@ -0,0 +1,25 @@
|
||||
import { nextTick } from 'vue';
|
||||
|
||||
/**
|
||||
* 图片懒加载
|
||||
* @param el dom 目标元素
|
||||
* @param arr 列表数据
|
||||
* @description data-xxx 属性用于存储页面或应用程序的私有自定义数据
|
||||
*/
|
||||
export const lazyImgLoading = (el: any, arr: any) => {
|
||||
const io = new IntersectionObserver((res) => {
|
||||
res.forEach((v: any) => {
|
||||
if (v.isIntersecting) {
|
||||
const { img, key } = v.target.dataset;
|
||||
v.target.src = img;
|
||||
v.target.onload = () => {
|
||||
io.unobserve(v.target);
|
||||
arr[key]['loading'] = false;
|
||||
};
|
||||
}
|
||||
});
|
||||
});
|
||||
nextTick(() => {
|
||||
document.querySelectorAll(el).forEach((img) => io.observe(img));
|
||||
});
|
||||
};
|
||||
@ -1,6 +1,6 @@
|
||||
// 字体图标 url
|
||||
const cssCdnUrlList: Array<string> = [
|
||||
'//at.alicdn.com/t/font_2298093_ke79kmw5s7r.css',
|
||||
'//at.alicdn.com/t/font_2298093_h8g6cpatww5.css',
|
||||
'//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css',
|
||||
];
|
||||
// 第三方 js url
|
||||
|
||||
20
src/utils/setWebTitle.ts
Normal file
20
src/utils/setWebTitle.ts
Normal file
@ -0,0 +1,20 @@
|
||||
import { nextTick } from 'vue';
|
||||
import router from '/@/router/index';
|
||||
import { store } from '/@/store/index';
|
||||
import { i18n } from '/@/i18n/index';
|
||||
|
||||
/**
|
||||
* 设置浏览器标题国际化
|
||||
*/
|
||||
export function useTitle() {
|
||||
return () => {
|
||||
nextTick(() => {
|
||||
let webTitle = '';
|
||||
let globalTitle: string = store.state.themeConfig.themeConfig.globalTitle;
|
||||
router.currentRoute.value.path === '/login'
|
||||
? (webTitle = router.currentRoute.value.meta.title as any)
|
||||
: (webTitle = i18n.global.t(router.currentRoute.value.meta.title as any));
|
||||
document.title = `${webTitle} - ${globalTitle}` || globalTitle;
|
||||
});
|
||||
};
|
||||
}
|
||||
@ -150,7 +150,7 @@ export default {
|
||||
new CountUp('tipNum3', Math.random() * 1000).start();
|
||||
});
|
||||
};
|
||||
// 实验室使用情况
|
||||
// 商品销售情
|
||||
const initHomeLaboratory = () => {
|
||||
const myChart = echarts.init(proxy.$refs.homeLaboratoryRef);
|
||||
const option = {
|
||||
@ -167,8 +167,28 @@ export default {
|
||||
data: ['预购队列', '最新成交价'],
|
||||
right: 13,
|
||||
},
|
||||
color: [
|
||||
'#63caff',
|
||||
'#49beff',
|
||||
'#03387a',
|
||||
'#03387a',
|
||||
'#03387a',
|
||||
'#6c93ee',
|
||||
'#a9abff',
|
||||
'#f7a23f',
|
||||
'#27bae7',
|
||||
'#ff6d9d',
|
||||
'#cb79ff',
|
||||
'#f95b5a',
|
||||
'#ccaf27',
|
||||
'#38b99c',
|
||||
'#93d0ff',
|
||||
'#bd74e0',
|
||||
'#fd77da',
|
||||
'#dea700',
|
||||
],
|
||||
xAxis: {
|
||||
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
|
||||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
@ -180,12 +200,36 @@ export default {
|
||||
{
|
||||
name: '预购队列',
|
||||
type: 'bar',
|
||||
data: [5, 20, 36, 10, 10, 20],
|
||||
data: [200, 85, 112, 275, 305, 415, 441, 405, 275, 305, 415, 441],
|
||||
itemStyle: {
|
||||
barBorderRadius: [4, 4, 0, 0],
|
||||
color: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
type: 'linear',
|
||||
global: false,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#0b9eff',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#63caff',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '最新成交价',
|
||||
type: 'line',
|
||||
data: [15, 20, 16, 20, 30, 8],
|
||||
data: [50, 85, 22, 155, 170, 25, 224, 245, 285, 300, 415, 641],
|
||||
itemStyle: {
|
||||
color: '#febb50',
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
@ -113,7 +113,6 @@ export const filterList = [
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 1,
|
||||
isShowMore: false,
|
||||
},
|
||||
{
|
||||
img: 'http://www.sznews.com/news/pic/2020-08/13/0ea47d3c-feb9-4bd7-8597-a8a373aa6340c6ec12c7-3b33-4528-91a6-85ec8ca1df67_watermark.png',
|
||||
@ -123,7 +122,6 @@ export const filterList = [
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 2,
|
||||
isShowMore: false,
|
||||
},
|
||||
{
|
||||
img: 'http://www.sznews.com/photo/pic/2020-08/12/a08d6eb0-1d53-4f76-a313-ad3e5d701f98.jpg',
|
||||
@ -133,7 +131,6 @@ export const filterList = [
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 3,
|
||||
isShowMore: false,
|
||||
},
|
||||
{
|
||||
img: 'http://www.sznews.com/photo/pic/2020-08/11/43cc0e14-9bca-45b9-9a8b-342e09d6a4c7.jpg',
|
||||
@ -143,7 +140,6 @@ export const filterList = [
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 4,
|
||||
isShowMore: false,
|
||||
},
|
||||
{
|
||||
img: 'http://www.sznews.com/photo/pic/2020-08/11/a4dc322b-68ec-40e6-8906-3124142c3e49.jpg',
|
||||
@ -153,7 +149,6 @@ export const filterList = [
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 5,
|
||||
isShowMore: false,
|
||||
},
|
||||
{
|
||||
img: 'http://www.sznews.com/zhuanti/pic/2020-08/07/57f087b4-4812-46cc-adb9-ead73621284e.png',
|
||||
@ -163,7 +158,6 @@ export const filterList = [
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 6,
|
||||
isShowMore: false,
|
||||
},
|
||||
{
|
||||
img: 'http://news.sznews.com/pic/2020-09/02/t2_(101X54X600X335)7cd39301-d9cf-45f1-91c3-9575b1e5ce0e.jpg.2',
|
||||
@ -173,7 +167,6 @@ export const filterList = [
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 7,
|
||||
isShowMore: false,
|
||||
},
|
||||
{
|
||||
img: 'http://news.sznews.com/pic/2020-09/02/b8b41d9c-0508-4498-8d37-6e597493769f.jpg',
|
||||
@ -183,7 +176,6 @@ export const filterList = [
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 8,
|
||||
isShowMore: false,
|
||||
},
|
||||
{
|
||||
img: 'http://www.sznews.com/photo/pic/2020-08/10/1635374c-f4d6-475c-ac47-1334176f365d.png',
|
||||
@ -193,7 +185,6 @@ export const filterList = [
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 9,
|
||||
isShowMore: false,
|
||||
},
|
||||
{
|
||||
img: 'http://www.sznews.com/news/pic/2020-08/13/646e5458-92b7-4636-9940-9b0799babfe1.png',
|
||||
@ -203,6 +194,5 @@ export const filterList = [
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 10,
|
||||
isShowMore: false,
|
||||
},
|
||||
];
|
||||
|
||||
193
src/views/pages/lazyImg/index.vue
Normal file
193
src/views/pages/lazyImg/index.vue
Normal file
@ -0,0 +1,193 @@
|
||||
<template>
|
||||
<div class="lazy-img-container">
|
||||
<el-card shadow="hover" header="图片懒加载演示（F12 切换到 Network Img下进行图片加载查看）">
|
||||
<div class="flex-warp" v-if="tableData.data.length > 0">
|
||||
<el-row :gutter="15">
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15" v-for="(v, k) in tableData.data" :key="k" @click="onTableItemClick(v)">
|
||||
<div class="flex-warp-item">
|
||||
<div class="flex-warp-item-box">
|
||||
<div class="item-img" v-loading="v.loading">
|
||||
<img :data-img="v.img" :data-key="k" :data-lazy-img-list="k" />
|
||||
</div>
|
||||
<div class="item-txt">
|
||||
<div class="item-txt-title">{{ v.title }}</div>
|
||||
<div class="item-txt-other">
|
||||
<div style="width: 100%">
|
||||
<div class="item-txt-msg mb10">
|
||||
<span>评价 {{ v.evaluate }}</span>
|
||||
<span class="ml10">收藏 {{ v.collection }}</span>
|
||||
</div>
|
||||
<div class="item-txt-msg item-txt-price">
|
||||
<span class="font-price">
|
||||
<span>￥</span>
|
||||
<span class="font">{{ v.price }}</span>
|
||||
</span>
|
||||
<span>月销{{ v.monSales }}笔</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<el-empty v-else description="暂无数据"></el-empty>
|
||||
<template v-if="tableData.data.length > 0">
|
||||
<el-pagination
|
||||
style="text-align: right"
|
||||
background
|
||||
@size-change="onHandleSizeChange"
|
||||
@current-change="onHandleCurrentChange"
|
||||
:page-sizes="[10, 20, 30]"
|
||||
:current-page="tableData.param.pageNum"
|
||||
:page-size="tableData.param.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="tableData.total"
|
||||
>
|
||||
</el-pagination>
|
||||
</template>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, onMounted } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { lazyImgLoading } from '/@/utils/lazyImgLoading';
|
||||
import { filterList } from './mock';
|
||||
export default {
|
||||
name: 'pagesListAdapt',
|
||||
setup() {
|
||||
const router = useRouter();
|
||||
const state = reactive({
|
||||
tableData: {
|
||||
data: filterList,
|
||||
total: 99,
|
||||
loading: false,
|
||||
param: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
},
|
||||
});
|
||||
// 当前列表项点击
|
||||
const onTableItemClick = (v: object) => {
|
||||
router.push({
|
||||
path: '/pages/filteringDetails',
|
||||
query: { id: v.id },
|
||||
});
|
||||
};
|
||||
// 分页点击
|
||||
const onHandleSizeChange = (val: number) => {
|
||||
state.tableData.param.pageSize = val;
|
||||
};
|
||||
// 分页点击
|
||||
const onHandleCurrentChange = (val: number) => {
|
||||
state.tableData.param.pageNum = val;
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
lazyImgLoading('[data-lazy-img-list]', state.tableData.data);
|
||||
});
|
||||
return {
|
||||
onTableItemClick,
|
||||
onHandleSizeChange,
|
||||
onHandleCurrentChange,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.lazy-img-container {
|
||||
.flex-warp {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
margin: 0 -5px;
|
||||
.flex-warp-item {
|
||||
padding: 5px;
|
||||
width: 100%;
|
||||
height: 360px;
|
||||
.flex-warp-item-box {
|
||||
border: 1px solid #ebeef5;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: all 0.3s ease;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--color-primary);
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
|
||||
.item-txt-title {
|
||||
color: var(--color-primary) !important;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.item-img {
|
||||
img {
|
||||
transition: all 0.3s ease;
|
||||
transform: translateZ(0) scale(1.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
.item-img {
|
||||
width: 100%;
|
||||
height: 215px;
|
||||
overflow: hidden;
|
||||
img {
|
||||
transition: all 0.3s ease;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.item-txt {
|
||||
flex: 1;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
.item-txt-title {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
display: -webkit-box;
|
||||
color: #666666;
|
||||
transition: all 0.3s ease;
|
||||
&:hover {
|
||||
color: var(--color-primary);
|
||||
text-decoration: underline;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
.item-txt-other {
|
||||
flex: 1;
|
||||
align-items: flex-end;
|
||||
display: flex;
|
||||
.item-txt-msg {
|
||||
font-size: 12px;
|
||||
color: #8d8d91;
|
||||
}
|
||||
.item-txt-price {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.font-price {
|
||||
color: #ff5000;
|
||||
.font {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
313
src/views/pages/lazyImg/mock.ts
Normal file
313
src/views/pages/lazyImg/mock.ts
Normal file
@ -0,0 +1,313 @@
|
||||
// 列表数据
|
||||
export const filterList = [
|
||||
{
|
||||
img: 'https://news.sznews.com/pic/2021-03/09/e37326cc-4583-48f3-aa00-ecc2392d319d.jpg',
|
||||
title: '36分钟，深圳平均通勤时间出炉！GDP10强城市中仅输杭州',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 1,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://news.sznews.com/pic/2021-03/09/78cf72b6-e2d9-459d-a368-470414a027f4679cf4ea-26fa-48c8-9fee-c2d092a91400.png',
|
||||
title: '为爱而动，“红色鹊桥”三八妇女节交友联谊活动助力深圳女孩脱单',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 2,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://news.sznews.com/pic/2021-03/09/1faf3c6e-1250-4e6b-b072-4a331553e027.jpg',
|
||||
title: '粤桂协作“背水一战” 解决广西大化县3.7万人饮水难题',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 3,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'https://news.sznews.com/pic/2021-03/09/9fcf6dd4-1e80-4497-bdc9-83dc7246d170.jpg.2',
|
||||
title: '城镇就业女性平均薪酬6847元 女性职场渗透率提升',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 4,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'https://news.sznews.com/pic/2021-03/09/1bd78227-4126-4a43-bdf6-48ead6edd1bf.jpg.2',
|
||||
title: '深圳：实现“从0到1”源头创新，推进大湾区综合性国家科学中心建设！',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 5,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://news.sznews.com/pic/2021-03/08/9ea943a3-3ae8-4f49-8296-711ec36ef8c6_watermark.png',
|
||||
title: '煖声音第126期|愿你有诗酒趁年华的洒脱，也有岁月沉淀后的坚定从容',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 6,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'https://news.sznews.com/pic/2021-03/08/a95ba232-1422-4f7e-b85f-c61d486c8659.jpg.2',
|
||||
title: '姐妹们一起来吐槽，最不能接受男人的缺点！',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 7,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://news.sznews.com/pic/2021-03/08/76816bf0-3899-4c7e-bc6e-079b5ba8725e.jpg',
|
||||
title: '民生小事 | 手机遗落出租车 热心民警帮找回',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 8,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'https://news.sznews.com/pic/2021-03/08/28ed70d4-71f5-4abb-bf7b-0294bece9e43.jpg.2',
|
||||
title: '“十三五”：深圳交上靓丽答卷 发展动力加快转换',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 9,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://news.sznews.com/pic/2021-03/05/d13ae31f-fd45-431a-b48e-c5895bbc193e.png',
|
||||
title: '深圳湾公园一女子落水，三名男子接力及时施救',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 10,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210704/653/w930h523/20210704/d5d2-krwipas6444058.jpg',
|
||||
title: '36分钟，深圳平均通勤时间出炉！GDP10强城市中仅输杭州',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 1,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210704/766/w930h636/20210704/b1ae-krwipas6332914.jpg',
|
||||
title: '为爱而动，“红色鹊桥”三八妇女节交友联谊活动助力深圳女孩脱单',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 2,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210704/750/w930h620/20210704/2886-krwipas6264821.jpg',
|
||||
title: '粤桂协作“背水一战” 解决广西大化县3.7万人饮水难题',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 3,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210704/750/w930h620/20210704/767c-krwipas6387862.jpg',
|
||||
title: '城镇就业女性平均薪酬6847元 女性职场渗透率提升',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 4,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210704/111/w1024h687/20210704/1f65-krwipas5871436.jpg',
|
||||
title: '盛夏的那考河湿地公园！',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 5,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210704/657/w930h527/20210704/7eae-krwipas5866609.jpg',
|
||||
title: '煖声音第126期|愿你有诗酒趁年华的洒脱，也有岁月沉淀后的坚定从容',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 6,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210703/760/w930h630/20210703/124e-krwipas5596390.jpg',
|
||||
title: '姐妹们一起来吐槽，最不能接受男人的缺点！',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 7,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210703/27/w930h697/20210703/9630-krwipas5514972.jpg',
|
||||
title: '民生小事 | 手机遗落出租车 热心民警帮找回',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 8,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210703/750/w930h620/20210703/2fe3-krwipas5388050.jpg',
|
||||
title: '“十三五”：深圳交上靓丽答卷 发展动力加快转换',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 9,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210703/724/w930h594/20210703/98b6-krwipas5234060.jpg',
|
||||
title: '深圳湾公园一女子落水，三名男子接力及时施救',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 10,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210703/750/w930h620/20210703/f765-krwipas5194727.jpg',
|
||||
title: '36分钟，深圳平均通勤时间出炉！GDP10强城市中仅输杭州',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 1,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210702/750/w930h620/20210702/5dde-krwipas4724976.jpg',
|
||||
title: '为爱而动，“红色鹊桥”三八妇女节交友联谊活动助力深圳女孩脱单',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 2,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210702/750/w930h620/20210702/f45e-krwipas4566804.jpg',
|
||||
title: '粤桂协作“背水一战” 解决广西大化县3.7万人饮水难题',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 3,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210702/750/w930h620/20210702/5579-krwipas4551382.jpg',
|
||||
title: '城镇就业女性平均薪酬6847元 女性职场渗透率提升',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 4,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210702/750/w930h620/20210702/7c75-krwipas4543661.jpg',
|
||||
title: '深圳：实现“从0到1”源头创新，推进大湾区综合性国家科学中心建设！',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 5,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210702/653/w930h523/20210702/ece2-krwipas4411140.jpg',
|
||||
title: '煖声音第126期|愿你有诗酒趁年华的洒脱，也有岁月沉淀后的坚定从容',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 6,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210702/750/w930h620/20210702/f5c2-krwipas4215211.jpg',
|
||||
title: '姐妹们一起来吐槽，最不能接受男人的缺点！',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 7,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210701/720/w930h590/20210701/eabc-krwipas3509204.jpg',
|
||||
title: '民生小事 | 手机遗落出租车 热心民警帮找回',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 8,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210701/797/w930h667/20210701/4667-krwipas3365057.jpg',
|
||||
title: '“十三五”：深圳交上靓丽答卷 发展动力加快转换',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 9,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210701/750/w930h620/20210701/baea-krwipas2976622.jpg',
|
||||
title: '民众前往中共一大纪念馆参观',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 10,
|
||||
loading: true,
|
||||
},
|
||||
{
|
||||
img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210630/617/w850h567/20210630/5c96-krwipas1819108.jpg',
|
||||
title: '延吉灯光秀美轮美奂 市民徜徉璀璨夜景',
|
||||
evaluate: (Math.random() * 10).toFixed(2),
|
||||
collection: (Math.random() * 100).toFixed(2),
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 10,
|
||||
loading: true,
|
||||
},
|
||||
];
|
||||
@ -8,7 +8,6 @@ export const filterList = [
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 1,
|
||||
isShowMore: false,
|
||||
},
|
||||
{
|
||||
img: 'http://news.sznews.com/pic/2021-03/09/78cf72b6-e2d9-459d-a368-470414a027f4679cf4ea-26fa-48c8-9fee-c2d092a91400.png',
|
||||
@ -18,7 +17,6 @@ export const filterList = [
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 2,
|
||||
isShowMore: false,
|
||||
},
|
||||
{
|
||||
img: 'http://news.sznews.com/pic/2021-03/09/1faf3c6e-1250-4e6b-b072-4a331553e027.jpg',
|
||||
@ -28,7 +26,6 @@ export const filterList = [
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 3,
|
||||
isShowMore: false,
|
||||
},
|
||||
{
|
||||
img: 'https://news.sznews.com/pic/2021-03/09/9fcf6dd4-1e80-4497-bdc9-83dc7246d170.jpg.2',
|
||||
@ -38,7 +35,6 @@ export const filterList = [
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 4,
|
||||
isShowMore: false,
|
||||
},
|
||||
{
|
||||
img: 'https://news.sznews.com/pic/2021-03/09/1bd78227-4126-4a43-bdf6-48ead6edd1bf.jpg.2',
|
||||
@ -48,7 +44,6 @@ export const filterList = [
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 5,
|
||||
isShowMore: false,
|
||||
},
|
||||
{
|
||||
img: 'http://news.sznews.com/pic/2021-03/08/9ea943a3-3ae8-4f49-8296-711ec36ef8c6_watermark.png',
|
||||
@ -58,7 +53,6 @@ export const filterList = [
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 6,
|
||||
isShowMore: false,
|
||||
},
|
||||
{
|
||||
img: 'https://news.sznews.com/pic/2021-03/08/a95ba232-1422-4f7e-b85f-c61d486c8659.jpg.2',
|
||||
@ -68,7 +62,6 @@ export const filterList = [
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 7,
|
||||
isShowMore: false,
|
||||
},
|
||||
{
|
||||
img: 'http://news.sznews.com/pic/2021-03/08/76816bf0-3899-4c7e-bc6e-079b5ba8725e.jpg',
|
||||
@ -78,7 +71,6 @@ export const filterList = [
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 8,
|
||||
isShowMore: false,
|
||||
},
|
||||
{
|
||||
img: 'https://news.sznews.com/pic/2021-03/08/28ed70d4-71f5-4abb-bf7b-0294bece9e43.jpg.2',
|
||||
@ -88,7 +80,6 @@ export const filterList = [
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 9,
|
||||
isShowMore: false,
|
||||
},
|
||||
{
|
||||
img: 'http://news.sznews.com/pic/2021-03/05/d13ae31f-fd45-431a-b48e-c5895bbc193e.png',
|
||||
@ -98,6 +89,5 @@ export const filterList = [
|
||||
price: (Math.random() * 10).toFixed(2),
|
||||
monSales: (Math.random() * 20).toFixed(2),
|
||||
id: 10,
|
||||
isShowMore: false,
|
||||
},
|
||||
];
|
||||
|
||||
39
src/views/params/common/details.vue
Normal file
39
src/views/params/common/details.vue
Normal file
@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<div class="layout-view-bg-white flex" :style="{ height: `calc(100vh - ${setViewHeight}` }">
|
||||
<div class="flex-margin color-primary">
|
||||
<div>paramsCommonDetails</div>
|
||||
<div class="mt10 mb10">路径：path: {{ params.path }}</div>
|
||||
<div>参数：query: {{ params.query }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, toRefs, reactive, computed, onMounted } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useStore } from '/@/store/index';
|
||||
export default defineComponent({
|
||||
name: 'paramsCommonDetails',
|
||||
setup() {
|
||||
const route = useRoute();
|
||||
const store = useStore();
|
||||
const state = reactive({
|
||||
params: {},
|
||||
});
|
||||
// 设置 view 的高度
|
||||
const setViewHeight = computed(() => {
|
||||
let { isTagsview } = store.state.themeConfig.themeConfig;
|
||||
if (isTagsview) return `114px`;
|
||||
else return `80px`;
|
||||
});
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
state.params = route;
|
||||
});
|
||||
return {
|
||||
setViewHeight,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
46
src/views/params/common/index.vue
Normal file
46
src/views/params/common/index.vue
Normal file
@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<div class="layout-view-bg-white flex" :style="{ height: `calc(100vh - ${setViewHeight}` }">
|
||||
<div class="flex-margin">
|
||||
<el-result icon="success" title="普通路由" subTitle="请根据提示进行操作">
|
||||
<template #extra>
|
||||
<el-button type="primary" size="small" icon="iconfont icon-putong" @click="onGoDetailsClick">点击测试普通路由传参</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, toRefs, reactive, computed } from 'vue';
|
||||
import { useStore } from '/@/store/index';
|
||||
import { useRouter } from 'vue-router';
|
||||
export default defineComponent({
|
||||
name: 'paramsCommon',
|
||||
setup() {
|
||||
const store = useStore();
|
||||
const state = reactive({});
|
||||
const router = useRouter();
|
||||
// 设置 view 的高度
|
||||
const setViewHeight = computed(() => {
|
||||
let { isTagsview } = store.state.themeConfig.themeConfig;
|
||||
if (isTagsview) return `114px`;
|
||||
else return `80px`;
|
||||
});
|
||||
// 跳转到详情
|
||||
const onGoDetailsClick = () => {
|
||||
router.push({
|
||||
path: '/params/common/details',
|
||||
query: {
|
||||
t: new Date().getTime(),
|
||||
id: Math.random(),
|
||||
},
|
||||
});
|
||||
};
|
||||
return {
|
||||
setViewHeight,
|
||||
onGoDetailsClick,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
39
src/views/params/dynamic/details.vue
Normal file
39
src/views/params/dynamic/details.vue
Normal file
@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<div class="layout-view-bg-white flex" :style="{ height: `calc(100vh - ${setViewHeight}` }">
|
||||
<div class="flex-margin color-primary">
|
||||
<div>paramsDynamicDetails</div>
|
||||
<div class="mt10 mb10">路径：path: {{ params.path }}</div>
|
||||
<div>参数：params: {{ params.params }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, toRefs, reactive, computed, onMounted } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useStore } from '/@/store/index';
|
||||
export default defineComponent({
|
||||
name: 'paramsDynamicDetails',
|
||||
setup() {
|
||||
const route = useRoute();
|
||||
const store = useStore();
|
||||
const state = reactive({
|
||||
params: {},
|
||||
});
|
||||
// 设置 view 的高度
|
||||
const setViewHeight = computed(() => {
|
||||
let { isTagsview } = store.state.themeConfig.themeConfig;
|
||||
if (isTagsview) return `114px`;
|
||||
else return `80px`;
|
||||
});
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
state.params = route;
|
||||
});
|
||||
return {
|
||||
setViewHeight,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
49
src/views/params/dynamic/index.vue
Normal file
49
src/views/params/dynamic/index.vue
Normal file
@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<div class="layout-view-bg-white flex" :style="{ height: `calc(100vh - ${setViewHeight}` }">
|
||||
<div class="flex-margin">
|
||||
<el-result icon="warning" title="动态路由" subTitle="请根据提示进行操作">
|
||||
<template #extra>
|
||||
<el-button type="primary" size="small" icon="iconfont icon-dongtai" @click="onGoDetailsClick">点击测试动态路由传参</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, toRefs, reactive, computed } from 'vue';
|
||||
import { useStore } from '/@/store/index';
|
||||
import { useRouter } from 'vue-router';
|
||||
export default defineComponent({
|
||||
name: 'paramsDynamic',
|
||||
setup() {
|
||||
const store = useStore();
|
||||
const state = reactive({});
|
||||
const router = useRouter();
|
||||
// 设置 view 的高度
|
||||
const setViewHeight = computed(() => {
|
||||
let { isTagsview } = store.state.themeConfig.themeConfig;
|
||||
if (isTagsview) return `114px`;
|
||||
else return `80px`;
|
||||
});
|
||||
// 跳转到详情
|
||||
const onGoDetailsClick = () => {
|
||||
// name 值为路由中的 name
|
||||
const t = new Date().getTime();
|
||||
const id = Math.random();
|
||||
router.push({
|
||||
name: 'paramsDynamicDetails',
|
||||
params: {
|
||||
t,
|
||||
id,
|
||||
},
|
||||
});
|
||||
};
|
||||
return {
|
||||
setViewHeight,
|
||||
onGoDetailsClick,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user