feat: tabs组件样式覆盖
This commit is contained in:
baiqi
rubylliu
parent
8accf388ca
commit
9b1c1abb64
|
|
@ -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 base;
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
@ -74,16 +76,3 @@ body {
|
||||||
.split-line {
|
.split-line {
|
||||||
border-color: rgb(var(--gray-2));
|
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>
|
<template>
|
||||||
<minder-editor
|
<!-- <minder-editor
|
||||||
class="minder-container"
|
class="minder-container"
|
||||||
:import-json="importJson"
|
:import-json="importJson"
|
||||||
:progress-enable="false"
|
:progress-enable="false"
|
||||||
|
|
@ -8,76 +8,135 @@
|
||||||
:default-mold="defaultMode"
|
:default-mold="defaultMode"
|
||||||
:del-confirm="delConfirm"
|
:del-confirm="delConfirm"
|
||||||
@save="save"
|
@save="save"
|
||||||
/>
|
/> -->
|
||||||
<!-- <JsonPicker /> -->
|
<!-- <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>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts" name="minderIndex">
|
||||||
import MinderEditor from '@/components/minder-editor/minderEditor.vue';
|
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';
|
// import JsonPicker from '@/components/jsonpath-picker/index.vue';
|
||||||
|
|
||||||
const importJson = {
|
// const importJson = {
|
||||||
root: {
|
// root: {
|
||||||
data: {
|
// data: {
|
||||||
// 文本内容
|
// // 文本内容
|
||||||
text: 'vue3-minder-editor',
|
// text: 'vue3-minder-editor',
|
||||||
// 标签
|
// // 标签
|
||||||
resource: ['模块1'],
|
// resource: ['模块1'],
|
||||||
// 是否禁止修改
|
// // 是否禁止修改
|
||||||
// disable: true,
|
// // disable: true,
|
||||||
// 默认展开或折叠，默认是展开的，collapse 可设为折叠
|
// // 默认展开或折叠，默认是展开的，collapse 可设为折叠
|
||||||
|
// // expandState: 'collapse',
|
||||||
|
// // 在 disable 为 true 的情况下，允许添加标签
|
||||||
|
// // tagEnable: true,
|
||||||
|
// // 在 disable 为 true 的情况下，允许删除节点
|
||||||
|
// // allowDelete: true,
|
||||||
|
// // 在 disable 为 true 的情况下，允许添加标签，优先级比 tagEnable 高
|
||||||
|
// // allowDisabledTag: true,
|
||||||
|
// },
|
||||||
|
// // 子节点
|
||||||
|
// children: [
|
||||||
|
// {
|
||||||
|
// data: {
|
||||||
|
// text: 'child1',
|
||||||
|
// // disable: true,
|
||||||
// expandState: 'collapse',
|
// expandState: 'collapse',
|
||||||
// 在 disable 为 true 的情况下，允许添加标签
|
// resource: ['模块2'],
|
||||||
// tagEnable: true,
|
// },
|
||||||
// 在 disable 为 true 的情况下，允许删除节点
|
// children: [
|
||||||
// allowDelete: true,
|
// {
|
||||||
// 在 disable 为 true 的情况下，允许添加标签，优先级比 tagEnable 高
|
// data: {
|
||||||
// allowDisabledTag: true,
|
// text: '地图axxaaaa',
|
||||||
},
|
|
||||||
// 子节点
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
data: {
|
|
||||||
text: 'child1',
|
|
||||||
// disable: true,
|
// disable: true,
|
||||||
expandState: 'collapse',
|
// allowDelete: true,
|
||||||
resource: ['模块2'],
|
// // tagEnable: true,
|
||||||
},
|
// allowDisabledTag: true,
|
||||||
children: [
|
// resource: ['模块12'],
|
||||||
{
|
// priority: 3,
|
||||||
data: {
|
// loaded: true,
|
||||||
text: '地图axxaaaa',
|
// },
|
||||||
disable: true,
|
// },
|
||||||
allowDelete: true,
|
// ],
|
||||||
// tagEnable: true,
|
// },
|
||||||
allowDisabledTag: true,
|
// {
|
||||||
resource: ['模块12'],
|
// data: {
|
||||||
priority: 3,
|
// text: 'child2',
|
||||||
loaded: true,
|
// },
|
||||||
},
|
// },
|
||||||
},
|
// ],
|
||||||
],
|
// },
|
||||||
},
|
// template: 'default',
|
||||||
{
|
// };
|
||||||
data: {
|
// const height = 500;
|
||||||
text: 'child2',
|
// const defaultMode = 3;
|
||||||
},
|
// const tags = ['模块1', '用例', '前置条件', '测试步骤', '预期结果', '备注'];
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
template: 'default',
|
|
||||||
};
|
|
||||||
const height = 500;
|
|
||||||
const defaultMode = 3;
|
|
||||||
const tags = ['模块1', '用例', '前置条件', '测试步骤', '预期结果', '备注'];
|
|
||||||
|
|
||||||
function save(data: any) {
|
// function save(data: any) {
|
||||||
// eslint-disable-next-line no-console
|
// // eslint-disable-next-line no-console
|
||||||
console.log(data);
|
// console.log(data);
|
||||||
}
|
// }
|
||||||
|
|
||||||
function delConfirm() {
|
// function delConfirm() {
|
||||||
// eslint-disable-next-line no-console
|
// // eslint-disable-next-line no-console
|
||||||
console.log('-=-=-=-=-=-=-==');
|
// console.log('-=-=-=-=-=-=-==');
|
||||||
}
|
// }
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue