mirror of
https://github.com/cool-team-official/cool-admin-vue.git
synced 2025-12-10 11:52:53 +00:00
优化
This commit is contained in:
parent
e31bce93d1
commit
440c103fc1
@ -1095,6 +1095,137 @@ function open() {
|
|||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## 选择表格 示例
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<template>
|
||||||
|
<div class="scope">
|
||||||
|
<div class="h">
|
||||||
|
<el-tag size="small" effect="dark" disable-transitions>select-table</el-tag>
|
||||||
|
<span>选择表格</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="c">
|
||||||
|
<el-button @click="open">预览</el-button>
|
||||||
|
<demo-code :files="['crud/select-table.vue']" />
|
||||||
|
|
||||||
|
<!-- 自定义表格组件 -->
|
||||||
|
<cl-form ref="Form" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="f">
|
||||||
|
<span class="date">2025-02-07</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { useForm } from '@cool-vue/crud';
|
||||||
|
import { useCool } from '/@/cool';
|
||||||
|
import UserSelect from '/$/user/components/user-select.vue';
|
||||||
|
|
||||||
|
const { service } = useCool();
|
||||||
|
const Form = useForm();
|
||||||
|
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
label: '头像',
|
||||||
|
prop: 'headImg',
|
||||||
|
component: {
|
||||||
|
name: 'cl-avatar'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '昵称',
|
||||||
|
prop: 'nickName'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '创建时间',
|
||||||
|
prop: 'createTime'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
function open() {
|
||||||
|
Form.value?.open({
|
||||||
|
width: '800px',
|
||||||
|
title: '选择表格',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: '多选 - default',
|
||||||
|
prop: 'a',
|
||||||
|
value: [],
|
||||||
|
component: {
|
||||||
|
vm: UserSelect,
|
||||||
|
props: {
|
||||||
|
multiple: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
span: 12
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '单选 - default',
|
||||||
|
prop: 'b',
|
||||||
|
component: {
|
||||||
|
name: 'cl-select-table',
|
||||||
|
props: {
|
||||||
|
pickerType: 'default',
|
||||||
|
multiple: false,
|
||||||
|
columns,
|
||||||
|
service: service.base.sys.user
|
||||||
|
}
|
||||||
|
},
|
||||||
|
span: 12
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '多选 - text',
|
||||||
|
prop: 'c',
|
||||||
|
value: [],
|
||||||
|
component: {
|
||||||
|
name: 'cl-select-table',
|
||||||
|
props: {
|
||||||
|
pickerType: 'text',
|
||||||
|
multiple: true,
|
||||||
|
columns,
|
||||||
|
service: service.base.sys.user
|
||||||
|
}
|
||||||
|
},
|
||||||
|
span: 12
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '单选 - text',
|
||||||
|
prop: 'd',
|
||||||
|
component: {
|
||||||
|
name: 'cl-select-table',
|
||||||
|
props: {
|
||||||
|
pickerType: 'text',
|
||||||
|
multiple: false,
|
||||||
|
columns,
|
||||||
|
service: service.base.sys.user
|
||||||
|
}
|
||||||
|
},
|
||||||
|
span: 12
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '多选 - table',
|
||||||
|
prop: 'e',
|
||||||
|
value: [],
|
||||||
|
component: {
|
||||||
|
name: 'cl-select-table',
|
||||||
|
props: {
|
||||||
|
pickerType: 'table',
|
||||||
|
multiple: true,
|
||||||
|
columns,
|
||||||
|
service: service.base.sys.user
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
## Service 配置 示例
|
## Service 配置 示例
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
@ -1278,4 +1409,72 @@ function open() {
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
## 选择成员 示例
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<template>
|
||||||
|
<div class="scope">
|
||||||
|
<div class="h">
|
||||||
|
<el-tag size="small" effect="dark" disable-transitions>user-select</el-tag>
|
||||||
|
<span>选择成员</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="c">
|
||||||
|
<el-button @click="open">预览</el-button>
|
||||||
|
<demo-code :files="['crud/user-select.vue']" />
|
||||||
|
|
||||||
|
<!-- 自定义表格组件 -->
|
||||||
|
<cl-form ref="Form" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="f">
|
||||||
|
<span class="date">2025-02-07</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { useForm } from '@cool-vue/crud';
|
||||||
|
|
||||||
|
const Form = useForm();
|
||||||
|
|
||||||
|
function open() {
|
||||||
|
Form.value?.open({
|
||||||
|
title: '选择成员',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: '单选',
|
||||||
|
prop: 'userId',
|
||||||
|
component: {
|
||||||
|
name: 'cl-user-select',
|
||||||
|
props: {
|
||||||
|
multiple: false,
|
||||||
|
onChange(val) {
|
||||||
|
console.log(val);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '多选',
|
||||||
|
prop: 'userIds',
|
||||||
|
component: {
|
||||||
|
name: 'cl-user-select',
|
||||||
|
props: {
|
||||||
|
multiple: true,
|
||||||
|
onChange(val) {
|
||||||
|
console.log(val);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
```
|
```
|
||||||
@ -1280,7 +1280,6 @@ function open() {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '年龄',
|
|
||||||
prop: 'age',
|
prop: 'age',
|
||||||
component: {
|
component: {
|
||||||
name: 'el-input-number'
|
name: 'el-input-number'
|
||||||
@ -1291,7 +1290,9 @@ function open() {
|
|||||||
],
|
],
|
||||||
on: {
|
on: {
|
||||||
// 打开时触发
|
// 打开时触发
|
||||||
open() {},
|
open() {
|
||||||
|
console.log(Form.value?.validateField);
|
||||||
|
},
|
||||||
|
|
||||||
// 关闭时触发。当配置该方法时,关闭事件会被阻断,使用 done() 关闭窗口
|
// 关闭时触发。当配置该方法时,关闭事件会被阻断,使用 done() 关闭窗口
|
||||||
close(action, done) {
|
close(action, done) {
|
||||||
|
|||||||
@ -13,7 +13,7 @@
|
|||||||
"format": "prettier --write src/"
|
"format": "prettier --write src/"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@cool-vue/crud": "^8.0.1",
|
"@cool-vue/crud": "^8.0.2",
|
||||||
"@element-plus/icons-vue": "^2.3.1",
|
"@element-plus/icons-vue": "^2.3.1",
|
||||||
"@vueuse/core": "^12.5.0",
|
"@vueuse/core": "^12.5.0",
|
||||||
"@wangeditor/editor": "^5.1.23",
|
"@wangeditor/editor": "^5.1.23",
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@cool-vue/crud",
|
"name": "@cool-vue/crud",
|
||||||
"version": "8.0.1",
|
"version": "8.0.2",
|
||||||
"private": false,
|
"private": false,
|
||||||
"main": "./dist/index.umd.js",
|
"main": "./dist/index.umd.js",
|
||||||
"module": "./dist/index.es.js",
|
"module": "./dist/index.es.js",
|
||||||
|
|||||||
@ -222,15 +222,17 @@ const ClContextMenu = defineComponent({
|
|||||||
"is-active": ids.value.includes(id),
|
"is-active": ids.value.includes(id),
|
||||||
"is-ellipsis": e.ellipsis ?? true,
|
"is-ellipsis": e.ellipsis ?? true,
|
||||||
"is-disabled": e.disabled
|
"is-disabled": e.disabled
|
||||||
}}>
|
}}
|
||||||
|
onClick={(ev: MouseEvent) => {
|
||||||
|
rowClick(e, id);
|
||||||
|
ev.stopPropagation();
|
||||||
|
}}
|
||||||
|
>
|
||||||
{/* 前缀图标 */}
|
{/* 前缀图标 */}
|
||||||
{e.prefixIcon && <ElIcon>{h(toRaw(e.prefixIcon))}</ElIcon>}
|
{e.prefixIcon && <ElIcon>{h(toRaw(e.prefixIcon))}</ElIcon>}
|
||||||
|
|
||||||
{/* 标题 */}
|
{/* 标题 */}
|
||||||
<span
|
<span>
|
||||||
onClick={() => {
|
|
||||||
rowClick(e, id);
|
|
||||||
}}>
|
|
||||||
{e.label}
|
{e.label}
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
|
|||||||
26
pnpm-lock.yaml
generated
26
pnpm-lock.yaml
generated
@ -9,8 +9,8 @@ importers:
|
|||||||
.:
|
.:
|
||||||
dependencies:
|
dependencies:
|
||||||
'@cool-vue/crud':
|
'@cool-vue/crud':
|
||||||
specifier: ^8.0.1
|
specifier: ^8.0.2
|
||||||
version: 8.0.1(typescript@5.5.4)
|
version: 8.0.2(typescript@5.5.4)
|
||||||
'@element-plus/icons-vue':
|
'@element-plus/icons-vue':
|
||||||
specifier: ^2.3.1
|
specifier: ^2.3.1
|
||||||
version: 2.3.1(vue@3.5.13(typescript@5.5.4))
|
version: 2.3.1(vue@3.5.13(typescript@5.5.4))
|
||||||
@ -331,8 +331,8 @@ packages:
|
|||||||
resolution: {integrity: sha512-Y3IR1cRnOxOCDvMmNiym7XpXQ93iGDDPHx+Zj+NM+rg0fBaShfQLkg+hKPaZCEvg5N/LeCo4+Rj/i3FuJsIQaw==}
|
resolution: {integrity: sha512-Y3IR1cRnOxOCDvMmNiym7XpXQ93iGDDPHx+Zj+NM+rg0fBaShfQLkg+hKPaZCEvg5N/LeCo4+Rj/i3FuJsIQaw==}
|
||||||
engines: {node: '>=6.9.0'}
|
engines: {node: '>=6.9.0'}
|
||||||
|
|
||||||
'@cool-vue/crud@8.0.1':
|
'@cool-vue/crud@8.0.2':
|
||||||
resolution: {integrity: sha512-qITCLcmc5gCiqF2J2I5KsiywqTc/+4Umqy9MBx1dFsYvYfrGcqoRcybcz8cTO4CEDyIv0icymt4PRuKOf01igw==}
|
resolution: {integrity: sha512-7fXGfn1Li0n6vtHSj40mu2VuZV2L/T/HDllJXHMKq2ODo9EAttjcuTN/Z8b3KuOFHYpWp5iN+FqIzRNGEDxjUQ==}
|
||||||
|
|
||||||
'@cool-vue/vite-plugin@8.0.3':
|
'@cool-vue/vite-plugin@8.0.3':
|
||||||
resolution: {integrity: sha512-5vxH/EyPXOJvKClllhaTZUeWh9XRJZwZJxyRlHuK2nAuD+pQxTXZ85WB4QPociMrJcOC8uZ/97EdrS4yG2Jv3Q==}
|
resolution: {integrity: sha512-5vxH/EyPXOJvKClllhaTZUeWh9XRJZwZJxyRlHuK2nAuD+pQxTXZ85WB4QPociMrJcOC8uZ/97EdrS4yG2Jv3Q==}
|
||||||
@ -679,42 +679,36 @@ packages:
|
|||||||
engines: {node: '>= 10.0.0'}
|
engines: {node: '>= 10.0.0'}
|
||||||
cpu: [arm]
|
cpu: [arm]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
libc: [glibc]
|
|
||||||
|
|
||||||
'@parcel/watcher-linux-arm-musl@2.5.1':
|
'@parcel/watcher-linux-arm-musl@2.5.1':
|
||||||
resolution: {integrity: sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==}
|
resolution: {integrity: sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==}
|
||||||
engines: {node: '>= 10.0.0'}
|
engines: {node: '>= 10.0.0'}
|
||||||
cpu: [arm]
|
cpu: [arm]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
libc: [musl]
|
|
||||||
|
|
||||||
'@parcel/watcher-linux-arm64-glibc@2.5.1':
|
'@parcel/watcher-linux-arm64-glibc@2.5.1':
|
||||||
resolution: {integrity: sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==}
|
resolution: {integrity: sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==}
|
||||||
engines: {node: '>= 10.0.0'}
|
engines: {node: '>= 10.0.0'}
|
||||||
cpu: [arm64]
|
cpu: [arm64]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
libc: [glibc]
|
|
||||||
|
|
||||||
'@parcel/watcher-linux-arm64-musl@2.5.1':
|
'@parcel/watcher-linux-arm64-musl@2.5.1':
|
||||||
resolution: {integrity: sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==}
|
resolution: {integrity: sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==}
|
||||||
engines: {node: '>= 10.0.0'}
|
engines: {node: '>= 10.0.0'}
|
||||||
cpu: [arm64]
|
cpu: [arm64]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
libc: [musl]
|
|
||||||
|
|
||||||
'@parcel/watcher-linux-x64-glibc@2.5.1':
|
'@parcel/watcher-linux-x64-glibc@2.5.1':
|
||||||
resolution: {integrity: sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==}
|
resolution: {integrity: sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==}
|
||||||
engines: {node: '>= 10.0.0'}
|
engines: {node: '>= 10.0.0'}
|
||||||
cpu: [x64]
|
cpu: [x64]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
libc: [glibc]
|
|
||||||
|
|
||||||
'@parcel/watcher-linux-x64-musl@2.5.1':
|
'@parcel/watcher-linux-x64-musl@2.5.1':
|
||||||
resolution: {integrity: sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==}
|
resolution: {integrity: sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==}
|
||||||
engines: {node: '>= 10.0.0'}
|
engines: {node: '>= 10.0.0'}
|
||||||
cpu: [x64]
|
cpu: [x64]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
libc: [musl]
|
|
||||||
|
|
||||||
'@parcel/watcher-win32-arm64@2.5.1':
|
'@parcel/watcher-win32-arm64@2.5.1':
|
||||||
resolution: {integrity: sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==}
|
resolution: {integrity: sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==}
|
||||||
@ -792,61 +786,51 @@ packages:
|
|||||||
resolution: {integrity: sha512-A4iphFGNkWRd+5m3VIGuqHnG3MVnqKe7Al57u9mwgbyZ2/xF9Jio72MaY7xxh+Y87VAHmGQr73qoKL9HPbXj1g==}
|
resolution: {integrity: sha512-A4iphFGNkWRd+5m3VIGuqHnG3MVnqKe7Al57u9mwgbyZ2/xF9Jio72MaY7xxh+Y87VAHmGQr73qoKL9HPbXj1g==}
|
||||||
cpu: [arm]
|
cpu: [arm]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
libc: [glibc]
|
|
||||||
|
|
||||||
'@rollup/rollup-linux-arm-musleabihf@4.34.8':
|
'@rollup/rollup-linux-arm-musleabihf@4.34.8':
|
||||||
resolution: {integrity: sha512-S0lqKLfTm5u+QTxlFiAnb2J/2dgQqRy/XvziPtDd1rKZFXHTyYLoVL58M/XFwDI01AQCDIevGLbQrMAtdyanpA==}
|
resolution: {integrity: sha512-S0lqKLfTm5u+QTxlFiAnb2J/2dgQqRy/XvziPtDd1rKZFXHTyYLoVL58M/XFwDI01AQCDIevGLbQrMAtdyanpA==}
|
||||||
cpu: [arm]
|
cpu: [arm]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
libc: [musl]
|
|
||||||
|
|
||||||
'@rollup/rollup-linux-arm64-gnu@4.34.8':
|
'@rollup/rollup-linux-arm64-gnu@4.34.8':
|
||||||
resolution: {integrity: sha512-jpz9YOuPiSkL4G4pqKrus0pn9aYwpImGkosRKwNi+sJSkz+WU3anZe6hi73StLOQdfXYXC7hUfsQlTnjMd3s1A==}
|
resolution: {integrity: sha512-jpz9YOuPiSkL4G4pqKrus0pn9aYwpImGkosRKwNi+sJSkz+WU3anZe6hi73StLOQdfXYXC7hUfsQlTnjMd3s1A==}
|
||||||
cpu: [arm64]
|
cpu: [arm64]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
libc: [glibc]
|
|
||||||
|
|
||||||
'@rollup/rollup-linux-arm64-musl@4.34.8':
|
'@rollup/rollup-linux-arm64-musl@4.34.8':
|
||||||
resolution: {integrity: sha512-KdSfaROOUJXgTVxJNAZ3KwkRc5nggDk+06P6lgi1HLv1hskgvxHUKZ4xtwHkVYJ1Rep4GNo+uEfycCRRxht7+Q==}
|
resolution: {integrity: sha512-KdSfaROOUJXgTVxJNAZ3KwkRc5nggDk+06P6lgi1HLv1hskgvxHUKZ4xtwHkVYJ1Rep4GNo+uEfycCRRxht7+Q==}
|
||||||
cpu: [arm64]
|
cpu: [arm64]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
libc: [musl]
|
|
||||||
|
|
||||||
'@rollup/rollup-linux-loongarch64-gnu@4.34.8':
|
'@rollup/rollup-linux-loongarch64-gnu@4.34.8':
|
||||||
resolution: {integrity: sha512-NyF4gcxwkMFRjgXBM6g2lkT58OWztZvw5KkV2K0qqSnUEqCVcqdh2jN4gQrTn/YUpAcNKyFHfoOZEer9nwo6uQ==}
|
resolution: {integrity: sha512-NyF4gcxwkMFRjgXBM6g2lkT58OWztZvw5KkV2K0qqSnUEqCVcqdh2jN4gQrTn/YUpAcNKyFHfoOZEer9nwo6uQ==}
|
||||||
cpu: [loong64]
|
cpu: [loong64]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
libc: [glibc]
|
|
||||||
|
|
||||||
'@rollup/rollup-linux-powerpc64le-gnu@4.34.8':
|
'@rollup/rollup-linux-powerpc64le-gnu@4.34.8':
|
||||||
resolution: {integrity: sha512-LMJc999GkhGvktHU85zNTDImZVUCJ1z/MbAJTnviiWmmjyckP5aQsHtcujMjpNdMZPT2rQEDBlJfubhs3jsMfw==}
|
resolution: {integrity: sha512-LMJc999GkhGvktHU85zNTDImZVUCJ1z/MbAJTnviiWmmjyckP5aQsHtcujMjpNdMZPT2rQEDBlJfubhs3jsMfw==}
|
||||||
cpu: [ppc64]
|
cpu: [ppc64]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
libc: [glibc]
|
|
||||||
|
|
||||||
'@rollup/rollup-linux-riscv64-gnu@4.34.8':
|
'@rollup/rollup-linux-riscv64-gnu@4.34.8':
|
||||||
resolution: {integrity: sha512-xAQCAHPj8nJq1PI3z8CIZzXuXCstquz7cIOL73HHdXiRcKk8Ywwqtx2wrIy23EcTn4aZ2fLJNBB8d0tQENPCmw==}
|
resolution: {integrity: sha512-xAQCAHPj8nJq1PI3z8CIZzXuXCstquz7cIOL73HHdXiRcKk8Ywwqtx2wrIy23EcTn4aZ2fLJNBB8d0tQENPCmw==}
|
||||||
cpu: [riscv64]
|
cpu: [riscv64]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
libc: [glibc]
|
|
||||||
|
|
||||||
'@rollup/rollup-linux-s390x-gnu@4.34.8':
|
'@rollup/rollup-linux-s390x-gnu@4.34.8':
|
||||||
resolution: {integrity: sha512-DdePVk1NDEuc3fOe3dPPTb+rjMtuFw89gw6gVWxQFAuEqqSdDKnrwzZHrUYdac7A7dXl9Q2Vflxpme15gUWQFA==}
|
resolution: {integrity: sha512-DdePVk1NDEuc3fOe3dPPTb+rjMtuFw89gw6gVWxQFAuEqqSdDKnrwzZHrUYdac7A7dXl9Q2Vflxpme15gUWQFA==}
|
||||||
cpu: [s390x]
|
cpu: [s390x]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
libc: [glibc]
|
|
||||||
|
|
||||||
'@rollup/rollup-linux-x64-gnu@4.34.8':
|
'@rollup/rollup-linux-x64-gnu@4.34.8':
|
||||||
resolution: {integrity: sha512-8y7ED8gjxITUltTUEJLQdgpbPh1sUQ0kMTmufRF/Ns5tI9TNMNlhWtmPKKHCU0SilX+3MJkZ0zERYYGIVBYHIA==}
|
resolution: {integrity: sha512-8y7ED8gjxITUltTUEJLQdgpbPh1sUQ0kMTmufRF/Ns5tI9TNMNlhWtmPKKHCU0SilX+3MJkZ0zERYYGIVBYHIA==}
|
||||||
cpu: [x64]
|
cpu: [x64]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
libc: [glibc]
|
|
||||||
|
|
||||||
'@rollup/rollup-linux-x64-musl@4.34.8':
|
'@rollup/rollup-linux-x64-musl@4.34.8':
|
||||||
resolution: {integrity: sha512-SCXcP0ZpGFIe7Ge+McxY5zKxiEI5ra+GT3QRxL0pMMtxPfpyLAKleZODi1zdRHkz5/BhueUrYtYVgubqe9JBNQ==}
|
resolution: {integrity: sha512-SCXcP0ZpGFIe7Ge+McxY5zKxiEI5ra+GT3QRxL0pMMtxPfpyLAKleZODi1zdRHkz5/BhueUrYtYVgubqe9JBNQ==}
|
||||||
cpu: [x64]
|
cpu: [x64]
|
||||||
os: [linux]
|
os: [linux]
|
||||||
libc: [musl]
|
|
||||||
|
|
||||||
'@rollup/rollup-win32-arm64-msvc@4.34.8':
|
'@rollup/rollup-win32-arm64-msvc@4.34.8':
|
||||||
resolution: {integrity: sha512-YHYsgzZgFJzTRbth4h7Or0m5O74Yda+hLin0irAIobkLQFRQd1qWmnoVfwmKm9TXIZVAD0nZ+GEb2ICicLyCnQ==}
|
resolution: {integrity: sha512-YHYsgzZgFJzTRbth4h7Or0m5O74Yda+hLin0irAIobkLQFRQd1qWmnoVfwmKm9TXIZVAD0nZ+GEb2ICicLyCnQ==}
|
||||||
@ -3079,7 +3063,7 @@ snapshots:
|
|||||||
'@babel/helper-string-parser': 7.25.9
|
'@babel/helper-string-parser': 7.25.9
|
||||||
'@babel/helper-validator-identifier': 7.25.9
|
'@babel/helper-validator-identifier': 7.25.9
|
||||||
|
|
||||||
'@cool-vue/crud@8.0.1(typescript@5.5.4)':
|
'@cool-vue/crud@8.0.2(typescript@5.5.4)':
|
||||||
dependencies:
|
dependencies:
|
||||||
'@vue/runtime-core': 3.5.13
|
'@vue/runtime-core': 3.5.13
|
||||||
element-plus: 2.9.4(vue@3.5.13(typescript@5.5.4))
|
element-plus: 2.9.4(vue@3.5.13(typescript@5.5.4))
|
||||||
|
|||||||
@ -0,0 +1,71 @@
|
|||||||
|
<template>
|
||||||
|
<div class="scope">
|
||||||
|
<div class="h">
|
||||||
|
<el-tag size="small" effect="dark" disable-transitions>context-menu</el-tag>
|
||||||
|
<span>右键菜单</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="c">
|
||||||
|
<el-button @contextmenu="onContextMenu">预览</el-button>
|
||||||
|
<demo-code :files="['other/context-menu.vue']" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="f">
|
||||||
|
<span class="date">2025-02-22</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ContextMenu } from '@cool-vue/crud';
|
||||||
|
import { Edit } from '@element-plus/icons-vue';
|
||||||
|
import { ElMessage } from 'element-plus';
|
||||||
|
|
||||||
|
function onContextMenu(e: MouseEvent) {
|
||||||
|
ContextMenu.open(e, {
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
label: '基础',
|
||||||
|
callback: done => {
|
||||||
|
ElMessage.success('新增');
|
||||||
|
done();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '图标',
|
||||||
|
suffixIcon: Edit,
|
||||||
|
callback: done => {
|
||||||
|
ElMessage.success('图标');
|
||||||
|
done();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '层级',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
label: '新增',
|
||||||
|
callback: done => {
|
||||||
|
ElMessage.success('新增');
|
||||||
|
done();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '编辑',
|
||||||
|
callback: done => {
|
||||||
|
ElMessage.success('编辑');
|
||||||
|
done();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '删除',
|
||||||
|
callback: done => {
|
||||||
|
ElMessage.success('删除');
|
||||||
|
done();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@ -89,6 +89,7 @@ import AdvSearchCustom from './components/adv-search/custom.vue';
|
|||||||
|
|
||||||
import OtherTsx from './components/other/tsx';
|
import OtherTsx from './components/other/tsx';
|
||||||
import OtherTips from './components/other/tips.vue';
|
import OtherTips from './components/other/tips.vue';
|
||||||
|
import OtherContextMenu from './components/other/context-menu.vue';
|
||||||
|
|
||||||
const { route, router } = useCool();
|
const { route, router } = useCool();
|
||||||
|
|
||||||
@ -207,7 +208,7 @@ const list = [
|
|||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
label: '高级',
|
label: '高级',
|
||||||
children: [OtherTsx, OtherTips]
|
children: [OtherTsx, OtherTips, OtherContextMenu]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user