mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-06-04 07:27:41 +08:00
chore: 优化演示示例
This commit is contained in:
xiaoxian521
parent
7b228f4784
commit
44c541126a
@ -76,14 +76,16 @@ menus:
|
||||
hsPrint: Print
|
||||
hsDownload: Download
|
||||
hsExternalPage: External Page
|
||||
hsPureDocument: Pure Doc(Embedded)
|
||||
externalLink: Pure Doc(External)
|
||||
hsEpDocument: Element Plus Doc(Embedded)
|
||||
hsVueDocument: Vue3 Doc(Embedded)
|
||||
hsViteDocument: Vite Doc(Embedded)
|
||||
hsPiniaDocument: Pinia Doc(Embedded)
|
||||
hsRouterDocument: Vue Router Doc(Embedded)
|
||||
hsTailwindcssDocument: Tailwindcss Doc(Embedded)
|
||||
hsExternalDoc: Docs External
|
||||
hsEmbeddedDoc: Docs Embedded
|
||||
externalLink: Vue-Pure-Admin
|
||||
pureutilsLink: Pure-Admin-Utils
|
||||
hsEpDocument: Element-Plus
|
||||
hsTailwindcssDocument: Tailwindcss
|
||||
hsVueDocument: Vue3
|
||||
hsViteDocument: Vite
|
||||
hsPiniaDocument: Pinia
|
||||
hsRouterDocument: Vue-Router
|
||||
hsAbout: About
|
||||
hsResult: Result Page
|
||||
hsSuccess: Success Page
|
||||
|
||||
@ -76,14 +76,16 @@ menus:
|
||||
hsPrint: 打印
|
||||
hsDownload: 下载
|
||||
hsExternalPage: 外部页面
|
||||
hsPureDocument: 平台文档（内嵌）
|
||||
externalLink: 平台文档（外链）
|
||||
hsEpDocument: Element Plus 文档（内嵌）
|
||||
hsVueDocument: Vue3 文档（内嵌）
|
||||
hsViteDocument: Vite 文档（内嵌）
|
||||
hsPiniaDocument: Pinia 文档（内嵌）
|
||||
hsRouterDocument: Vue Router 文档（内嵌）
|
||||
hsTailwindcssDocument: Tailwindcss 文档（内嵌）
|
||||
hsExternalDoc: 文档外链
|
||||
hsEmbeddedDoc: 文档内嵌
|
||||
externalLink: vue-pure-admin
|
||||
pureutilsLink: pure-admin-utils
|
||||
hsEpDocument: element-plus
|
||||
hsTailwindcssDocument: tailwindcss
|
||||
hsVueDocument: vue3
|
||||
hsViteDocument: vite
|
||||
hsPiniaDocument: pinia
|
||||
hsRouterDocument: vue-router
|
||||
hsAbout: 关于
|
||||
hsResult: 结果页面
|
||||
hsSuccess: 成功页面
|
||||
|
||||
@ -83,75 +83,90 @@ const frameRouter = {
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "/iframe/pure",
|
||||
name: "FramePure",
|
||||
path: "/iframe/external",
|
||||
meta: {
|
||||
title: "menus.hsPureDocument",
|
||||
frameSrc: "https://yiming_chang.gitee.io/pure-admin-doc",
|
||||
roles: ["admin", "common"]
|
||||
}
|
||||
title: "menus.hsExternalDoc"
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "/external",
|
||||
name: "https://yiming_chang.gitee.io/pure-admin-doc",
|
||||
meta: {
|
||||
title: "menus.externalLink",
|
||||
roles: ["admin", "common"]
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/pureutilsLink",
|
||||
name: "https://pure-admin-utils.netlify.app/",
|
||||
meta: {
|
||||
title: "menus.pureutilsLink",
|
||||
roles: ["admin", "common"]
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: "/external",
|
||||
name: "https://yiming_chang.gitee.io/pure-admin-doc",
|
||||
path: "/iframe/embedded",
|
||||
meta: {
|
||||
title: "menus.externalLink",
|
||||
roles: ["admin", "common"]
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/iframe/ep",
|
||||
name: "FrameEp",
|
||||
meta: {
|
||||
title: "menus.hsEpDocument",
|
||||
frameSrc: "https://element-plus.org/zh-CN/",
|
||||
roles: ["admin", "common"]
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/iframe/vue3",
|
||||
name: "FrameVue",
|
||||
meta: {
|
||||
title: "menus.hsVueDocument",
|
||||
frameSrc: "https://cn.vuejs.org/",
|
||||
roles: ["admin", "common"]
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/iframe/vite",
|
||||
name: "FrameVite",
|
||||
meta: {
|
||||
title: "menus.hsViteDocument",
|
||||
frameSrc: "https://cn.vitejs.dev/",
|
||||
roles: ["admin", "common"]
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/iframe/pinia",
|
||||
name: "FramePinia",
|
||||
meta: {
|
||||
title: "menus.hsPiniaDocument",
|
||||
frameSrc: "https://pinia.vuejs.org/zh/index.html",
|
||||
roles: ["admin", "common"]
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/iframe/vue-router",
|
||||
name: "FrameRouter",
|
||||
meta: {
|
||||
title: "menus.hsRouterDocument",
|
||||
frameSrc: "https://router.vuejs.org/zh/",
|
||||
roles: ["admin", "common"]
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/iframe/tailwindcss",
|
||||
name: "FrameTailwindcss",
|
||||
meta: {
|
||||
title: "menus.hsTailwindcssDocument",
|
||||
frameSrc: "https://tailwindcss.com/docs/installation",
|
||||
roles: ["admin", "common"]
|
||||
}
|
||||
title: "menus.hsEmbeddedDoc"
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "/iframe/ep",
|
||||
name: "FrameEp",
|
||||
meta: {
|
||||
title: "menus.hsEpDocument",
|
||||
frameSrc: "https://element-plus.org/zh-CN/",
|
||||
roles: ["admin", "common"]
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/iframe/tailwindcss",
|
||||
name: "FrameTailwindcss",
|
||||
meta: {
|
||||
title: "menus.hsTailwindcssDocument",
|
||||
frameSrc: "https://tailwindcss.com/docs/installation",
|
||||
roles: ["admin", "common"]
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/iframe/vue3",
|
||||
name: "FrameVue",
|
||||
meta: {
|
||||
title: "menus.hsVueDocument",
|
||||
frameSrc: "https://cn.vuejs.org/",
|
||||
roles: ["admin", "common"]
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/iframe/vite",
|
||||
name: "FrameVite",
|
||||
meta: {
|
||||
title: "menus.hsViteDocument",
|
||||
frameSrc: "https://cn.vitejs.dev/",
|
||||
roles: ["admin", "common"]
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/iframe/pinia",
|
||||
name: "FramePinia",
|
||||
meta: {
|
||||
title: "menus.hsPiniaDocument",
|
||||
frameSrc: "https://pinia.vuejs.org/zh/index.html",
|
||||
roles: ["admin", "common"]
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/iframe/vue-router",
|
||||
name: "FrameRouter",
|
||||
meta: {
|
||||
title: "menus.hsRouterDocument",
|
||||
frameSrc: "https://router.vuejs.org/zh/",
|
||||
roles: ["admin", "common"]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
@ -159,7 +174,7 @@ const frameRouter = {
|
||||
const tabsRouter = {
|
||||
path: "/tabs",
|
||||
meta: {
|
||||
icon: "IF-pure-iconfont-tabs",
|
||||
icon: "tag",
|
||||
title: "menus.hstabs",
|
||||
rank: tabs
|
||||
},
|
||||
|
||||
@ -25,6 +25,8 @@ import Dept from "@iconify-icons/ri/git-branch-line";
|
||||
import Search from "@iconify-icons/ri/search-line";
|
||||
import Lollipop from "@iconify-icons/ep/lollipop";
|
||||
import Monitor from "@iconify-icons/ep/monitor";
|
||||
import Tag from "@iconify-icons/ri/bookmark-2-line";
|
||||
import Table from "@iconify-icons/ri/table-line";
|
||||
addIcon("ubuntuFill", UbuntuFill);
|
||||
addIcon("menu", Menu);
|
||||
addIcon("edit", Edit);
|
||||
@ -45,3 +47,5 @@ addIcon("dept", Dept);
|
||||
addIcon("search", Search);
|
||||
addIcon("lollipop", Lollipop);
|
||||
addIcon("monitor", Monitor);
|
||||
addIcon("tag", Tag);
|
||||
addIcon("table", Table);
|
||||
|
||||
@ -1,34 +1,30 @@
|
||||
// 完整版菜单比较多，将 rank 抽离出来，在此方便维护
|
||||
|
||||
const home = 0, // 平台规定只有 home 路由的 rank 才能为 0 ，所以后端在返回 rank 的时候需要从 1 开始哦
|
||||
doc = 1,
|
||||
utils = 2,
|
||||
able = 1,
|
||||
components = 2,
|
||||
table = 3,
|
||||
components = 4,
|
||||
able = 5,
|
||||
frame = 6,
|
||||
nested = 7,
|
||||
result = 8,
|
||||
error = 9,
|
||||
list = 10,
|
||||
permission = 11,
|
||||
system = 12,
|
||||
tabs = 13,
|
||||
formdesign = 14,
|
||||
flowchart = 15,
|
||||
ppt = 16,
|
||||
editor = 17,
|
||||
guide = 18,
|
||||
menuoverflow = 19,
|
||||
about = 20;
|
||||
frame = 4,
|
||||
nested = 5,
|
||||
result = 6,
|
||||
error = 7,
|
||||
list = 8,
|
||||
permission = 9,
|
||||
system = 10,
|
||||
tabs = 11,
|
||||
formdesign = 12,
|
||||
flowchart = 13,
|
||||
ppt = 14,
|
||||
editor = 15,
|
||||
guide = 16,
|
||||
about = 17,
|
||||
menuoverflow = 18;
|
||||
|
||||
export {
|
||||
home,
|
||||
doc,
|
||||
utils,
|
||||
table,
|
||||
components,
|
||||
able,
|
||||
components,
|
||||
table,
|
||||
frame,
|
||||
nested,
|
||||
result,
|
||||
@ -42,6 +38,6 @@ export {
|
||||
ppt,
|
||||
editor,
|
||||
guide,
|
||||
menuoverflow,
|
||||
about
|
||||
about,
|
||||
menuoverflow
|
||||
};
|
||||
|
||||
@ -15,8 +15,7 @@ export default {
|
||||
name: "VideoFrame",
|
||||
component: () => import("@/views/able/video-frame/index.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsVideoFrame"),
|
||||
extraIcon: "IF-pure-iconfont-new svg"
|
||||
title: $t("menus.hsVideoFrame")
|
||||
}
|
||||
},
|
||||
{
|
||||
@ -24,8 +23,7 @@ export default {
|
||||
name: "Wavesurfer",
|
||||
component: () => import("@/views/able/wavesurfer/index.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsWavesurfer"),
|
||||
extraIcon: "IF-pure-iconfont-new svg"
|
||||
title: $t("menus.hsWavesurfer")
|
||||
}
|
||||
},
|
||||
{
|
||||
@ -169,8 +167,7 @@ export default {
|
||||
name: "Sensitive",
|
||||
component: () => import("@/views/able/sensitive.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsSensitive"),
|
||||
extraIcon: "IF-pure-iconfont-new svg"
|
||||
title: $t("menus.hsSensitive")
|
||||
}
|
||||
},
|
||||
{
|
||||
@ -178,8 +175,7 @@ export default {
|
||||
name: "Pinyin",
|
||||
component: () => import("@/views/able/pinyin.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsPinyin"),
|
||||
extraIcon: "IF-pure-iconfont-new svg"
|
||||
title: $t("menus.hsPinyin")
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
@ -45,8 +45,7 @@ export default {
|
||||
name: "Waterfall",
|
||||
component: () => import("@/views/components/waterfall/index.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hswaterfall"),
|
||||
extraIcon: "IF-pure-iconfont-new svg"
|
||||
title: $t("menus.hswaterfall")
|
||||
}
|
||||
},
|
||||
{
|
||||
@ -110,8 +109,7 @@ export default {
|
||||
name: "AnimateCss",
|
||||
component: () => import("@/views/components/animatecss/index.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsanimatecss"),
|
||||
extraIcon: "IF-pure-iconfont-new svg"
|
||||
title: $t("menus.hsanimatecss")
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
@ -1,24 +0,0 @@
|
||||
import { doc } from "@/router/enums";
|
||||
import hot from "@/assets/svg/hot.svg?component";
|
||||
const IFrame = () => import("@/layout/frameView.vue");
|
||||
|
||||
export default {
|
||||
path: "/pure-admin-doc",
|
||||
redirect: "/pure-admin-doc/index",
|
||||
meta: {
|
||||
icon: hot,
|
||||
title: "pure-admin-doc",
|
||||
rank: doc
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "/pure-admin-doc/index",
|
||||
name: "FrameDoc",
|
||||
component: IFrame,
|
||||
meta: {
|
||||
title: "pure-admin-doc",
|
||||
frameSrc: "https://yiming_chang.gitee.io/pure-admin-doc/"
|
||||
}
|
||||
}
|
||||
]
|
||||
} satisfies RouteConfigsTable;
|
||||
@ -1,24 +0,0 @@
|
||||
import { utils } from "@/router/enums";
|
||||
import hot from "@/assets/svg/hot.svg?component";
|
||||
const IFrame = () => import("@/layout/frameView.vue");
|
||||
|
||||
export default {
|
||||
path: "/pure-admin-utils",
|
||||
redirect: "/pure-admin-utils/index",
|
||||
meta: {
|
||||
icon: hot,
|
||||
title: "pure-admin-utils",
|
||||
rank: utils
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "/pure-admin-utils/index",
|
||||
name: "FrameUtils",
|
||||
component: IFrame,
|
||||
meta: {
|
||||
title: "pure-admin-utils",
|
||||
frameSrc: "https://pure-admin-utils.netlify.app/"
|
||||
}
|
||||
}
|
||||
]
|
||||
} satisfies RouteConfigsTable;
|
||||
@ -1,12 +1,11 @@
|
||||
import { $t } from "@/plugins/i18n";
|
||||
import { table } from "@/router/enums";
|
||||
import hot from "@/assets/svg/hot.svg?component";
|
||||
|
||||
export default {
|
||||
path: "/pure-table",
|
||||
redirect: "/pure-table/index",
|
||||
meta: {
|
||||
icon: hot,
|
||||
icon: "table",
|
||||
title: "pure-admin-table",
|
||||
rank: table
|
||||
},
|
||||
|
||||
@ -25,7 +25,7 @@ const handleChange = value => {
|
||||
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header> 区域级联选择器 </template>
|
||||
<template #header> <p class="font-medium">区域级联选择器</p> </template>
|
||||
<el-row :gutter="20">
|
||||
<el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
|
||||
@ -19,7 +19,7 @@ const throttleClick = throttle(handle);
|
||||
<div>
|
||||
<el-card class="mb-5" shadow="never">
|
||||
<template #header>
|
||||
<div>防抖：debounce</div>
|
||||
<div class="font-medium">防抖：debounce</div>
|
||||
</template>
|
||||
<div class="mb-5">
|
||||
所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n
|
||||
@ -34,7 +34,7 @@ const throttleClick = throttle(handle);
|
||||
</el-card>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div>节流：throttle</div>
|
||||
<div class="font-medium">节流：throttle</div>
|
||||
</template>
|
||||
<div class="mb-5">
|
||||
所谓节流，就是指连续触发事件但是在 n
|
||||
|
||||
@ -13,12 +13,12 @@ const dataTemplate = new Array(10).fill({
|
||||
});
|
||||
|
||||
const data = ref([]);
|
||||
const disabled = ref(false);
|
||||
const page = ref(0);
|
||||
const total = ref(10);
|
||||
const isBottom = ref(false);
|
||||
|
||||
const load = () => {
|
||||
if (disabled.value) return;
|
||||
if (isBottom.value) return;
|
||||
|
||||
page.value++;
|
||||
if (page.value <= total.value) {
|
||||
@ -26,7 +26,7 @@ const load = () => {
|
||||
}
|
||||
|
||||
if (page.value === total.value) {
|
||||
disabled.value = true;
|
||||
isBottom.value = true;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -46,23 +46,18 @@ const load = () => {
|
||||
）
|
||||
</div>
|
||||
</template>
|
||||
<div>
|
||||
<p class="mb-2">
|
||||
<span>loaded page(total: {{ total }}): {{ page }}, </span>
|
||||
disabled:
|
||||
<el-switch v-model="disabled" :disabled="page >= total" />
|
||||
</p>
|
||||
<el-table
|
||||
v-el-table-infinite-scroll="load"
|
||||
:data="data"
|
||||
:infinite-scroll-disabled="disabled"
|
||||
height="435px"
|
||||
>
|
||||
<el-table-column type="index" />
|
||||
<el-table-column prop="date" label="date" />
|
||||
<el-table-column prop="name" label="name" />
|
||||
<el-table-column prop="age" label="age" />
|
||||
</el-table>
|
||||
</div>
|
||||
<p class="mb-2">{{ isBottom ? "已加载全部页" : `加载到第 ${page} 页` }}</p>
|
||||
<el-table
|
||||
v-el-table-infinite-scroll="load"
|
||||
border
|
||||
height="435px"
|
||||
:data="data"
|
||||
:infinite-scroll-disabled="isBottom"
|
||||
>
|
||||
<el-table-column width="80" type="index" label="序号" />
|
||||
<el-table-column prop="date" label="日期" />
|
||||
<el-table-column prop="name" label="名称" />
|
||||
<el-table-column prop="age" label="年龄" />
|
||||
</el-table>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
@ -35,9 +35,7 @@ const dataProps = {
|
||||
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="mb-[20px]">
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium"> 普通树结构 </span>
|
||||
</div>
|
||||
<div class="card-header">普通树结构</div>
|
||||
</template>
|
||||
<div class="max-h-[550px] overflow-y-auto">
|
||||
<el-tree
|
||||
@ -64,9 +62,7 @@ const dataProps = {
|
||||
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium"> 虚拟树结构 </span>
|
||||
</div>
|
||||
<div class="card-header">虚拟树结构</div>
|
||||
</template>
|
||||
<div class="max-h-[550px] overflow-y-auto">
|
||||
<el-tree-v2
|
||||
|
||||
@ -29,7 +29,7 @@ function onInput() {
|
||||
<el-tag
|
||||
v-for="(word, index) in words"
|
||||
:key="index"
|
||||
type="danger"
|
||||
type="warning"
|
||||
class="mx-1"
|
||||
effect="dark"
|
||||
round
|
||||
|
||||
@ -13,31 +13,31 @@ defineOptions({
|
||||
SwiperCore.use([Autoplay, Navigation, Pagination]);
|
||||
|
||||
const swiperExample: any[] = [
|
||||
{ id: 0, label: "Default", options: {} },
|
||||
{ id: 0, label: "基础滑动", options: {} },
|
||||
{
|
||||
id: 1,
|
||||
label: "Navigation",
|
||||
label: "按钮切换",
|
||||
options: {
|
||||
navigation: true
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: "Pagination",
|
||||
label: "分页器",
|
||||
options: {
|
||||
pagination: true
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
label: "Pagination dynamic",
|
||||
label: "分页器 / 动态指示点",
|
||||
options: {
|
||||
pagination: { dynamicBullets: true }
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: "Pagination progress",
|
||||
label: "分页器 / 进度条",
|
||||
options: {
|
||||
navigation: true,
|
||||
pagination: {
|
||||
@ -47,7 +47,7 @@ const swiperExample: any[] = [
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
label: "Pagination fraction",
|
||||
label: "分页器 / 分式",
|
||||
options: {
|
||||
navigation: true,
|
||||
pagination: {
|
||||
@ -57,7 +57,7 @@ const swiperExample: any[] = [
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
label: "Slides per view",
|
||||
label: "一次显示多个Slides",
|
||||
options: {
|
||||
pagination: {
|
||||
clickable: true
|
||||
@ -68,7 +68,7 @@ const swiperExample: any[] = [
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
label: "Infinite loop",
|
||||
label: "无限循环",
|
||||
options: {
|
||||
autoplay: {
|
||||
delay: 2000,
|
||||
@ -101,11 +101,11 @@ const swiperExample: any[] = [
|
||||
</template>
|
||||
<el-row :gutter="10">
|
||||
<el-col v-for="item in swiperExample" :key="item.id" :span="12">
|
||||
<h6 class="py-[24px] text-[24px] font-bold">{{ item.label }}</h6>
|
||||
<h6 class="py-[16px] text-base">{{ item.label }}</h6>
|
||||
<swiper v-bind="item.options">
|
||||
<swiper-slide v-for="i in 5" :key="i">
|
||||
<div
|
||||
class="flex justify-center items-center h-[240px] border-[1px] border-[#999] text-[18px] font-bold"
|
||||
class="flex justify-center items-center h-[240px] border border-[#999]"
|
||||
>
|
||||
Slide{{ i }}
|
||||
</div>
|
||||
|
||||
@ -67,11 +67,13 @@ const filteredItems = computed(() => {
|
||||
.dynamic-scroller-demo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 140px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.scroller {
|
||||
flex: auto 1 1;
|
||||
border: 1px solid var(--el-border-color);
|
||||
}
|
||||
|
||||
.notice {
|
||||
|
||||
@ -12,7 +12,7 @@ defineOptions({
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="font-medium">
|
||||
虚拟列表组件（
|
||||
虚拟列表（
|
||||
<el-link
|
||||
href="https://github.com/Akryum/vue-virtual-scroller/tree/next/packages/vue-virtual-scroller"
|
||||
target="_blank"
|
||||
|
||||
@ -67,6 +67,7 @@ const filteredItems = computed(() => {
|
||||
|
||||
.scroller {
|
||||
flex: auto 1 1;
|
||||
border: 1px solid var(--el-border-color);
|
||||
}
|
||||
|
||||
.message {
|
||||
|
||||
@ -19,8 +19,8 @@ onMounted(() => {
|
||||
nextTick(() => {
|
||||
setPreventLocalWatermark("无法删除的水印", {
|
||||
forever: true,
|
||||
width: 187,
|
||||
height: 80
|
||||
width: 180,
|
||||
height: 70
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -36,147 +36,170 @@ onBeforeUnmount(() => {
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
页面水印功能（将平台主题改为亮白色观察水印效果更明显哦）
|
||||
页面水印菜单树结构
|
||||
<el-link
|
||||
href="https://pure-admin-utils.netlify.app/hooks/useWatermark/useWatermark"
|
||||
target="_blank"
|
||||
style="margin: 0 5px 4px 0; font-size: 16px"
|
||||
>
|
||||
（查看更详细的使用文档）
|
||||
</el-link>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<span> 请输入要创建水印的值：</span>
|
||||
<el-input
|
||||
v-model="value"
|
||||
class="mb-4 mr-4"
|
||||
style="width: 200px"
|
||||
clearable
|
||||
/>
|
||||
<span>请选择要创建水印的颜色：</span>
|
||||
<el-color-picker v-model="color" show-alpha />
|
||||
<br />
|
||||
<el-button @click="setWatermark(value, { color })">
|
||||
创建整页水印
|
||||
</el-button>
|
||||
<el-button
|
||||
@click="
|
||||
setWatermark(value, {
|
||||
gradient: [
|
||||
{ value: 0, color: 'magenta' },
|
||||
{ value: 0.5, color: 'blue' },
|
||||
{ value: 1.0, color: 'red' }
|
||||
]
|
||||
})
|
||||
"
|
||||
>
|
||||
创建整页渐变水印
|
||||
</el-button>
|
||||
<el-button
|
||||
@click="
|
||||
setWatermark(value, {
|
||||
rotate: 0,
|
||||
gradient: [
|
||||
{ value: 0, color: 'magenta' },
|
||||
{ value: 0.5, color: 'blue' },
|
||||
{ value: 1.0, color: 'red' }
|
||||
]
|
||||
})
|
||||
"
|
||||
>
|
||||
创建整页渐变且水平90度的水印
|
||||
</el-button>
|
||||
<el-button
|
||||
@click="
|
||||
setWatermark(value, {
|
||||
gradient: [
|
||||
{ value: 0, color: 'magenta' },
|
||||
{ value: 0.5, color: 'blue' },
|
||||
{ value: 1.0, color: 'red' }
|
||||
],
|
||||
shadowConfig: [20]
|
||||
})
|
||||
"
|
||||
>
|
||||
创建整页渐变且有阴影的水印
|
||||
</el-button>
|
||||
<el-button
|
||||
@click="
|
||||
setWatermark(value, {
|
||||
globalAlpha: 0.15, // 值越低越透明
|
||||
gradient: [
|
||||
{ value: 0, color: 'magenta' },
|
||||
{ value: 0.5, color: 'blue' },
|
||||
{ value: 1.0, color: 'red' }
|
||||
]
|
||||
})
|
||||
"
|
||||
>
|
||||
创建整页高透明渐变水印
|
||||
</el-button>
|
||||
<el-button @click="clear">清除整页水印</el-button>
|
||||
<el-space wrap class="!mb-2">
|
||||
<span> 请输入要创建水印的值：</span>
|
||||
<el-input v-model="value" class="mr-4" style="width: 200px" clearable />
|
||||
<span>请选择要创建水印的颜色：</span>
|
||||
<el-color-picker v-model="color" show-alpha />
|
||||
</el-space>
|
||||
|
||||
<div
|
||||
ref="local"
|
||||
class="mt-4 mb-4 w-[1080px] h-[400px] border-dotted border-2 border-sky-500"
|
||||
/>
|
||||
<el-button
|
||||
@click="
|
||||
setLocalWatermark('局部水印', {
|
||||
color,
|
||||
width: 140,
|
||||
height: 60
|
||||
})
|
||||
"
|
||||
>
|
||||
创建局部水印
|
||||
</el-button>
|
||||
<el-button
|
||||
@click="
|
||||
setLocalWatermark('局部水印', {
|
||||
width: 140,
|
||||
height: 60,
|
||||
gradient: [
|
||||
{ value: 0, color: 'magenta' },
|
||||
{ value: 0.5, color: 'blue' },
|
||||
{ value: 1.0, color: 'red' }
|
||||
]
|
||||
})
|
||||
"
|
||||
>
|
||||
创建局部渐变水印
|
||||
</el-button>
|
||||
<el-button
|
||||
@click="
|
||||
setLocalWatermark('局部水印', {
|
||||
width: 140,
|
||||
height: 56.5,
|
||||
rotate: 0,
|
||||
gradient: [
|
||||
{ value: 0, color: 'magenta' },
|
||||
{ value: 0.5, color: 'blue' },
|
||||
{ value: 1.0, color: 'red' }
|
||||
]
|
||||
})
|
||||
"
|
||||
>
|
||||
创建局部渐变且水平90度的水印
|
||||
</el-button>
|
||||
<el-button
|
||||
@click="
|
||||
setLocalWatermark('局部水印', {
|
||||
width: 140,
|
||||
height: 56.5,
|
||||
gradient: [
|
||||
{ value: 0, color: 'magenta' },
|
||||
{ value: 0.5, color: 'blue' },
|
||||
{ value: 1.0, color: 'red' }
|
||||
],
|
||||
shadowConfig: [20]
|
||||
})
|
||||
"
|
||||
>
|
||||
创建局部渐变且有阴影的水印
|
||||
</el-button>
|
||||
<el-button @click="clearLocal">清除局部水印</el-button>
|
||||
<el-space wrap>
|
||||
<el-button bg text @click="setWatermark(value, { color })">
|
||||
创建整页水印
|
||||
</el-button>
|
||||
<el-button
|
||||
bg
|
||||
text
|
||||
@click="
|
||||
setWatermark(value, {
|
||||
gradient: [
|
||||
{ value: 0, color: 'magenta' },
|
||||
{ value: 0.5, color: 'blue' },
|
||||
{ value: 1.0, color: 'red' }
|
||||
]
|
||||
})
|
||||
"
|
||||
>
|
||||
创建整页渐变水印
|
||||
</el-button>
|
||||
<el-button
|
||||
bg
|
||||
text
|
||||
@click="
|
||||
setWatermark(value, {
|
||||
rotate: 0,
|
||||
gradient: [
|
||||
{ value: 0, color: 'magenta' },
|
||||
{ value: 0.5, color: 'blue' },
|
||||
{ value: 1.0, color: 'red' }
|
||||
]
|
||||
})
|
||||
"
|
||||
>
|
||||
创建整页渐变且水平90度的水印
|
||||
</el-button>
|
||||
<el-button
|
||||
bg
|
||||
text
|
||||
@click="
|
||||
setWatermark(value, {
|
||||
gradient: [
|
||||
{ value: 0, color: 'magenta' },
|
||||
{ value: 0.5, color: 'blue' },
|
||||
{ value: 1.0, color: 'red' }
|
||||
],
|
||||
shadowConfig: [20]
|
||||
})
|
||||
"
|
||||
>
|
||||
创建整页渐变且有阴影的水印
|
||||
</el-button>
|
||||
<el-button
|
||||
bg
|
||||
text
|
||||
@click="
|
||||
setWatermark(value, {
|
||||
globalAlpha: 0.15, // 值越低越透明
|
||||
gradient: [
|
||||
{ value: 0, color: 'magenta' },
|
||||
{ value: 0.5, color: 'blue' },
|
||||
{ value: 1.0, color: 'red' }
|
||||
]
|
||||
})
|
||||
"
|
||||
>
|
||||
创建整页高透明渐变水印
|
||||
</el-button>
|
||||
<el-button bg text @click="clear">清除整页水印</el-button>
|
||||
</el-space>
|
||||
|
||||
<div
|
||||
ref="preventLocal"
|
||||
class="mt-4 mb-4 w-[1080px] h-[400px] border-dotted border-2 border-indigo-500"
|
||||
/>
|
||||
<el-divider />
|
||||
|
||||
<div ref="local" class="w-1/2 h-[200px] border border-sky-500" />
|
||||
|
||||
<el-space wrap class="mt-6">
|
||||
<el-button
|
||||
bg
|
||||
text
|
||||
@click="
|
||||
setLocalWatermark('局部水印', {
|
||||
color,
|
||||
width: 140,
|
||||
height: 65
|
||||
})
|
||||
"
|
||||
>
|
||||
创建局部水印
|
||||
</el-button>
|
||||
<el-button
|
||||
bg
|
||||
text
|
||||
@click="
|
||||
setLocalWatermark('局部水印', {
|
||||
width: 140,
|
||||
height: 65,
|
||||
gradient: [
|
||||
{ value: 0, color: 'magenta' },
|
||||
{ value: 0.5, color: 'blue' },
|
||||
{ value: 1.0, color: 'red' }
|
||||
]
|
||||
})
|
||||
"
|
||||
>
|
||||
创建局部渐变水印
|
||||
</el-button>
|
||||
<el-button
|
||||
bg
|
||||
text
|
||||
@click="
|
||||
setLocalWatermark('局部水印', {
|
||||
width: 140,
|
||||
height: 65,
|
||||
rotate: 0,
|
||||
gradient: [
|
||||
{ value: 0, color: 'magenta' },
|
||||
{ value: 0.5, color: 'blue' },
|
||||
{ value: 1.0, color: 'red' }
|
||||
]
|
||||
})
|
||||
"
|
||||
>
|
||||
创建局部渐变且水平90度的水印
|
||||
</el-button>
|
||||
<el-button
|
||||
bg
|
||||
text
|
||||
@click="
|
||||
setLocalWatermark('局部水印', {
|
||||
width: 140,
|
||||
height: 65,
|
||||
gradient: [
|
||||
{ value: 0, color: 'magenta' },
|
||||
{ value: 0.5, color: 'blue' },
|
||||
{ value: 1.0, color: 'red' }
|
||||
],
|
||||
shadowConfig: [20]
|
||||
})
|
||||
"
|
||||
>
|
||||
创建局部渐变且有阴影的水印
|
||||
</el-button>
|
||||
<el-button bg text @click="clearLocal">清除局部水印</el-button>
|
||||
</el-space>
|
||||
|
||||
<el-divider />
|
||||
|
||||
<div ref="preventLocal" class="w-1/2 h-[200px] border border-indigo-500" />
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>基本使用</h1>
|
||||
<p class="mb-2">基本使用</p>
|
||||
<div v-contextmenu:contextmenu class="wrapper">
|
||||
<code>右键点击此区域</code>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>动态菜单</h1>
|
||||
<p class="mb-2">动态菜单</p>
|
||||
<div v-contextmenu:contextmenu class="wrapper">
|
||||
<code>右键点击此区域</code>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>按钮组</h1>
|
||||
<p class="mb-2">按钮组</p>
|
||||
<div v-contextmenu:contextmenu class="wrapper">
|
||||
<code>右键点击此区域</code>
|
||||
</div>
|
||||
|
||||
@ -53,7 +53,7 @@ function changeDirection(val) {
|
||||
<el-card class="box-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>无缝滚动示例</span>
|
||||
<span class="font-medium">无缝滚动示例</span>
|
||||
<el-button
|
||||
class="button"
|
||||
link
|
||||
|
||||
@ -30,13 +30,11 @@ const selectedVal = ({ left, right }): void => {
|
||||
<el-card
|
||||
v-for="(item, key) in dataLists"
|
||||
:key="key"
|
||||
class="box-card"
|
||||
class="mb-2"
|
||||
shadow="never"
|
||||
>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>{{ item.title }}</span>
|
||||
</div>
|
||||
<span class="font-medium">{{ item.title }}</span>
|
||||
</template>
|
||||
<Selector
|
||||
:HsKey="key"
|
||||
@ -48,9 +46,3 @@ const selectedVal = ({ left, right }): void => {
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.el-card {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,75 +1,82 @@
|
||||
<script setup lang="ts">
|
||||
import { type CSSProperties, computed } from "vue";
|
||||
import { hasAuth, getAuths } from "@/router/utils";
|
||||
|
||||
defineOptions({
|
||||
name: "PermissionButton"
|
||||
});
|
||||
|
||||
const elStyle = computed((): CSSProperties => {
|
||||
return {
|
||||
width: "85vw",
|
||||
justifyContent: "start"
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-space direction="vertical" size="large">
|
||||
<el-tag :style="elStyle" size="large" effect="dark">
|
||||
当前拥有的code列表：{{ getAuths() }}
|
||||
</el-tag>
|
||||
<div>
|
||||
<p class="mb-2">当前拥有的code列表：{{ getAuths() }}</p>
|
||||
|
||||
<el-card shadow="never" :style="elStyle">
|
||||
<el-card shadow="never" class="mb-2">
|
||||
<template #header>
|
||||
<div class="card-header">组件方式判断权限</div>
|
||||
</template>
|
||||
<Auth value="btn_add">
|
||||
<el-button type="success"> 拥有code：'btn_add' 权限可见 </el-button>
|
||||
</Auth>
|
||||
<Auth :value="['btn_edit']">
|
||||
<el-button type="primary"> 拥有code：['btn_edit'] 权限可见 </el-button>
|
||||
</Auth>
|
||||
<Auth :value="['btn_add', 'btn_edit', 'btn_delete']">
|
||||
<el-button type="danger">
|
||||
拥有code：['btn_add', 'btn_edit', 'btn_delete'] 权限可见
|
||||
</el-button>
|
||||
</Auth>
|
||||
<el-space wrap>
|
||||
<Auth value="btn_add">
|
||||
<el-button text bg type="warning">
|
||||
拥有code：'btn_add' 权限可见
|
||||
</el-button>
|
||||
</Auth>
|
||||
<Auth :value="['btn_edit']">
|
||||
<el-button text bg type="primary">
|
||||
拥有code：['btn_edit'] 权限可见
|
||||
</el-button>
|
||||
</Auth>
|
||||
<Auth :value="['btn_add', 'btn_edit', 'btn_delete']">
|
||||
<el-button text bg type="danger">
|
||||
拥有code：['btn_add', 'btn_edit', 'btn_delete'] 权限可见
|
||||
</el-button>
|
||||
</Auth>
|
||||
</el-space>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never" :style="elStyle">
|
||||
<el-card shadow="never" class="mb-2">
|
||||
<template #header>
|
||||
<div class="card-header">函数方式判断权限</div>
|
||||
</template>
|
||||
<el-button v-if="hasAuth('btn_add')" type="success">
|
||||
拥有code：'btn_add' 权限可见
|
||||
</el-button>
|
||||
<el-button v-if="hasAuth(['btn_edit'])" type="primary">
|
||||
拥有code：['btn_edit'] 权限可见
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="hasAuth(['btn_add', 'btn_edit', 'btn_delete'])"
|
||||
type="danger"
|
||||
>
|
||||
拥有code：['btn_add', 'btn_edit', 'btn_delete'] 权限可见
|
||||
</el-button>
|
||||
<el-space wrap>
|
||||
<el-button v-if="hasAuth('btn_add')" text bg type="warning">
|
||||
拥有code：'btn_add' 权限可见
|
||||
</el-button>
|
||||
<el-button v-if="hasAuth(['btn_edit'])" text bg type="primary">
|
||||
拥有code：['btn_edit'] 权限可见
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="hasAuth(['btn_add', 'btn_edit', 'btn_delete'])"
|
||||
text
|
||||
bg
|
||||
type="danger"
|
||||
>
|
||||
拥有code：['btn_add', 'btn_edit', 'btn_delete'] 权限可见
|
||||
</el-button>
|
||||
</el-space>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never" :style="elStyle">
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
指令方式判断权限（该方式不能动态修改权限）
|
||||
</div>
|
||||
</template>
|
||||
<el-button v-auth="'btn_add'" type="success">
|
||||
拥有code：'btn_add' 权限可见
|
||||
</el-button>
|
||||
<el-button v-auth="['btn_edit']" type="primary">
|
||||
拥有code：['btn_edit'] 权限可见
|
||||
</el-button>
|
||||
<el-button v-auth="['btn_add', 'btn_edit', 'btn_delete']" type="danger">
|
||||
拥有code：['btn_add', 'btn_edit', 'btn_delete'] 权限可见
|
||||
</el-button>
|
||||
<el-space wrap>
|
||||
<el-button v-auth="'btn_add'" text bg type="warning">
|
||||
拥有code：'btn_add' 权限可见
|
||||
</el-button>
|
||||
<el-button v-auth="['btn_edit']" text bg type="primary">
|
||||
拥有code：['btn_edit'] 权限可见
|
||||
</el-button>
|
||||
<el-button
|
||||
v-auth="['btn_add', 'btn_edit', 'btn_delete']"
|
||||
text
|
||||
bg
|
||||
type="danger"
|
||||
>
|
||||
拥有code：['btn_add', 'btn_edit', 'btn_delete'] 权限可见
|
||||
</el-button>
|
||||
</el-space>
|
||||
</el-card>
|
||||
</el-space>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -43,10 +43,10 @@ function onChange() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-space direction="vertical" size="large">
|
||||
<el-tag :style="elStyle" size="large" effect="dark">
|
||||
<div>
|
||||
<p class="mb-2">
|
||||
模拟后台根据不同角色返回对应路由，观察左侧菜单变化（管理员角色可查看系统管理菜单、普通角色不可查看系统管理菜单）
|
||||
</el-tag>
|
||||
</p>
|
||||
<el-card shadow="never" :style="elStyle">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
@ -62,5 +62,5 @@ function onChange() {
|
||||
/>
|
||||
</el-select>
|
||||
</el-card>
|
||||
</el-space>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -32,7 +32,7 @@ function tabClick({ index }) {
|
||||
</template>
|
||||
|
||||
<el-alert
|
||||
title="高级用法中所有表格都设置了 row-key ，后端需返回唯一值的字段，比如id 作用：1. 用来优化 Table
|
||||
title="高级用法中所有表格都设置了 row-key ，后端需返回唯一值的字段，比如id。作用：1. 用来优化 Table
|
||||
的渲染，尤其当字段在深层结构中；2. 防止拖拽后表格组件内部混乱（拖拽必须设置）"
|
||||
type="info"
|
||||
:closable="false"
|
||||
|
||||
@ -18,9 +18,16 @@ function tabClick({ index }) {
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
平台二次封装 element-plus 的 Table ，完全兼容 Api
|
||||
并提供灵活的配置项以及完善的类型提醒，再也不用将代码都写在 template
|
||||
里了
|
||||
二次封装 element-plus 的
|
||||
<el-link
|
||||
href="https://element-plus.org/zh-CN/component/table.html"
|
||||
target="_blank"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
el-table
|
||||
</el-link>
|
||||
完全兼容 api 并提供灵活的配置项以及完善的类型提示，不用将代码都写在
|
||||
template 里了
|
||||
<el-link
|
||||
href="https://github.com/pure-admin/pure-admin-table"
|
||||
target="_blank"
|
||||
@ -33,7 +40,7 @@ function tabClick({ index }) {
|
||||
</template>
|
||||
|
||||
<el-alert
|
||||
title="基础用法中大部分表格都没设置 row-key ，不过最好都设置一下，后端需返回唯一值的字段，比如id 作用：1. 用来优化 Table
|
||||
title="基础用法中大部分表格都没设置 row-key ，不过最好都设置一下，后端需返回唯一值的字段，比如id。作用：1. 用来优化 Table
|
||||
的渲染，尤其当字段在深层结构中；2. 防止某些操作导致表格组件内部混乱"
|
||||
type="info"
|
||||
:closable="false"
|
||||
|
||||
@ -48,7 +48,7 @@ function onCloseTags() {
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div>标签页复用，超出限制自动关闭</div>
|
||||
<div class="font-medium">标签页复用，超出限制自动关闭</div>
|
||||
</template>
|
||||
<div class="flex flex-wrap items-center">
|
||||
<p>query传参模式：</p>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user