mirror of
https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
synced 2024-12-04 04:59:48 +08:00
feat: tabs组件样式覆盖
This commit is contained in:
baiqi
rubylliu
parent
8accf388ca
commit
9b1c1abb64
19
frontend/src/assets/style/arco-reset.less
Normal file
19
frontend/src/assets/style/arco-reset.less
Normal file
@ -0,0 +1,19 @@
|
||||
/** 表格样式 **/
|
||||
.arco-table-cell {
|
||||
.circle {
|
||||
display: inline-block;
|
||||
margin-right: 4px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background-color: rgb(var(--blue-6));
|
||||
&.pass {
|
||||
background-color: rgb(var(--green-6));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** Tabs 组件样式 **/
|
||||
.arco-tabs-nav-add-btn {
|
||||
font-size: var(--font-size-base);
|
||||
}
|
||||
@ -1,3 +1,5 @@
|
||||
@import url('./arco-reset.less');
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@ -74,16 +76,3 @@ body {
|
||||
.split-line {
|
||||
border-color: rgb(var(--gray-2));
|
||||
}
|
||||
.arco-table-cell {
|
||||
.circle {
|
||||
display: inline-block;
|
||||
margin-right: 4px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background-color: rgb(var(--blue-6));
|
||||
&.pass {
|
||||
background-color: rgb(var(--green-6));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<minder-editor
|
||||
<!-- <minder-editor
|
||||
class="minder-container"
|
||||
:import-json="importJson"
|
||||
:progress-enable="false"
|
||||
@ -8,76 +8,135 @@
|
||||
:default-mold="defaultMode"
|
||||
:del-confirm="delConfirm"
|
||||
@save="save"
|
||||
/>
|
||||
/> -->
|
||||
<!-- <JsonPicker /> -->
|
||||
<div class="bg-white">
|
||||
<a-tabs>
|
||||
<a-tab-pane key="1">
|
||||
<template #title> <icon-calendar /> Tab 1 </template>
|
||||
Content of Tab Panel 1
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2">
|
||||
<template #title> <icon-clock-circle /> Tab 2 </template>
|
||||
Content of Tab Panel 2
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="3">
|
||||
<template #title> <icon-user /> Tab 3 </template>
|
||||
Content of Tab Panel 3
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
<a-tabs class="w-[500px]" :editable="true" show-add-button auto-switch @add="handleAdd" @delete="handleDelete">
|
||||
<a-tab-pane v-for="(item, index) of data" :key="item.key" :title="item.title" :closable="index !== 2">
|
||||
{{ item?.content }}
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import MinderEditor from '@/components/minder-editor/minderEditor.vue';
|
||||
<script setup lang="ts" name="minderIndex">
|
||||
import { ref } from 'vue';
|
||||
|
||||
let count = 5;
|
||||
|
||||
const data = ref([
|
||||
{
|
||||
key: '1',
|
||||
title: 'Tab 1',
|
||||
content: 'Content of Tab Panel 1',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
title: 'Tab 2',
|
||||
content: 'Content of Tab Panel 2',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
title: 'Tab 3',
|
||||
content: 'Content of Tab Panel 3',
|
||||
},
|
||||
{
|
||||
key: '4',
|
||||
title: 'Tab 4',
|
||||
content: 'Content of Tab Panel 4',
|
||||
},
|
||||
]);
|
||||
|
||||
const handleAdd = () => {
|
||||
const number = count++;
|
||||
data.value = data.value.concat({
|
||||
key: `${number}`,
|
||||
title: `New Tab ${number}`,
|
||||
content: `Content of New Tab Panel ${number}`,
|
||||
});
|
||||
};
|
||||
const handleDelete = (key: string | number) => {
|
||||
data.value = data.value.filter((item) => item.key !== key);
|
||||
};
|
||||
// import MinderEditor from '@/components/minder-editor/minderEditor.vue';
|
||||
// import JsonPicker from '@/components/jsonpath-picker/index.vue';
|
||||
|
||||
const importJson = {
|
||||
root: {
|
||||
data: {
|
||||
// 文本内容
|
||||
text: 'vue3-minder-editor',
|
||||
// 标签
|
||||
resource: ['模块1'],
|
||||
// 是否禁止修改
|
||||
// disable: true,
|
||||
// 默认展开或折叠，默认是展开的，collapse 可设为折叠
|
||||
// const importJson = {
|
||||
// root: {
|
||||
// data: {
|
||||
// // 文本内容
|
||||
// text: 'vue3-minder-editor',
|
||||
// // 标签
|
||||
// resource: ['模块1'],
|
||||
// // 是否禁止修改
|
||||
// // disable: true,
|
||||
// // 默认展开或折叠，默认是展开的，collapse 可设为折叠
|
||||
// // expandState: 'collapse',
|
||||
// // 在 disable 为 true 的情况下，允许添加标签
|
||||
// // tagEnable: true,
|
||||
// // 在 disable 为 true 的情况下，允许删除节点
|
||||
// // allowDelete: true,
|
||||
// // 在 disable 为 true 的情况下，允许添加标签，优先级比 tagEnable 高
|
||||
// // allowDisabledTag: true,
|
||||
// },
|
||||
// // 子节点
|
||||
// children: [
|
||||
// {
|
||||
// data: {
|
||||
// text: 'child1',
|
||||
// // disable: true,
|
||||
// expandState: 'collapse',
|
||||
// 在 disable 为 true 的情况下，允许添加标签
|
||||
// tagEnable: true,
|
||||
// 在 disable 为 true 的情况下，允许删除节点
|
||||
// allowDelete: true,
|
||||
// 在 disable 为 true 的情况下，允许添加标签，优先级比 tagEnable 高
|
||||
// allowDisabledTag: true,
|
||||
},
|
||||
// 子节点
|
||||
children: [
|
||||
{
|
||||
data: {
|
||||
text: 'child1',
|
||||
// resource: ['模块2'],
|
||||
// },
|
||||
// children: [
|
||||
// {
|
||||
// data: {
|
||||
// text: '地图axxaaaa',
|
||||
// disable: true,
|
||||
expandState: 'collapse',
|
||||
resource: ['模块2'],
|
||||
},
|
||||
children: [
|
||||
{
|
||||
data: {
|
||||
text: '地图axxaaaa',
|
||||
disable: true,
|
||||
allowDelete: true,
|
||||
// tagEnable: true,
|
||||
allowDisabledTag: true,
|
||||
resource: ['模块12'],
|
||||
priority: 3,
|
||||
loaded: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
data: {
|
||||
text: 'child2',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
template: 'default',
|
||||
};
|
||||
const height = 500;
|
||||
const defaultMode = 3;
|
||||
const tags = ['模块1', '用例', '前置条件', '测试步骤', '预期结果', '备注'];
|
||||
// allowDelete: true,
|
||||
// // tagEnable: true,
|
||||
// allowDisabledTag: true,
|
||||
// resource: ['模块12'],
|
||||
// priority: 3,
|
||||
// loaded: true,
|
||||
// },
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// data: {
|
||||
// text: 'child2',
|
||||
// },
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// template: 'default',
|
||||
// };
|
||||
// const height = 500;
|
||||
// const defaultMode = 3;
|
||||
// const tags = ['模块1', '用例', '前置条件', '测试步骤', '预期结果', '备注'];
|
||||
|
||||
function save(data: any) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log(data);
|
||||
}
|
||||
// function save(data: any) {
|
||||
// // eslint-disable-next-line no-console
|
||||
// console.log(data);
|
||||
// }
|
||||
|
||||
function delConfirm() {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log('-=-=-=-=-=-=-==');
|
||||
}
|
||||
// function delConfirm() {
|
||||
// // eslint-disable-next-line no-console
|
||||
// console.log('-=-=-=-=-=-=-==');
|
||||
// }
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user