mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-06-08 01:17:23 +08:00
Merge remote-tracking branch 'origin/main' into gitee
This commit is contained in:
xiaoxian521
commit
90b4107496
@ -292,7 +292,7 @@
|
||||
- 添加 `@pureadmin/table` 行、列拖拽示例
|
||||
- 添加 `@pureadmin/table` 右键菜单示例
|
||||
- 添加 `@pureadmin/table` 导出 `Excel` 示例
|
||||
- 添加 `@pureadmin/table` 编辑单元格示例
|
||||
- 添加 `@pureadmin/table` 修改单元格示例
|
||||
- 添加 `@pureadmin/table` 水印示例
|
||||
- 添加 `@pureadmin/table` 打印示例
|
||||
- 添加 `@pureadmin/table` 内嵌 `echarts` 图表示例
|
||||
|
||||
@ -141,7 +141,7 @@ After operating the above two commands, open `http://localhost:8080` in the brow
|
||||
Of course, you can also operate the `docker` project through the [Docker Desktop](https://www.docker.com/products/docker-desktop/) visual interface, as shown below
|
||||
|
||||
<p align="center">
|
||||
<img alt="docker" width="100%" src="https://xiaoxian521.github.io/hyperlink/img/docker-desktop.jpg">
|
||||
<img alt="docker-desktop" width="100%" src="https://xiaoxian521.github.io/hyperlink/img/docker-desktop.jpg">
|
||||
</p>
|
||||
|
||||
## Change Log
|
||||
|
||||
@ -141,7 +141,7 @@ docker run -dp 8080:80 --name pure-admin vue-pure-admin
|
||||
当然也可以通过 [Docker Desktop](https://www.docker.com/products/docker-desktop/) 可视化界面去操作 `docker` 项目，如下图
|
||||
|
||||
<p align="center">
|
||||
<img alt="docker" width="100%" src="https://xiaoxian521.github.io/hyperlink/img/docker-desktop.jpg">
|
||||
<img alt="docker-desktop" width="100%" src="https://xiaoxian521.github.io/hyperlink/img/docker-desktop.jpg">
|
||||
</p>
|
||||
|
||||
## 更新日志
|
||||
|
||||
@ -1,16 +1,26 @@
|
||||
import type { Plugin } from "vite";
|
||||
import picocolors from "picocolors";
|
||||
import { getPackageSize } from "./utils";
|
||||
import dayjs, { type Dayjs } from "dayjs";
|
||||
import duration from "dayjs/plugin/duration";
|
||||
import gradientString from "gradient-string";
|
||||
import boxen, { type Options as boxenOptions } from "boxen";
|
||||
dayjs.extend(duration);
|
||||
|
||||
const welcomeMessage = gradientString("cyan", "magenta").multiline(
|
||||
`Hello! 欢迎使用 vue-pure-admin\n我们为您精心准备了下面两个贴心的保姆级文档\nhttps://yiming_chang.gitee.io/pure-admin-doc\nhttps://pure-admin-utils.netlify.app`
|
||||
);
|
||||
|
||||
const boxenOprions: boxenOptions = {
|
||||
padding: 0.5,
|
||||
borderColor: "cyan",
|
||||
borderStyle: "round"
|
||||
};
|
||||
|
||||
export function viteBuildInfo(): Plugin {
|
||||
let config: { command: string };
|
||||
let startTime: Dayjs;
|
||||
let endTime: Dayjs;
|
||||
let outDir: string;
|
||||
const { green, blue, bold } = picocolors;
|
||||
return {
|
||||
name: "vite:buildInfo",
|
||||
configResolved(resolvedConfig) {
|
||||
@ -18,15 +28,7 @@ export function viteBuildInfo(): Plugin {
|
||||
outDir = resolvedConfig.build?.outDir ?? "dist";
|
||||
},
|
||||
buildStart() {
|
||||
console.log(
|
||||
bold(
|
||||
green(
|
||||
`👏欢迎使用${blue(
|
||||
"[vue-pure-admin]"
|
||||
)}，如果您感觉不错，记得点击后面链接给个star哦💖 https://github.com/pure-admin/vue-pure-admin`
|
||||
)
|
||||
)
|
||||
);
|
||||
console.log(boxen(welcomeMessage, boxenOprions));
|
||||
if (config.command === "build") {
|
||||
startTime = dayjs(new Date());
|
||||
}
|
||||
@ -38,12 +40,13 @@ export function viteBuildInfo(): Plugin {
|
||||
folder: outDir,
|
||||
callback: (size: string) => {
|
||||
console.log(
|
||||
bold(
|
||||
green(
|
||||
`🎉恭喜打包完成（总用时${dayjs
|
||||
boxen(
|
||||
gradientString("cyan", "magenta").multiline(
|
||||
`🎉 恭喜打包完成（总用时${dayjs
|
||||
.duration(endTime.diff(startTime))
|
||||
.format("mm分ss秒")}，打包后的大小为${size}）`
|
||||
)
|
||||
),
|
||||
boxenOprions
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@ -36,23 +36,23 @@ menus:
|
||||
hsfourZeroOne: "403"
|
||||
hsFive: "500"
|
||||
hscomponents: Components
|
||||
hsdialog: Dialog Components
|
||||
hsmessage: Message Tips Components
|
||||
hsvideo: Video Components
|
||||
hssegmented: Segmented Components
|
||||
hswaterfall: Waterfall Components
|
||||
hsmap: Map Components
|
||||
hsdraggable: Draggable Components
|
||||
hsdialog: Dialog
|
||||
hsmessage: Message Tips
|
||||
hsvideo: Video
|
||||
hssegmented: Segmented
|
||||
hswaterfall: Waterfall
|
||||
hsmap: Map
|
||||
hsdraggable: Draggable
|
||||
hssplitPane: Split Pane
|
||||
hsbutton: Button Components
|
||||
hsbutton: Button
|
||||
hscropping: Picture Cropping
|
||||
hsanimatecss: AnimateCss Selector
|
||||
hscountTo: Digital Animation
|
||||
hsselector: Selector Components
|
||||
hsselector: Scope Selector
|
||||
hsflowChart: Flow Chart
|
||||
hsseamless: Seamless Scroll
|
||||
hscontextmenu: Context Menu
|
||||
hstypeit: Typeit Components
|
||||
hstypeit: Typeit
|
||||
hsjsoneditor: JSON Editor
|
||||
hsmenus: MultiLevel Menu
|
||||
hsmenu1: Menu1
|
||||
@ -102,15 +102,15 @@ menus:
|
||||
hsCascader: Area Cascader
|
||||
hsSwiper: Swiper Plugin
|
||||
hsVirtualList: Virtual List
|
||||
hsCheckButton: Check Button
|
||||
hsPdf: PDF Preview
|
||||
hsExcel: Export Excel
|
||||
hsInfiniteScroll: Table Infinite Scroll
|
||||
hsSensitive: Sensitive Filter
|
||||
hsPinyin: PinYin
|
||||
hsdanmaku: Danmaku Components
|
||||
hsdanmaku: Danmaku
|
||||
hsPureTableBase: Base Usage
|
||||
hsPureTableHigh: High Usage
|
||||
hsTree: Big Data Tree
|
||||
hsboard: Paint Board
|
||||
hsMenuoverflow: Menu Overflow Show Tooltip Text
|
||||
hsChildMenuoverflow: Child Menu Overflow Show Tooltip Text
|
||||
|
||||
@ -36,23 +36,23 @@ menus:
|
||||
hsfourZeroOne: "403"
|
||||
hsFive: "500"
|
||||
hscomponents: 组件
|
||||
hsdialog: 函数式弹框组件
|
||||
hsmessage: 消息提示组件
|
||||
hsvideo: 视频组件
|
||||
hssegmented: 分段控制器组件
|
||||
hswaterfall: 瀑布流无限滚动组件
|
||||
hsmap: 地图组件
|
||||
hsdraggable: 拖拽组件
|
||||
hsdialog: 函数式弹框
|
||||
hsmessage: 消息提示
|
||||
hsvideo: 视频
|
||||
hssegmented: 分段控制器
|
||||
hswaterfall: 瀑布流无限滚动
|
||||
hsmap: 地图
|
||||
hsdraggable: 拖拽
|
||||
hssplitPane: 切割面板
|
||||
hsbutton: 按钮组件
|
||||
hsbutton: 按钮
|
||||
hscropping: 图片裁剪
|
||||
hsanimatecss: AnimateCss选择器组件
|
||||
hsanimatecss: animate.css选择器
|
||||
hscountTo: 数字动画
|
||||
hsselector: 选择器组件
|
||||
hsselector: 范围选择器
|
||||
hsflowChart: 流程图
|
||||
hsseamless: 无缝滚动
|
||||
hscontextmenu: 右键菜单
|
||||
hstypeit: 打字机组件
|
||||
hstypeit: 打字机
|
||||
hsjsoneditor: JSON编辑器
|
||||
hsmenus: 多级菜单
|
||||
hsmenu1: 菜单1
|
||||
@ -102,15 +102,15 @@ menus:
|
||||
hsCascader: 区域级联选择器
|
||||
hsSwiper: Swiper插件
|
||||
hsVirtualList: 虚拟列表
|
||||
hsCheckButton: 可选按钮
|
||||
hsPdf: PDF预览
|
||||
hsExcel: 导出Excel
|
||||
hsInfiniteScroll: 表格无限滚动
|
||||
hsSensitive: 敏感词过滤
|
||||
hsPinyin: 汉语拼音
|
||||
hsdanmaku: 弹幕组件
|
||||
hsdanmaku: 弹幕
|
||||
hsPureTableBase: 基础用法（23个示例）
|
||||
hsPureTableHigh: 高级用法（11个示例）
|
||||
hsTree: 大数据树业务组件
|
||||
hsboard: 艺术画板
|
||||
hsMenuoverflow: 目录超出显示 Tooltip 文字提示
|
||||
hsChildMenuoverflow: 菜单超出显示 Tooltip 文字提示
|
||||
|
||||
@ -18,7 +18,7 @@ const systemRouter = {
|
||||
children: [
|
||||
{
|
||||
path: "/system/user/index",
|
||||
name: "User",
|
||||
name: "SystemUser",
|
||||
meta: {
|
||||
icon: "flUser",
|
||||
title: "menus.hsUser",
|
||||
@ -27,7 +27,7 @@ const systemRouter = {
|
||||
},
|
||||
{
|
||||
path: "/system/role/index",
|
||||
name: "Role",
|
||||
name: "SystemRole",
|
||||
meta: {
|
||||
icon: "role",
|
||||
title: "menus.hsRole",
|
||||
@ -36,7 +36,7 @@ const systemRouter = {
|
||||
},
|
||||
{
|
||||
path: "/system/dept/index",
|
||||
name: "Dept",
|
||||
name: "SystemDept",
|
||||
meta: {
|
||||
icon: "dept",
|
||||
title: "menus.hsDept",
|
||||
|
||||
@ -113,6 +113,7 @@
|
||||
"@iconify/vue": "^4.1.1",
|
||||
"@intlify/unplugin-vue-i18n": "^2.0.0",
|
||||
"@pureadmin/theme": "^3.2.0",
|
||||
"@types/gradient-string": "^1.1.5",
|
||||
"@types/intro.js": "^5.1.5",
|
||||
"@types/js-cookie": "^3.0.6",
|
||||
"@types/node": "^20.11.0",
|
||||
@ -125,6 +126,7 @@
|
||||
"@vitejs/plugin-vue": "^5.0.3",
|
||||
"@vitejs/plugin-vue-jsx": "^3.1.0",
|
||||
"autoprefixer": "^10.4.16",
|
||||
"boxen": "^7.1.1",
|
||||
"cloc": "^2.11.0",
|
||||
"cssnano": "^6.0.3",
|
||||
"eslint": "^8.56.0",
|
||||
@ -132,9 +134,9 @@
|
||||
"eslint-define-config": "^2.1.0",
|
||||
"eslint-plugin-prettier": "^5.1.3",
|
||||
"eslint-plugin-vue": "^9.20.0",
|
||||
"gradient-string": "^2.0.2",
|
||||
"husky": "^8.0.3",
|
||||
"lint-staged": "^15.2.0",
|
||||
"picocolors": "^1.0.0",
|
||||
"postcss": "^8.4.33",
|
||||
"postcss-html": "^1.6.0",
|
||||
"postcss-import": "^15.1.0",
|
||||
|
||||
83
pnpm-lock.yaml
generated
83
pnpm-lock.yaml
generated
@ -196,6 +196,9 @@ devDependencies:
|
||||
'@pureadmin/theme':
|
||||
specifier: ^3.2.0
|
||||
version: 3.2.0
|
||||
'@types/gradient-string':
|
||||
specifier: ^1.1.5
|
||||
version: 1.1.5
|
||||
'@types/intro.js':
|
||||
specifier: ^5.1.5
|
||||
version: 5.1.5
|
||||
@ -232,6 +235,9 @@ devDependencies:
|
||||
autoprefixer:
|
||||
specifier: ^10.4.16
|
||||
version: 10.4.16(postcss@8.4.33)
|
||||
boxen:
|
||||
specifier: ^7.1.1
|
||||
version: 7.1.1
|
||||
cloc:
|
||||
specifier: ^2.11.0
|
||||
version: 2.11.0
|
||||
@ -253,15 +259,15 @@ devDependencies:
|
||||
eslint-plugin-vue:
|
||||
specifier: ^9.20.0
|
||||
version: 9.20.0(eslint@8.56.0)
|
||||
gradient-string:
|
||||
specifier: ^2.0.2
|
||||
version: 2.0.2
|
||||
husky:
|
||||
specifier: ^8.0.3
|
||||
version: 8.0.3
|
||||
lint-staged:
|
||||
specifier: ^15.2.0
|
||||
version: 15.2.0
|
||||
picocolors:
|
||||
specifier: ^1.0.0
|
||||
version: 1.0.0
|
||||
postcss:
|
||||
specifier: ^8.4.33
|
||||
version: 8.4.33
|
||||
@ -1982,6 +1988,12 @@ packages:
|
||||
'@types/node': 20.11.0
|
||||
dev: false
|
||||
|
||||
/@types/gradient-string@1.1.5:
|
||||
resolution: {integrity: sha512-Z2VPQ0q+IhrAO7XjJSjpDsoPc+CsCshRNah1IE9LCo/NzHMHylssvx73i0BAKzuaGj9cdhmgq9rLaietpYAbKQ==}
|
||||
dependencies:
|
||||
'@types/tinycolor2': 1.4.6
|
||||
dev: true
|
||||
|
||||
/@types/intro.js@5.1.5:
|
||||
resolution: {integrity: sha512-TT1d8ayz07svlBcoqh26sNpQaU6bBpdFcCC+IMZHp46NNX2mYAHAVefM3wCmQSd4UWhhObeMjFByw2IaPKOXlw==}
|
||||
dev: true
|
||||
@ -2067,6 +2079,10 @@ packages:
|
||||
resolution: {integrity: sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==}
|
||||
dev: false
|
||||
|
||||
/@types/tinycolor2@1.4.6:
|
||||
resolution: {integrity: sha512-iEN8J0BoMnsWBqjVbWH/c0G0Hh7O21lpR2/+PrvAVgWdzL7eexIFm4JN/Wn10PTcmNdtS6U67r499mlWMXOxNw==}
|
||||
dev: true
|
||||
|
||||
/@types/web-bluetooth@0.0.14:
|
||||
resolution: {integrity: sha512-5d2RhCard1nQUC3aHcq/gHzWYO6K0WJmAbjO7mQJgCQKtZpgXxv1rOM6O/dBDhDYYVutk1sciOgNSe+5YyfM8A==}
|
||||
dev: false
|
||||
@ -2816,6 +2832,12 @@ packages:
|
||||
resolution: {integrity: sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==}
|
||||
dev: false
|
||||
|
||||
/ansi-align@3.0.1:
|
||||
resolution: {integrity: sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==}
|
||||
dependencies:
|
||||
string-width: 4.2.3
|
||||
dev: true
|
||||
|
||||
/ansi-escapes@4.3.2:
|
||||
resolution: {integrity: sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==}
|
||||
engines: {node: '>=8'}
|
||||
@ -3036,6 +3058,20 @@ packages:
|
||||
resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
|
||||
dev: true
|
||||
|
||||
/boxen@7.1.1:
|
||||
resolution: {integrity: sha512-2hCgjEmP8YLWQ130n2FerGv7rYpfBmnmp9Uy2Le1vge6X3gZIfSmEzP5QTDElFxcvVcXlEn8Aq6MU/PZygIOog==}
|
||||
engines: {node: '>=14.16'}
|
||||
dependencies:
|
||||
ansi-align: 3.0.1
|
||||
camelcase: 7.0.1
|
||||
chalk: 5.3.0
|
||||
cli-boxes: 3.0.0
|
||||
string-width: 5.1.2
|
||||
type-fest: 2.19.0
|
||||
widest-line: 4.0.1
|
||||
wrap-ansi: 8.1.0
|
||||
dev: true
|
||||
|
||||
/brace-expansion@1.1.11:
|
||||
resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
|
||||
dependencies:
|
||||
@ -3142,6 +3178,11 @@ packages:
|
||||
resolution: {integrity: sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==}
|
||||
engines: {node: '>=10'}
|
||||
|
||||
/camelcase@7.0.1:
|
||||
resolution: {integrity: sha512-xlx1yCK2Oc1APsPXDL2LdlNP6+uu8OCDdhOBSVT279M/S+y75O30C2VuD8T2ogdePBBl7PfPF4504tnLgX3zfw==}
|
||||
engines: {node: '>=14.16'}
|
||||
dev: true
|
||||
|
||||
/caniuse-api@3.0.0:
|
||||
resolution: {integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==}
|
||||
dependencies:
|
||||
@ -3229,6 +3270,11 @@ packages:
|
||||
resolution: {integrity: sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ==}
|
||||
dev: false
|
||||
|
||||
/cli-boxes@3.0.0:
|
||||
resolution: {integrity: sha512-/lzGpEWL/8PfI0BmBOPRwp0c/wFNX1RdUML3jK/RcSBA9T8mZDdQpqYBKtCFTOfQbwPqWEOpjqW+Fnayc0969g==}
|
||||
engines: {node: '>=10'}
|
||||
dev: true
|
||||
|
||||
/cli-cursor@4.0.0:
|
||||
resolution: {integrity: sha512-VGtlMu3x/4DOtIUwEkRezxUZ2lBacNJCHash0N0WeZDBS+7Ux1dm3XWAgWYxLJFMMdOeXMHXorshEFhbMSGelg==}
|
||||
engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
|
||||
@ -4747,6 +4793,14 @@ packages:
|
||||
/graceful-fs@4.2.11:
|
||||
resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
|
||||
|
||||
/gradient-string@2.0.2:
|
||||
resolution: {integrity: sha512-rEDCuqUQ4tbD78TpzsMtt5OIf0cBCSDWSJtUDaF6JsAh+k0v9r++NzxNEG87oDZx9ZwGhD8DaezR2L/yrw0Jdw==}
|
||||
engines: {node: '>=10'}
|
||||
dependencies:
|
||||
chalk: 4.1.2
|
||||
tinygradient: 1.1.5
|
||||
dev: true
|
||||
|
||||
/graphemer@1.4.0:
|
||||
resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
|
||||
dev: true
|
||||
@ -8338,6 +8392,17 @@ packages:
|
||||
resolution: {integrity: sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==}
|
||||
dev: false
|
||||
|
||||
/tinycolor2@1.6.0:
|
||||
resolution: {integrity: sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==}
|
||||
dev: true
|
||||
|
||||
/tinygradient@1.1.5:
|
||||
resolution: {integrity: sha512-8nIfc2vgQ4TeLnk2lFj4tRLvvJwEfQuabdsmvDdQPT0xlk9TaNtpGd6nNRxXoK6vQhN6RSzj+Cnp5tTQmpxmbw==}
|
||||
dependencies:
|
||||
'@types/tinycolor2': 1.4.6
|
||||
tinycolor2: 1.6.0
|
||||
dev: true
|
||||
|
||||
/tippy.js@6.3.7:
|
||||
resolution: {integrity: sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==}
|
||||
dependencies:
|
||||
@ -8446,6 +8511,11 @@ packages:
|
||||
engines: {node: '>=8'}
|
||||
dev: true
|
||||
|
||||
/type-fest@2.19.0:
|
||||
resolution: {integrity: sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==}
|
||||
engines: {node: '>=12.20'}
|
||||
dev: true
|
||||
|
||||
/type-fest@3.13.1:
|
||||
resolution: {integrity: sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g==}
|
||||
engines: {node: '>=14.16'}
|
||||
@ -8979,6 +9049,13 @@ packages:
|
||||
dependencies:
|
||||
isexe: 2.0.0
|
||||
|
||||
/widest-line@4.0.1:
|
||||
resolution: {integrity: sha512-o0cyEG0e8GPzT4iGHphIOh0cJOV8fivsXxddQasHPHfoZf1ZexrfeA21w2NaEN1RHE+fXlfISmOE8R9N3u3Qig==}
|
||||
engines: {node: '>=12'}
|
||||
dependencies:
|
||||
string-width: 5.1.2
|
||||
dev: true
|
||||
|
||||
/wildcard@1.1.2:
|
||||
resolution: {integrity: sha512-DXukZJxpHA8LuotRwL0pP1+rS6CS7FF2qStDDE1C7DDg2rLud2PXRMuEDYIPhgEezwnlHNL4c+N6MfMTjCGTng==}
|
||||
dev: false
|
||||
|
||||
@ -72,11 +72,11 @@ function onMouseleave() {
|
||||
|
||||
<template>
|
||||
<el-select
|
||||
class="!w-[200px]"
|
||||
:model-value="inputValue"
|
||||
placeholder="请选择动画"
|
||||
clearable
|
||||
filterable
|
||||
placeholder="请选择动画"
|
||||
popper-class="pure-animate-popper"
|
||||
:model-value="inputValue"
|
||||
:filter-method="filterMethod"
|
||||
@clear="onClear"
|
||||
>
|
||||
@ -121,3 +121,9 @@ function onMouseleave() {
|
||||
</template>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.pure-animate-popper {
|
||||
min-width: 0 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -129,6 +129,11 @@ export default defineComponent({
|
||||
|
||||
onUnmounted(() => {
|
||||
cropper.value?.destroy();
|
||||
isReady.value = false;
|
||||
cropper.value = null;
|
||||
imgBase64.value = "";
|
||||
scaleX = 1;
|
||||
scaleY = 1;
|
||||
});
|
||||
|
||||
useResizeObserver(tippyElRef, () => handCropper("reset"));
|
||||
|
||||
@ -121,7 +121,7 @@ watch(
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="selector w-[220px]">
|
||||
<div class="selector">
|
||||
<el-input v-model="inputValue" disabled>
|
||||
<template #append>
|
||||
<el-popover
|
||||
|
||||
@ -423,7 +423,7 @@ function openMenu(tag, e) {
|
||||
}
|
||||
|
||||
currentSelect.value = tag;
|
||||
const menuMinWidth = 105;
|
||||
const menuMinWidth = 140;
|
||||
const offsetLeft = unref(containerDom).getBoundingClientRect().left;
|
||||
const offsetWidth = unref(containerDom).offsetWidth;
|
||||
const maxLeft = offsetWidth - menuMinWidth;
|
||||
|
||||
@ -4,11 +4,11 @@ const home = 0, // 平台规定只有 home 路由的 rank 才能为 0 ，所以
|
||||
able = 1,
|
||||
components = 2,
|
||||
table = 3,
|
||||
frame = 4,
|
||||
nested = 5,
|
||||
result = 6,
|
||||
error = 7,
|
||||
list = 8,
|
||||
list = 4,
|
||||
result = 5,
|
||||
error = 6,
|
||||
frame = 7,
|
||||
nested = 8,
|
||||
permission = 9,
|
||||
system = 10,
|
||||
tabs = 11,
|
||||
@ -26,11 +26,11 @@ export {
|
||||
able,
|
||||
components,
|
||||
table,
|
||||
frame,
|
||||
nested,
|
||||
list,
|
||||
result,
|
||||
error,
|
||||
list,
|
||||
frame,
|
||||
nested,
|
||||
permission,
|
||||
system,
|
||||
tabs,
|
||||
|
||||
@ -10,30 +10,6 @@ export default {
|
||||
rank: able
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "/able/videoFrame",
|
||||
name: "VideoFrame",
|
||||
component: () => import("@/views/able/video-frame/index.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsVideoFrame")
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/able/wavesurfer",
|
||||
name: "Wavesurfer",
|
||||
component: () => import("@/views/able/wavesurfer/index.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsWavesurfer")
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/able/directives",
|
||||
name: "Directives",
|
||||
component: () => import("@/views/able/directives.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsOptimize")
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/able/watermark",
|
||||
name: "WaterMark",
|
||||
@ -59,35 +35,11 @@ export default {
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/able/iconSelect",
|
||||
name: "IconSelect",
|
||||
component: () => import("@/views/able/icon-select.vue"),
|
||||
path: "/able/excel",
|
||||
name: "Excel",
|
||||
component: () => import("@/views/able/excel.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsIconSelect")
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/able/timeline",
|
||||
name: "TimeLine",
|
||||
component: () => import("@/views/able/timeline.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsTimeline")
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/able/menuTree",
|
||||
name: "MenuTree",
|
||||
component: () => import("@/views/able/menu-tree.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsMenuTree")
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/able/lineTree",
|
||||
name: "LineTree",
|
||||
component: () => import("@/views/able/line-tree.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsLineTree")
|
||||
title: $t("menus.hsExcel")
|
||||
}
|
||||
},
|
||||
{
|
||||
@ -98,6 +50,34 @@ export default {
|
||||
title: $t("menus.hsDebounce")
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/able/directives",
|
||||
name: "Directives",
|
||||
component: () => import("@/views/able/directives.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsOptimize")
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/able/draggable",
|
||||
name: "Draggable",
|
||||
component: () => import("@/views/able/draggable.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsdraggable"),
|
||||
transition: {
|
||||
enterTransition: "animate__zoomIn",
|
||||
leaveTransition: "animate__zoomOut"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/able/pdf",
|
||||
name: "Pdf",
|
||||
component: () => import("@/views/able/pdf.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsPdf")
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/able/barcode",
|
||||
name: "BarCode",
|
||||
@ -115,43 +95,47 @@ export default {
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/able/cascader",
|
||||
name: "Cascader",
|
||||
component: () => import("@/views/able/cascader.vue"),
|
||||
path: "/able/map",
|
||||
name: "MapPage",
|
||||
component: () => import("@/views/able/map.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsCascader")
|
||||
title: $t("menus.hsmap"),
|
||||
keepAlive: true,
|
||||
transition: {
|
||||
name: "fade"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/able/swiper",
|
||||
name: "Swiper",
|
||||
component: () => import("@/views/able/swiper.vue"),
|
||||
path: "/able/wavesurfer",
|
||||
name: "Wavesurfer",
|
||||
component: () => import("@/views/able/wavesurfer/index.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsSwiper")
|
||||
title: $t("menus.hsWavesurfer")
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/able/virtualList",
|
||||
name: "VirtualList",
|
||||
component: () => import("@/views/able/virtual-list/index.vue"),
|
||||
path: "/able/video",
|
||||
name: "VideoPage",
|
||||
component: () => import("@/views/able/video.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsVirtualList")
|
||||
title: $t("menus.hsvideo")
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/able/pdf",
|
||||
name: "Pdf",
|
||||
component: () => import("@/views/able/pdf.vue"),
|
||||
path: "/able/videoFrame",
|
||||
name: "VideoFrame",
|
||||
component: () => import("@/views/able/video-frame/index.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsPdf")
|
||||
title: $t("menus.hsVideoFrame")
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/able/excel",
|
||||
name: "Excel",
|
||||
component: () => import("@/views/able/excel.vue"),
|
||||
path: "/able/danmaku",
|
||||
name: "Danmaku",
|
||||
component: () => import("@/views/able/danmaku/index.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsExcel")
|
||||
title: $t("menus.hsdanmaku")
|
||||
}
|
||||
},
|
||||
{
|
||||
@ -162,6 +146,30 @@ export default {
|
||||
title: $t("menus.hsInfiniteScroll")
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/able/menuTree",
|
||||
name: "MenuTree",
|
||||
component: () => import("@/views/able/menu-tree.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsMenuTree")
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/able/lineTree",
|
||||
name: "LineTree",
|
||||
component: () => import("@/views/able/line-tree.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsLineTree")
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/able/typeit",
|
||||
name: "Typeit",
|
||||
component: () => import("@/views/able/typeit.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hstypeit")
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/able/sensitive",
|
||||
name: "Sensitive",
|
||||
|
||||
@ -15,85 +15,31 @@ export default {
|
||||
name: "DialogPage",
|
||||
component: () => import("@/views/components/dialog/index.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsdialog"),
|
||||
extraIcon: "IF-pure-iconfont-new svg",
|
||||
transition: {
|
||||
enterTransition: "animate__fadeInLeft",
|
||||
leaveTransition: "animate__fadeOutRight"
|
||||
}
|
||||
title: $t("menus.hsdialog")
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/components/message",
|
||||
name: "Message",
|
||||
component: () => import("@/views/components/message/index.vue"),
|
||||
component: () => import("@/views/components/message.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsmessage")
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/components/segmented",
|
||||
name: "Segmented",
|
||||
component: () => import("@/views/components/segmented/index.vue"),
|
||||
path: "/components/iconSelect",
|
||||
name: "IconSelect",
|
||||
component: () => import("@/views/components/icon-select.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hssegmented"),
|
||||
extraIcon: "IF-pure-iconfont-new svg"
|
||||
title: $t("menus.hsIconSelect")
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/components/waterfall",
|
||||
name: "Waterfall",
|
||||
component: () => import("@/views/components/waterfall/index.vue"),
|
||||
path: "/components/animatecss",
|
||||
name: "AnimateCss",
|
||||
component: () => import("@/views/components/animatecss.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hswaterfall")
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/components/video",
|
||||
name: "VideoPage",
|
||||
component: () => import("@/views/components/video/index.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsvideo")
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/components/map",
|
||||
name: "MapPage",
|
||||
component: () => import("@/views/components/map/index.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsmap"),
|
||||
keepAlive: true,
|
||||
transition: {
|
||||
name: "fade"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/components/draggable",
|
||||
name: "Draggable",
|
||||
component: () => import("@/views/components/draggable/index.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsdraggable"),
|
||||
transition: {
|
||||
enterTransition: "animate__zoomIn",
|
||||
leaveTransition: "animate__zoomOut"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/components/splitPane",
|
||||
name: "SplitPane",
|
||||
component: () => import("@/views/components/split-pane/index.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hssplitPane")
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/components/button",
|
||||
name: "ButtonPage",
|
||||
component: () => import("@/views/components/button/index.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsbutton")
|
||||
title: $t("menus.hsanimatecss")
|
||||
}
|
||||
},
|
||||
{
|
||||
@ -105,35 +51,76 @@ export default {
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/components/animatecss",
|
||||
name: "AnimateCss",
|
||||
component: () => import("@/views/components/animatecss/index.vue"),
|
||||
path: "/components/checkButton",
|
||||
name: "CheckButton",
|
||||
component: () => import("@/views/components/check-button.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsanimatecss")
|
||||
title: $t("menus.hsCheckButton"),
|
||||
extraIcon: "IF-pure-iconfont-new svg"
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/components/countTo",
|
||||
name: "CountTo",
|
||||
component: () => import("@/views/components/count-to/index.vue"),
|
||||
path: "/components/segmented",
|
||||
name: "Segmented",
|
||||
component: () => import("@/views/components/segmented.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hscountTo")
|
||||
title: $t("menus.hssegmented")
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/components/cascader",
|
||||
name: "Cascader",
|
||||
component: () => import("@/views/components/cascader.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsCascader")
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/components/selector",
|
||||
name: "Selector",
|
||||
component: () => import("@/views/components/selector/index.vue"),
|
||||
component: () => import("@/views/components/selector.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsselector")
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/components/seamlessScroll",
|
||||
name: "SeamlessScroll",
|
||||
component: () => import("@/views/components/seamless-scroll/index.vue"),
|
||||
path: "/components/waterfall",
|
||||
name: "Waterfall",
|
||||
component: () => import("@/views/components/waterfall/index.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsseamless")
|
||||
title: $t("menus.hswaterfall")
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/components/splitPane",
|
||||
name: "SplitPane",
|
||||
component: () => import("@/views/components/split-pane.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hssplitPane")
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/components/swiper",
|
||||
name: "Swiper",
|
||||
component: () => import("@/views/components/swiper.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsSwiper")
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/components/timeline",
|
||||
name: "TimeLine",
|
||||
component: () => import("@/views/components/timeline.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsTimeline")
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/components/countTo",
|
||||
name: "CountTo",
|
||||
component: () => import("@/views/components/count-to.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hscountTo")
|
||||
}
|
||||
},
|
||||
{
|
||||
@ -144,28 +131,36 @@ export default {
|
||||
title: $t("menus.hscontextmenu")
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/components/typeit",
|
||||
name: "Typeit",
|
||||
component: () => import("@/views/components/typeit/index.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hstypeit")
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/components/json-editor",
|
||||
name: "JsonEditor",
|
||||
component: () => import("@/views/components/json-editor/index.vue"),
|
||||
component: () => import("@/views/components/json-editor.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsjsoneditor")
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/components/danmaku",
|
||||
name: "Danmaku",
|
||||
component: () => import("@/views/components/danmaku/index.vue"),
|
||||
path: "/components/seamlessScroll",
|
||||
name: "SeamlessScroll",
|
||||
component: () => import("@/views/components/seamless-scroll.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsdanmaku")
|
||||
title: $t("menus.hsseamless")
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/components/virtualList",
|
||||
name: "VirtualList",
|
||||
component: () => import("@/views/components/virtual-list/index.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsVirtualList")
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/components/button",
|
||||
name: "ButtonPage",
|
||||
component: () => import("@/views/components/button.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsbutton")
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
@ -52,8 +52,7 @@ export default {
|
||||
name: "Menu1-2-2",
|
||||
meta: {
|
||||
title: $t("menus.hsmenu1-2-2"),
|
||||
keepAlive: true,
|
||||
extraIcon: "IF-pure-iconfont-new svg"
|
||||
keepAlive: true
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
@ -25,10 +25,10 @@ watch(icon, () => {
|
||||
>
|
||||
animate.css
|
||||
</el-link>
|
||||
选择器组件
|
||||
选择器
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<ReAnimateSelector v-model="icon" />
|
||||
<ReAnimateSelector v-model="icon" class="!w-[200px]" />
|
||||
</el-card>
|
||||
</template>
|
||||
@ -14,7 +14,7 @@ const url = ref(`${VITE_PUBLIC_PATH}html/button.html`);
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">通过iframe引入按钮页面</span>
|
||||
<span class="font-medium">通过 iframe 引入按钮页面</span>
|
||||
</div>
|
||||
</template>
|
||||
<iframe :src="url" frameborder="0" class="iframe w-full h-[60vh]" />
|
||||
@ -26,10 +26,10 @@ const handleChange = value => {
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header> <p class="font-medium">区域级联选择器</p> </template>
|
||||
<el-row :gutter="20">
|
||||
<el-row :gutter="24">
|
||||
<el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<span class="imp">
|
||||
<span class="text-[var(--el-color-primary)]">
|
||||
1. 二级联动（不带“全部”选项）
|
||||
<el-cascader
|
||||
v-model="selectedOptions1"
|
||||
@ -58,7 +58,7 @@ const handleChange = value => {
|
||||
</el-col>
|
||||
<el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
|
||||
<div class="flex flex-col items-center justify-center mt-3">
|
||||
<span class="imp">
|
||||
<span class="text-[var(--el-color-primary)]">
|
||||
2. 二级联动（带有“全部”选项）
|
||||
<el-cascader
|
||||
v-model="selectedOptions3"
|
||||
@ -87,7 +87,7 @@ const handleChange = value => {
|
||||
</el-col>
|
||||
<el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
|
||||
<div class="flex flex-col items-center justify-center mt-3">
|
||||
<span class="imp">
|
||||
<span class="text-[var(--el-color-primary)]">
|
||||
3. 三级联动（不带“全部”选项）
|
||||
<el-cascader
|
||||
v-model="selectedOptions2"
|
||||
@ -118,7 +118,7 @@ const handleChange = value => {
|
||||
</el-col>
|
||||
<el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
|
||||
<div class="flex flex-col items-center justify-center mt-3">
|
||||
<span class="imp">
|
||||
<span class="text-[var(--el-color-primary)]">
|
||||
4. 三级联动（带"全部选项"）
|
||||
<el-cascader
|
||||
v-model="selectedOptions4"
|
||||
@ -150,9 +150,3 @@ const handleChange = value => {
|
||||
</el-row>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.imp {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
</style>
|
||||
275
src/views/components/check-button.vue
Normal file
275
src/views/components/check-button.vue
Normal file
@ -0,0 +1,275 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { message } from "@/utils/message";
|
||||
import { getKeyList } from "@pureadmin/utils";
|
||||
|
||||
defineOptions({
|
||||
name: "CheckButton"
|
||||
});
|
||||
|
||||
const spaceSize = ref(20);
|
||||
const size = ref("default");
|
||||
|
||||
const radio = ref("wait");
|
||||
const radioBox = ref("complete");
|
||||
const radioCustom = ref("progress");
|
||||
|
||||
const checkboxGroup = ref(["apple", "tomato"]);
|
||||
const checkboxGroupBox = ref(["cucumber", "onion", "blueberry"]);
|
||||
const checkboxGroupCustom = ref(["tomato", "watermelon", "strawberry"]);
|
||||
|
||||
/** 单选（可控制间距的按钮样式） */
|
||||
const checkTag = ref([
|
||||
{
|
||||
title: "等待中",
|
||||
checked: false
|
||||
},
|
||||
{
|
||||
title: "进行中",
|
||||
checked: true
|
||||
},
|
||||
{
|
||||
title: "已完成",
|
||||
checked: false
|
||||
}
|
||||
]);
|
||||
const curTagMap = ref({});
|
||||
function onChecked(tag, index) {
|
||||
curTagMap.value[index] = Object.assign({
|
||||
...tag,
|
||||
checked: !tag.checked
|
||||
});
|
||||
checkTag.value.map(item => (item.checked = false));
|
||||
checkTag.value[index].checked = curTagMap.value[index].checked;
|
||||
const { title, checked } = curTagMap.value[index];
|
||||
message(checked ? `已选中${title}` : `取消选中${title}`, {
|
||||
type: "success"
|
||||
});
|
||||
}
|
||||
|
||||
/** 多选（可控制间距的按钮样式） */
|
||||
const checkGroupTag = ref([
|
||||
{
|
||||
title: "苹果",
|
||||
checked: true
|
||||
},
|
||||
{
|
||||
title: "西红柿",
|
||||
checked: true
|
||||
},
|
||||
{
|
||||
title: "香蕉",
|
||||
checked: false
|
||||
}
|
||||
]);
|
||||
const curTagGroupMap = ref({});
|
||||
function onGroupChecked(tag, index) {
|
||||
curTagGroupMap.value[index] = Object.assign({
|
||||
...tag,
|
||||
checked: !tag.checked
|
||||
});
|
||||
checkGroupTag.value[index].checked = curTagGroupMap.value[index].checked;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
可选按钮
|
||||
<br />
|
||||
<el-radio-group v-model="size" size="small">
|
||||
<el-radio-button label="large">大尺寸</el-radio-button>
|
||||
<el-radio-button label="default">默认尺寸</el-radio-button>
|
||||
<el-radio-button label="small">小尺寸</el-radio-button>
|
||||
<el-radio-button label="disabled">禁用</el-radio-button>
|
||||
</el-radio-group>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<p class="mb-2">单选（紧凑风格的按钮样式）</p>
|
||||
<el-radio-group
|
||||
v-model="radio"
|
||||
:size="size as any"
|
||||
:disabled="size === 'disabled'"
|
||||
>
|
||||
<el-radio-button label="wait">等待中</el-radio-button>
|
||||
<el-radio-button label="progress">进行中</el-radio-button>
|
||||
<el-radio-button label="complete">已完成</el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-divider />
|
||||
|
||||
<p class="mb-2">单选（带有边框）</p>
|
||||
<el-radio-group
|
||||
v-model="radioBox"
|
||||
:size="size as any"
|
||||
:disabled="size === 'disabled'"
|
||||
>
|
||||
<el-radio label="wait" border>等待中</el-radio>
|
||||
<el-radio label="progress" border>进行中</el-radio>
|
||||
<el-radio label="complete" border>已完成</el-radio>
|
||||
</el-radio-group>
|
||||
<el-divider />
|
||||
|
||||
<p class="mb-2">单选（自定义内容）</p>
|
||||
<el-radio-group
|
||||
v-model="radioCustom"
|
||||
:size="size as any"
|
||||
:disabled="size === 'disabled'"
|
||||
>
|
||||
<el-radio-button label="wait">
|
||||
<span class="flex">
|
||||
<IconifyIconOnline icon="ri:progress-8-fill" class="mr-1" />
|
||||
等待中
|
||||
</span>
|
||||
</el-radio-button>
|
||||
<el-radio-button label="progress">
|
||||
<span class="flex">
|
||||
<IconifyIconOnline icon="ri:progress-6-line" class="mr-1" />
|
||||
进行中
|
||||
</span>
|
||||
</el-radio-button>
|
||||
<el-radio-button label="complete">
|
||||
<span class="flex">
|
||||
<IconifyIconOnline icon="ri:progress-8-line" class="mr-1" />
|
||||
已完成
|
||||
</span>
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-divider />
|
||||
|
||||
<p class="mb-2">多选（紧凑风格的按钮样式）</p>
|
||||
<el-checkbox-group
|
||||
v-model="checkboxGroup"
|
||||
:size="size as any"
|
||||
:disabled="size === 'disabled'"
|
||||
>
|
||||
<el-checkbox-button label="apple">苹果</el-checkbox-button>
|
||||
<el-checkbox-button label="tomato">西红柿</el-checkbox-button>
|
||||
<el-checkbox-button label="banana">香蕉</el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
<el-divider />
|
||||
|
||||
<p class="mb-2">多选（带有边框）</p>
|
||||
<el-checkbox-group
|
||||
v-model="checkboxGroupBox"
|
||||
:size="size as any"
|
||||
:disabled="size === 'disabled'"
|
||||
>
|
||||
<el-checkbox label="cucumber" border>黄瓜</el-checkbox>
|
||||
<el-checkbox label="onion" border>洋葱</el-checkbox>
|
||||
<el-checkbox label="blueberry" border>蓝莓</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
<el-divider />
|
||||
|
||||
<p class="mb-2">多选（来点不一样的体验）</p>
|
||||
<el-checkbox-group
|
||||
v-model="checkboxGroupCustom"
|
||||
class="pure-checkbox"
|
||||
:size="size as any"
|
||||
:disabled="size === 'disabled'"
|
||||
>
|
||||
<el-checkbox-button label="tomato">
|
||||
<span class="flex">
|
||||
<IconifyIconOnline icon="streamline-emojis:tomato" class="mr-1" />
|
||||
番茄
|
||||
</span>
|
||||
</el-checkbox-button>
|
||||
<el-checkbox-button label="watermelon">
|
||||
<span class="flex">
|
||||
<IconifyIconOnline
|
||||
icon="streamline-emojis:watermelon-1"
|
||||
class="mr-1"
|
||||
/>
|
||||
西瓜
|
||||
</span>
|
||||
</el-checkbox-button>
|
||||
<el-checkbox-button label="strawberry">
|
||||
<span class="flex">
|
||||
<IconifyIconOnline
|
||||
icon="streamline-emojis:strawberry-1"
|
||||
class="mr-1"
|
||||
/>
|
||||
草莓
|
||||
</span>
|
||||
</el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
<el-divider />
|
||||
|
||||
<p>可控制间距的按钮样式</p>
|
||||
<el-slider
|
||||
v-model="spaceSize"
|
||||
class="mb-2 !w-[300px]"
|
||||
:show-tooltip="false"
|
||||
:disabled="size === 'disabled'"
|
||||
/>
|
||||
<p class="mb-2">单选</p>
|
||||
<el-space wrap :size="spaceSize">
|
||||
<el-check-tag
|
||||
v-for="(tag, index) in checkTag"
|
||||
:key="index"
|
||||
class="select-none"
|
||||
:checked="tag.checked"
|
||||
@change="onChecked(tag, index)"
|
||||
>
|
||||
{{ tag.title }}
|
||||
</el-check-tag>
|
||||
</el-space>
|
||||
<p class="mb-2 mt-4">
|
||||
多选
|
||||
{{
|
||||
getKeyList(
|
||||
checkGroupTag.filter(tag => tag.checked),
|
||||
"title"
|
||||
)
|
||||
}}
|
||||
</p>
|
||||
<el-space wrap :size="spaceSize">
|
||||
<el-check-tag
|
||||
v-for="(tag, index) in checkGroupTag"
|
||||
:key="index"
|
||||
class="select-none"
|
||||
:checked="tag.checked"
|
||||
@change="onGroupChecked(tag, index)"
|
||||
>
|
||||
{{ tag.title }}
|
||||
</el-check-tag>
|
||||
</el-space>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-divider--horizontal) {
|
||||
margin: 17px 0;
|
||||
}
|
||||
|
||||
:deep(.pure-checkbox) {
|
||||
.el-checkbox-button {
|
||||
/* 选中时的自定义样式 */
|
||||
&.is-checked {
|
||||
.el-checkbox-button__inner {
|
||||
color: var(--el-color-primary);
|
||||
background-color: var(--el-color-primary-light-8);
|
||||
border-color: transparent;
|
||||
border-left-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
/* 禁用时的自定义样式 */
|
||||
&.is-disabled {
|
||||
.el-checkbox-button__inner {
|
||||
color: var(--el-disabled-text-color);
|
||||
background-color: var(
|
||||
--el-button-disabled-bg-color,
|
||||
var(--el-fill-color-blank)
|
||||
);
|
||||
border-color: var(
|
||||
--el-button-disabled-border-color,
|
||||
var(--el-border-color-light)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<p class="mb-2">基本使用</p>
|
||||
<p class="mb-2">基础用法</p>
|
||||
<div v-contextmenu:contextmenu class="wrapper">
|
||||
<code>右键点击此区域</code>
|
||||
</div>
|
||||
|
||||
@ -13,12 +13,12 @@ defineOptions({
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">右键菜单组件</span>
|
||||
<span class="font-medium">右键菜单</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="10">
|
||||
<!-- 基本使用 -->
|
||||
<!-- 基础用法 -->
|
||||
<basic />
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="10">
|
||||
|
||||
35
src/views/components/count-to.vue
Normal file
35
src/views/components/count-to.vue
Normal file
@ -0,0 +1,35 @@
|
||||
<script setup lang="ts">
|
||||
import { ReNormalCountTo, ReboundCountTo } from "@/components/ReCountTo";
|
||||
|
||||
defineOptions({
|
||||
name: "CountTo"
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">数字动画</span>
|
||||
</div>
|
||||
</template>
|
||||
<ReNormalCountTo
|
||||
prefix="$"
|
||||
:duration="1000"
|
||||
:color="'#409EFF'"
|
||||
:fontSize="'2em'"
|
||||
:startVal="1"
|
||||
:endVal="1000"
|
||||
/>
|
||||
<br />
|
||||
<ul class="flex">
|
||||
<ReboundCountTo
|
||||
v-for="(num, inx) of [1, 6, 6, 6]"
|
||||
:key="inx"
|
||||
:i="num"
|
||||
:blur="inx"
|
||||
:delay="inx + 1"
|
||||
/>
|
||||
</ul>
|
||||
</el-card>
|
||||
</template>
|
||||
@ -1,36 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ReNormalCountTo, ReboundCountTo } from "@/components/ReCountTo";
|
||||
|
||||
defineOptions({
|
||||
name: "CountTo"
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">数字动画组件</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="flex items-center">
|
||||
<ReNormalCountTo
|
||||
prefix="$"
|
||||
:duration="1000"
|
||||
:color="'#409EFF'"
|
||||
:fontSize="'2em'"
|
||||
:startVal="1"
|
||||
:endVal="1000"
|
||||
/>
|
||||
<ul class="flex ml-8">
|
||||
<ReboundCountTo
|
||||
v-for="(num, inx) of [1, 6, 6, 6]"
|
||||
:key="inx"
|
||||
:i="num"
|
||||
:blur="inx"
|
||||
:delay="inx + 1"
|
||||
/>
|
||||
</ul>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
@ -1,6 +1,6 @@
|
||||
<script setup lang="tsx">
|
||||
import { ref } from "vue";
|
||||
import avatar from "./avatar.png";
|
||||
import { ref, onBeforeUnmount } from "vue";
|
||||
import ReCropper from "@/components/ReCropper";
|
||||
import { formatBytes } from "@pureadmin/utils";
|
||||
|
||||
@ -9,6 +9,7 @@ defineOptions({
|
||||
});
|
||||
|
||||
const infos = ref();
|
||||
const popoverRef = ref();
|
||||
const refCropper = ref();
|
||||
const showPopover = ref(false);
|
||||
const cropperImg = ref<string>("");
|
||||
@ -18,6 +19,10 @@ function onCropper({ base64, blob, info }) {
|
||||
infos.value = info;
|
||||
cropperImg.value = base64;
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
popoverRef.value.hide();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -25,7 +30,7 @@ function onCropper({ base64, blob, info }) {
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
图片裁剪组件，基于开源的
|
||||
图片裁剪，基于开源的
|
||||
<el-link
|
||||
href="https://fengyuanchen.github.io/cropperjs/"
|
||||
target="_blank"
|
||||
@ -37,11 +42,12 @@ function onCropper({ base64, blob, info }) {
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<div v-loading="!showPopover" element-loading-background="transparent">
|
||||
<el-popover
|
||||
ref="popoverRef"
|
||||
:visible="showPopover"
|
||||
placement="right"
|
||||
width="300px"
|
||||
:teleported="false"
|
||||
>
|
||||
<template #reference>
|
||||
<ReCropper
|
||||
@ -71,5 +77,6 @@ function onCropper({ base64, blob, info }) {
|
||||
</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
@ -20,8 +20,8 @@ const router = useRouter();
|
||||
|
||||
function onBaseClick() {
|
||||
addDialog({
|
||||
title: "基本使用",
|
||||
contentRenderer: () => <p>弹框内容-基本使用</p> // jsx 语法 （注意在.vue文件启用jsx语法，需要在script开启lang="tsx"）
|
||||
title: "基础用法",
|
||||
contentRenderer: () => <p>弹框内容-基础用法</p> // jsx 语法 （注意在.vue文件启用jsx语法，需要在script开启lang="tsx"）
|
||||
});
|
||||
}
|
||||
|
||||
@ -422,7 +422,7 @@ function onBeforeSureClick() {
|
||||
title: "点击底部确定按钮的回调",
|
||||
contentRenderer: () => (
|
||||
<p>
|
||||
弹框内容-点击底部确定按钮的回调（会暂停弹框的关闭，经常用于新增、编辑弹框内容后调用接口）
|
||||
弹框内容-点击底部确定按钮的回调（会暂停弹框的关闭，经常用于新增、修改弹框内容后调用接口）
|
||||
</p>
|
||||
),
|
||||
beforeSure: (done, { options, index }) => {
|
||||
@ -454,15 +454,16 @@ function onBeforeSureClick() {
|
||||
，采用函数式调用弹框组件（更多操作实例请参考
|
||||
<span
|
||||
class="cursor-pointer text-primary"
|
||||
@click="router.push({ name: 'Dept' })"
|
||||
>系统管理页面</span
|
||||
@click="router.push({ name: 'SystemDept' })"
|
||||
>
|
||||
系统管理页面
|
||||
</span>
|
||||
）
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-space wrap>
|
||||
<el-button @click="onBaseClick"> 基本使用 </el-button>
|
||||
<el-button @click="onBaseClick"> 基础用法 </el-button>
|
||||
<el-button @click="onDraggableClick"> 可拖拽 </el-button>
|
||||
<el-button @click="onFullscreenClick"> 全屏 </el-button>
|
||||
<el-button @click="onFullscreenIconClick"> 全屏按钮 </el-button>
|
||||
@ -510,7 +511,7 @@ function onBeforeSureClick() {
|
||||
点击底部取消按钮的回调（会暂停弹框的关闭）
|
||||
</el-button>
|
||||
<el-button @click="onBeforeSureClick">
|
||||
点击底部确定按钮的回调（会暂停弹框的关闭，经常用于新增、编辑弹框内容后调用接口）
|
||||
点击底部确定按钮的回调（会暂停弹框的关闭，经常用于新增、修改弹框内容后调用接口）
|
||||
</el-button>
|
||||
</el-space>
|
||||
</el-card>
|
||||
|
||||
@ -16,6 +16,6 @@ const icon = ref("ep:add-location");
|
||||
<span class="font-medium">图标选择器</span>
|
||||
</div>
|
||||
</template>
|
||||
<IconSelect v-model="icon" />
|
||||
<IconSelect v-model="icon" class="w-[200px]" />
|
||||
</el-card>
|
||||
</template>
|
||||
@ -76,7 +76,7 @@ watch(
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
JSON编辑器组件，采用开源的
|
||||
JSON编辑器，采用开源的
|
||||
<el-link
|
||||
href="https://github.com/leezng/vue-json-pretty"
|
||||
target="_blank"
|
||||
@ -87,7 +87,7 @@ watch(
|
||||
（支持大数据量）。
|
||||
</span>
|
||||
<span class="font-medium">
|
||||
当然我们还有一款代码编辑器组件推荐（这里就不做演示了），采用开源的
|
||||
当然还有一款代码编辑器推荐（这里就不做演示了），采用开源的
|
||||
<el-link
|
||||
href="https://github.com/surmon-china/vue-codemirror"
|
||||
target="_blank"
|
||||
@ -14,7 +14,7 @@ defineOptions({
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium"> Message提示 </span>
|
||||
<span class="font-medium"> 消息提示 </span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -53,7 +53,7 @@ function changeDirection(val) {
|
||||
<el-card class="box-card" shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">无缝滚动示例</span>
|
||||
<span class="font-medium">无缝滚动</span>
|
||||
<el-button
|
||||
class="button"
|
||||
link
|
||||
@ -30,6 +30,30 @@ const optionsBasis: Array<OptionsType> = [
|
||||
}
|
||||
];
|
||||
|
||||
/** tooltip 提示 */
|
||||
const optionsTooltip: Array<OptionsType> = [
|
||||
{
|
||||
label: "周一",
|
||||
tip: "周一启航，新的篇章"
|
||||
},
|
||||
{
|
||||
label: "周二",
|
||||
tip: "周二律动，携手共进"
|
||||
},
|
||||
{
|
||||
label: "周三",
|
||||
tip: "周三昂扬，激情不减"
|
||||
},
|
||||
{
|
||||
label: "周四",
|
||||
tip: "周四精进，事半功倍"
|
||||
},
|
||||
{
|
||||
label: "周五",
|
||||
tip: "周五喜悦，收尾归档"
|
||||
}
|
||||
];
|
||||
|
||||
/** 禁用 */
|
||||
const optionsDisabled: Array<OptionsType> = [
|
||||
{
|
||||
@ -51,7 +75,7 @@ const optionsDisabled: Array<OptionsType> = [
|
||||
}
|
||||
];
|
||||
|
||||
/** 设置图标 */
|
||||
/** 可设置图标 */
|
||||
const optionsIcon: Array<OptionsType> = [
|
||||
{
|
||||
label: "周一",
|
||||
@ -65,8 +89,7 @@ const optionsIcon: Array<OptionsType> = [
|
||||
icon: "terminalWindowLine"
|
||||
},
|
||||
{
|
||||
label: "周四",
|
||||
icon: "streamline-emojis:airplane"
|
||||
label: "周四"
|
||||
},
|
||||
{
|
||||
label: "周五",
|
||||
@ -99,7 +122,7 @@ const optionsLabel: Array<OptionsType> = [
|
||||
label: () => (
|
||||
<div>
|
||||
{h(useRenderIcon(HomeFilled), {
|
||||
class: "m-auto w-[20px] h-[20px]"
|
||||
class: "m-auto mt-1 w-[18px] h-[18px]"
|
||||
})}
|
||||
<p>周一</p>
|
||||
</div>
|
||||
@ -109,7 +132,7 @@ const optionsLabel: Array<OptionsType> = [
|
||||
label: () => (
|
||||
<div>
|
||||
{h(useRenderIcon("terminalWindowLine"), {
|
||||
class: "m-auto w-[20px] h-[20px]"
|
||||
class: "m-auto mt-1 w-[18px] h-[18px]"
|
||||
})}
|
||||
<p>周二</p>
|
||||
</div>
|
||||
@ -119,7 +142,7 @@ const optionsLabel: Array<OptionsType> = [
|
||||
label: () => (
|
||||
<div>
|
||||
{h(useRenderIcon("streamline-emojis:cow-face"), {
|
||||
class: "m-auto w-[20px] h-[20px]"
|
||||
class: "m-auto mt-1 w-[18px] h-[18px]"
|
||||
})}
|
||||
<p>周三</p>
|
||||
</div>
|
||||
@ -142,7 +165,7 @@ const optionsChange: Array<OptionsType> = [
|
||||
}
|
||||
];
|
||||
|
||||
/** change事件 */
|
||||
/** change 事件 */
|
||||
function onChange({ index, option }) {
|
||||
const { label, value } = option;
|
||||
message(`当前选中项索引为：${index}，名字为${label}，值为${value}`, {
|
||||
@ -158,6 +181,7 @@ function onChange({ index, option }) {
|
||||
<span class="font-medium">分段控制器</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-scrollbar>
|
||||
<p class="mb-2">
|
||||
基础用法（v-model）<span class="text-primary">
|
||||
{{ optionsBasis[value].label }}
|
||||
@ -165,10 +189,16 @@ function onChange({ index, option }) {
|
||||
</p>
|
||||
<Segmented v-model="value" :options="optionsBasis" />
|
||||
<el-divider />
|
||||
<p class="mb-2">tooltip 提示</p>
|
||||
<Segmented :options="optionsTooltip" />
|
||||
<el-divider />
|
||||
<p class="mb-2">change 事件</p>
|
||||
<Segmented :options="optionsChange" @change="onChange" />
|
||||
<el-divider />
|
||||
<p class="mb-2">禁用</p>
|
||||
<Segmented :options="optionsDisabled" />
|
||||
<el-divider />
|
||||
<p class="mb-2">设置图标</p>
|
||||
<p class="mb-2">可设置图标</p>
|
||||
<Segmented :options="optionsIcon" />
|
||||
<el-divider />
|
||||
<p class="mb-2">只设置图标</p>
|
||||
@ -176,8 +206,12 @@ function onChange({ index, option }) {
|
||||
<el-divider />
|
||||
<p class="mb-2">自定义渲染</p>
|
||||
<Segmented :options="optionsLabel" />
|
||||
<el-divider />
|
||||
<p class="mb-2">change事件</p>
|
||||
<Segmented :options="optionsChange" @change="onChange" />
|
||||
</el-scrollbar>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
:deep(.el-divider--horizontal) {
|
||||
margin: 17px 0;
|
||||
}
|
||||
</style>
|
||||
@ -9,7 +9,7 @@ defineOptions({
|
||||
const selectRange = ref<string>("");
|
||||
const dataLists = ref([
|
||||
{
|
||||
title: "基本使用",
|
||||
title: "基础用法",
|
||||
echo: [],
|
||||
disabled: false
|
||||
},
|
||||
@ -23,7 +23,7 @@ const settingTB: ContextProps = reactive({
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">切割面板组件</span>
|
||||
<span class="font-medium">切割面板</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="split-pane">
|
||||
@ -31,17 +31,21 @@ const settingTB: ContextProps = reactive({
|
||||
<!-- #paneL 表示指定该组件为左侧面板 -->
|
||||
<template #paneL>
|
||||
<!-- 自定义左侧面板的内容 -->
|
||||
<el-scrollbar>
|
||||
<div class="dv-a">A</div>
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
<!-- #paneR 表示指定该组件为右侧面板 -->
|
||||
<template #paneR>
|
||||
<!-- 再次将右侧面板进行拆分 -->
|
||||
<splitpane :splitSet="settingTB">
|
||||
<template #paneL>
|
||||
<div class="dv-b">B</div>
|
||||
<el-scrollbar><div class="dv-b">B</div></el-scrollbar>
|
||||
</template>
|
||||
<template #paneR>
|
||||
<el-scrollbar>
|
||||
<div class="dv-c">C</div>
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
</splitpane>
|
||||
</template>
|
||||
@ -51,36 +55,25 @@ const settingTB: ContextProps = reactive({
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$W: 100%;
|
||||
$H: 70vh;
|
||||
|
||||
.split-pane {
|
||||
width: 70vw;
|
||||
height: $H;
|
||||
width: 100%;
|
||||
height: calc(100vh - 260px);
|
||||
font-size: 50px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border: 1px solid #e5e6eb;
|
||||
|
||||
.dv-a,
|
||||
.dv-b,
|
||||
.dv-c {
|
||||
width: $W;
|
||||
height: $W;
|
||||
line-height: $H;
|
||||
.dv-a {
|
||||
padding-top: 30vh;
|
||||
color: rgba($color: dodgerblue, $alpha: 80%);
|
||||
}
|
||||
|
||||
.dv-b,
|
||||
.dv-c {
|
||||
line-height: 250px;
|
||||
}
|
||||
|
||||
.dv-b {
|
||||
padding-top: 10vh;
|
||||
color: rgba($color: #000, $alpha: 80%);
|
||||
}
|
||||
|
||||
.dv-c {
|
||||
padding-top: 18vh;
|
||||
color: rgba($color: #ce272d, $alpha: 80%);
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { markRaw } from "vue";
|
||||
import { randomGradient } from "@pureadmin/utils";
|
||||
import { useRenderFlicker } from "@/components/ReFlicker";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import Iphone from "@iconify-icons/ep/iphone";
|
||||
@ -11,15 +12,26 @@ defineOptions({
|
||||
const { lastBuildTime } = __APP_INFO__;
|
||||
const activities = [
|
||||
{
|
||||
content: "支持圆点闪动",
|
||||
content: "支持圆点发光",
|
||||
timestamp: lastBuildTime,
|
||||
icon: markRaw(useRenderFlicker())
|
||||
},
|
||||
{
|
||||
content: "支持方形闪动",
|
||||
content: "支持方形发光",
|
||||
timestamp: lastBuildTime,
|
||||
icon: markRaw(useRenderFlicker({ borderRadius: 0, background: "#67C23A" }))
|
||||
},
|
||||
{
|
||||
content: "支持渐变发光",
|
||||
timestamp: lastBuildTime,
|
||||
icon: markRaw(
|
||||
useRenderFlicker({
|
||||
background: randomGradient({
|
||||
randomizeHue: true
|
||||
})
|
||||
})
|
||||
)
|
||||
},
|
||||
{
|
||||
content: "支持默认颜色",
|
||||
timestamp: lastBuildTime
|
||||
@ -70,7 +82,7 @@ const activities = [
|
||||
placement="bottom"
|
||||
>
|
||||
<div class="message">
|
||||
vue-pure-admin是基于Vue3.0+TypeScript+Vite+Element-Plus编写的一套后台管理系统
|
||||
vue-pure-admin 是一款开源免费且开箱即用的中后台管理系统模版
|
||||
</div>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
@ -56,7 +56,7 @@ export function useColumns() {
|
||||
];
|
||||
|
||||
const handleEdit = (index: number, row) => {
|
||||
message(`您编辑了第 ${index} 行，数据为：${JSON.stringify(row)}`, {
|
||||
message(`您修改了第 ${index} 行，数据为：${JSON.stringify(row)}`, {
|
||||
type: "success"
|
||||
});
|
||||
};
|
||||
|
||||
@ -15,7 +15,7 @@ export function useColumns() {
|
||||
);
|
||||
|
||||
const handleEdit = (index: number, row) => {
|
||||
message(`您编辑了第 ${index} 行，数据为：${JSON.stringify(row)}`, {
|
||||
message(`您修改了第 ${index} 行，数据为：${JSON.stringify(row)}`, {
|
||||
type: "success"
|
||||
});
|
||||
};
|
||||
|
||||
@ -30,11 +30,11 @@ export function useColumns() {
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
label: "编辑",
|
||||
label: "修改",
|
||||
tips: "Edit",
|
||||
fn: row =>
|
||||
message(
|
||||
`您编辑了第 ${
|
||||
`您修改了第 ${
|
||||
dataList.value.findIndex(v => v.id === row.id) + 1
|
||||
} 行，数据为：${JSON.stringify(row)}`,
|
||||
{
|
||||
|
||||
@ -5,11 +5,11 @@ import { clone, delay } from "@pureadmin/utils";
|
||||
import EditPen from "@iconify-icons/ep/edit-pen";
|
||||
import Check from "@iconify-icons/ep/check";
|
||||
|
||||
// 温馨提示：编辑整行方法雷同，将cellRenderer后面渲染的组件抽出来做对应处理即可
|
||||
// 温馨提示：修改整行方法雷同，将cellRenderer后面渲染的组件抽出来做对应处理即可
|
||||
export function useColumns() {
|
||||
// 编辑值（可多个）
|
||||
// 修改值（可多个）
|
||||
const inputValMap = ref({});
|
||||
// 是否正处于编辑状态（可多个）
|
||||
// 是否正处于修改状态（可多个）
|
||||
const editStatus = ref({});
|
||||
// 当前激活的单元格（唯一）
|
||||
const activeIndex = ref(-1);
|
||||
@ -43,7 +43,7 @@ export function useColumns() {
|
||||
|
||||
const columns: TableColumnList = [
|
||||
{
|
||||
label: "ID（可编辑）",
|
||||
label: "ID（可修改）",
|
||||
prop: "id",
|
||||
// class="flex-bc" flex-bc 代表 flex justify-between items-center 具体看 src/style/tailwind.css 文件
|
||||
cellRenderer: ({ row, index }) => (
|
||||
@ -93,7 +93,7 @@ export function useColumns() {
|
||||
inputValMap.value[index] = Object.assign({}, inputValMap.value[index], {
|
||||
value: id
|
||||
});
|
||||
// 处于编辑状态
|
||||
// 处于修改状态
|
||||
editStatus.value[index] = Object.assign({}, editStatus.value[index], {
|
||||
editing: true
|
||||
});
|
||||
@ -112,14 +112,14 @@ export function useColumns() {
|
||||
function onSure(index) {
|
||||
dataList.value[index].id = inputValMap.value[index].value;
|
||||
message(
|
||||
`您编辑了第 ${index + 1} 行，编辑后数据为：${JSON.stringify(
|
||||
`您修改了第 ${index + 1} 行，修改后数据为：${JSON.stringify(
|
||||
dataList.value[index]
|
||||
)}`,
|
||||
{
|
||||
type: "success"
|
||||
}
|
||||
);
|
||||
// 编辑状态关闭
|
||||
// 修改状态关闭
|
||||
editStatus.value[index] = Object.assign({}, editStatus.value[index], {
|
||||
editing: false
|
||||
});
|
||||
|
||||
@ -53,7 +53,7 @@ export const list = [
|
||||
{
|
||||
key: "edit",
|
||||
content: rendContent("edit"),
|
||||
title: "单元格编辑",
|
||||
title: "单元格修改",
|
||||
component: Edit
|
||||
},
|
||||
{
|
||||
|
||||
@ -10,7 +10,7 @@ import Refresh from "@iconify-icons/ep/refresh";
|
||||
import AddFill from "@iconify-icons/ri/add-circle-line";
|
||||
|
||||
defineOptions({
|
||||
name: "Dept"
|
||||
name: "SystemDept"
|
||||
});
|
||||
|
||||
const formRef = ref();
|
||||
@ -71,7 +71,7 @@ const {
|
||||
</el-form>
|
||||
|
||||
<PureTableBar
|
||||
title="部门列表（仅演示，操作后不生效）"
|
||||
title="部门管理（仅演示，操作后不生效）"
|
||||
:columns="columns"
|
||||
:tableRef="tableRef?.getTableRef()"
|
||||
@refresh="onSearch"
|
||||
@ -111,10 +111,20 @@ const {
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon(EditPen)"
|
||||
@click="openDialog('编辑', row)"
|
||||
:icon="useRenderIcon(AddFill)"
|
||||
@click="openDialog('新增', { parentId: row.id } as any)"
|
||||
>
|
||||
编辑
|
||||
新增
|
||||
</el-button>
|
||||
<el-button
|
||||
class="reset-margin"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon(EditPen)"
|
||||
@click="openDialog('修改', row)"
|
||||
>
|
||||
修改
|
||||
</el-button>
|
||||
<el-popconfirm
|
||||
:title="`是否确认删除部门名称为${row.name}的这条数据`"
|
||||
|
||||
@ -57,7 +57,7 @@ export function useDept() {
|
||||
{
|
||||
label: "操作",
|
||||
fixed: "right",
|
||||
width: 160,
|
||||
width: 210,
|
||||
slot: "operation"
|
||||
}
|
||||
];
|
||||
@ -141,7 +141,7 @@ export function useDept() {
|
||||
// 实际开发先调用新增接口，再进行下面操作
|
||||
chores();
|
||||
} else {
|
||||
// 实际开发先调用编辑接口，再进行下面操作
|
||||
// 实际开发先调用修改接口，再进行下面操作
|
||||
chores();
|
||||
}
|
||||
}
|
||||
@ -168,7 +168,7 @@ export function useDept() {
|
||||
onSearch,
|
||||
/** 重置 */
|
||||
resetForm,
|
||||
/** 新增、编辑部门 */
|
||||
/** 新增、修改部门 */
|
||||
openDialog,
|
||||
/** 删除部门 */
|
||||
handleDelete,
|
||||
|
||||
@ -13,7 +13,7 @@ import Menu from "@iconify-icons/ep/menu";
|
||||
import AddFill from "@iconify-icons/ri/add-circle-line";
|
||||
|
||||
defineOptions({
|
||||
name: "Role"
|
||||
name: "SystemRole"
|
||||
});
|
||||
|
||||
const formRef = ref();
|
||||
@ -87,7 +87,7 @@ const {
|
||||
</el-form>
|
||||
|
||||
<PureTableBar
|
||||
title="角色列表（仅演示，操作后不生效）"
|
||||
title="角色管理（仅演示，操作后不生效）"
|
||||
:columns="columns"
|
||||
@refresh="onSearch"
|
||||
>
|
||||
@ -127,7 +127,7 @@ const {
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon(EditPen)"
|
||||
@click="openDialog('编辑', row)"
|
||||
@click="openDialog('修改', row)"
|
||||
>
|
||||
修改
|
||||
</el-button>
|
||||
|
||||
@ -200,7 +200,7 @@ export function useRole() {
|
||||
// 实际开发先调用新增接口，再进行下面操作
|
||||
chores();
|
||||
} else {
|
||||
// 实际开发先调用编辑接口，再进行下面操作
|
||||
// 实际开发先调用修改接口，再进行下面操作
|
||||
chores();
|
||||
}
|
||||
}
|
||||
|
||||
@ -15,7 +15,7 @@ import Refresh from "@iconify-icons/ep/refresh";
|
||||
import AddFill from "@iconify-icons/ri/add-circle-line";
|
||||
|
||||
defineOptions({
|
||||
name: "User"
|
||||
name: "SystemUser"
|
||||
});
|
||||
|
||||
const treeRef = ref();
|
||||
@ -173,7 +173,7 @@ const {
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon(EditPen)"
|
||||
@click="openDialog('编辑', row)"
|
||||
@click="openDialog('修改', row)"
|
||||
>
|
||||
修改
|
||||
</el-button>
|
||||
|
||||
@ -342,7 +342,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
|
||||
// 实际开发先调用新增接口，再进行下面操作
|
||||
chores();
|
||||
} else {
|
||||
// 实际开发先调用编辑接口，再进行下面操作
|
||||
// 实际开发先调用修改接口，再进行下面操作
|
||||
chores();
|
||||
}
|
||||
}
|
||||
|
||||
2
types/router.d.ts
vendored
2
types/router.d.ts
vendored
@ -32,7 +32,7 @@ declare global {
|
||||
frameSrc?: string;
|
||||
/** `iframe`页是否开启首次加载动画（默认`true`）`可选` */
|
||||
frameLoading?: boolean;
|
||||
/** 页面加载动画（有两种形式，一种直接采用vue内置的`transitions`动画，另一种是使用`animate.css`写进、离场动画）`可选` */
|
||||
/** 页面加载动画（两种模式，第二种权重更高，第一种直接采用`vue`内置的`transitions`动画，第二种是使用`animate.css`编写进、离场动画，平台更推荐使用第二种模式，已经内置了`animate.css`，直接写对应的动画名即可）`可选` */
|
||||
transition?: {
|
||||
/**
|
||||
* @description 当前路由动画效果
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user