feat: 展开树初始化
parent
1f50fb7477
commit
8b33399747
@ -1,3 +1,120 @@
|
||||
module.exports = {
|
||||
// root: true
|
||||
root: true,
|
||||
env: {
|
||||
node: true
|
||||
},
|
||||
globals: {
|
||||
// Ref sugar (take 2)
|
||||
$: "readonly",
|
||||
$$: "readonly",
|
||||
$ref: "readonly",
|
||||
$shallowRef: "readonly",
|
||||
$computed: "readonly",
|
||||
|
||||
// index.d.ts
|
||||
// global.d.ts
|
||||
Fn: "readonly",
|
||||
PromiseFn: "readonly",
|
||||
RefType: "readonly",
|
||||
LabelValueOptions: "readonly",
|
||||
EmitType: "readonly",
|
||||
TargetContext: "readonly",
|
||||
ComponentElRef: "readonly",
|
||||
ComponentRef: "readonly",
|
||||
ElRef: "readonly",
|
||||
global: "readonly",
|
||||
ForDataType: "readonly",
|
||||
ComponentRoutes: "readonly",
|
||||
|
||||
// script setup
|
||||
defineProps: "readonly",
|
||||
defineEmits: "readonly",
|
||||
defineExpose: "readonly",
|
||||
withDefaults: "readonly"
|
||||
},
|
||||
extends: [
|
||||
"plugin:vue/vue3-essential",
|
||||
"eslint:recommended",
|
||||
"@vue/typescript/recommended",
|
||||
"@vue/prettier",
|
||||
"@vue/eslint-config-typescript"
|
||||
],
|
||||
parser: "vue-eslint-parser",
|
||||
parserOptions: {
|
||||
parser: "@typescript-eslint/parser",
|
||||
ecmaVersion: 2020,
|
||||
sourceType: "module",
|
||||
jsxPragma: "React",
|
||||
ecmaFeatures: {
|
||||
jsx: true
|
||||
}
|
||||
},
|
||||
overrides: [
|
||||
{
|
||||
files: ["*.ts", "*.vue"],
|
||||
rules: {
|
||||
"no-undef": "off"
|
||||
}
|
||||
},
|
||||
{
|
||||
files: ["*.vue"],
|
||||
parser: "vue-eslint-parser",
|
||||
parserOptions: {
|
||||
parser: "@typescript-eslint/parser",
|
||||
extraFileExtensions: [".vue"],
|
||||
ecmaVersion: "latest",
|
||||
ecmaFeatures: {
|
||||
jsx: true
|
||||
}
|
||||
},
|
||||
rules: {
|
||||
"no-undef": "off"
|
||||
}
|
||||
}
|
||||
],
|
||||
rules: {
|
||||
"vue/no-v-html": "off",
|
||||
"vue/require-default-prop": "off",
|
||||
"vue/require-explicit-emits": "off",
|
||||
"vue/multi-word-component-names": "off",
|
||||
"@typescript-eslint/no-explicit-any": "off", // any
|
||||
"no-debugger": "off",
|
||||
"@typescript-eslint/explicit-module-boundary-types": "off", // setup()
|
||||
"@typescript-eslint/ban-types": "off",
|
||||
"@typescript-eslint/ban-ts-comment": "off",
|
||||
"@typescript-eslint/no-empty-function": "off",
|
||||
"@typescript-eslint/no-non-null-assertion": "off",
|
||||
"vue/html-self-closing": [
|
||||
"error",
|
||||
{
|
||||
html: {
|
||||
void: "always",
|
||||
normal: "always",
|
||||
component: "always"
|
||||
},
|
||||
svg: "always",
|
||||
math: "always"
|
||||
}
|
||||
],
|
||||
"@typescript-eslint/no-unused-vars": [
|
||||
"error",
|
||||
{
|
||||
argsIgnorePattern: "^_",
|
||||
varsIgnorePattern: "^_"
|
||||
}
|
||||
],
|
||||
"no-unused-vars": [
|
||||
"error",
|
||||
{
|
||||
argsIgnorePattern: "^_",
|
||||
varsIgnorePattern: "^_"
|
||||
}
|
||||
],
|
||||
"prettier/prettier": [
|
||||
"error",
|
||||
{
|
||||
endOfLine: "auto"
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" viewBox="0 0 14 10" fill="none">
|
||||
<path d="M1 1C1.63158 3.66667 4.91579 9 13 9" stroke="#DCDCDC" stroke-width="1.5"
|
||||
stroke-linecap="round" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 216 B |
@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" viewBox="0 0 14 10" fill="none">
|
||||
<path d="M1 1C1.63158 3.66667 4.91579 9 13 9" stroke="#154DDD" stroke-width="2.3"
|
||||
stroke-linecap="round" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 216 B |
@ -1,5 +1,3 @@
|
||||
import collapseTree from "./src/collapseTree";
|
||||
|
||||
const CollapseTree = collapseTree;
|
||||
|
||||
export { CollapseTree };
|
||||
export const CollapseTree = collapseTree;
|
||||
|
||||
@ -0,0 +1,48 @@
|
||||
import { computed, defineComponent } from "vue";
|
||||
import "./collapseTreeStyle.scss";
|
||||
|
||||
export default defineComponent({
|
||||
name: "CollapseTreeItem",
|
||||
props: {
|
||||
info: {
|
||||
type: undefined,
|
||||
default: []
|
||||
}
|
||||
},
|
||||
|
||||
setup(props) {
|
||||
const nodeLatestInfo = computed(() => {
|
||||
//实时的树节点数据
|
||||
return { ...props.info };
|
||||
});
|
||||
|
||||
return () => {
|
||||
return (
|
||||
<div class={["collapseTreeItem_wrap"]}>
|
||||
<div class={["collapseTreeItem_info flex"]}>
|
||||
<span class={["collapseTreeItem_line"]}></span>
|
||||
<div class={["collapseTreeItem_main_info"]}>
|
||||
<i class="iconfont icon-fuwuqi tree_item_icon"></i>
|
||||
<span>{nodeLatestInfo.value.name}</span>
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="collapseTreeItem_child_info_box"
|
||||
v-if={
|
||||
Array.isArray(nodeLatestInfo.value?.childList) &&
|
||||
nodeLatestInfo.value.childList.length
|
||||
}
|
||||
>
|
||||
{nodeLatestInfo.value.childList?.map((item, index) => {
|
||||
return (
|
||||
<li key={index}>
|
||||
<CollapseTreeItem info={item}></CollapseTreeItem>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,95 @@
|
||||
@import "../../../style/index";
|
||||
|
||||
.collapseTree_wrap {
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
|
||||
.first_level_box {
|
||||
padding: 12px 16px;
|
||||
color: $--web-font2;
|
||||
background: #fff;
|
||||
border: 1px solid rgb(21 77 221 / 10%);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.selected_active {
|
||||
color: $--theme-color;
|
||||
background: rgb(21 77 221 / 10%);
|
||||
}
|
||||
|
||||
.root_tree_icon {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.child_info_box {
|
||||
margin-top: 8px;
|
||||
|
||||
& > li:last-child {
|
||||
.collapseTreeItem_wrap {
|
||||
border-left: 2px solid transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.collapseTreeItem_child_info_box {
|
||||
& > li:last-child {
|
||||
.collapseTreeItem_wrap {
|
||||
border-left: 2px solid transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.collapseTreeItem_wrap {
|
||||
// border-radius: 2px;
|
||||
padding-top: 0;
|
||||
|
||||
// padding-left: 10px;
|
||||
// margin-top: 8px;
|
||||
margin-left: 16px;
|
||||
border-left: 2px solid $--theme-color;
|
||||
|
||||
.collapseTreeItem_info {
|
||||
position: relative;
|
||||
color: $--web-font2;
|
||||
|
||||
.tree_item_icon {
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.collapseTreeItem_line {
|
||||
// background-color: red;
|
||||
display: inline-block;
|
||||
|
||||
// margin-bottom: -10px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-top: -2px;
|
||||
|
||||
// position: absolute;
|
||||
// left: -2px;
|
||||
margin-left: -2px;
|
||||
|
||||
// border-radius: 50%;
|
||||
// border-left: 1px solid red ;
|
||||
// background-image: url("@/assets/svg/bgFooter.svg");
|
||||
|
||||
background-image: url("@/assets/svg/icons/treeNodeLineSelected.svg");
|
||||
background-repeat: no-repeat;
|
||||
|
||||
// background-size: contain;
|
||||
}
|
||||
|
||||
.collapseTreeItem_main_info {
|
||||
padding: 2px 5px 8px;
|
||||
padding-left: 10px;
|
||||
|
||||
// padding-top: 16px;
|
||||
// position: absolute;
|
||||
// left: -2px;
|
||||
// top: 12px;
|
||||
}
|
||||
|
||||
// .icon-fuwuqi {}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,4 @@
|
||||
$--web-font1: #333;
|
||||
$--web-font2: #666;
|
||||
$--web-font3: #999;
|
||||
$--theme-color: #154ddd;
|
||||
@ -1,20 +1,9 @@
|
||||
<!--
|
||||
* @Author: donghao donghao@supervision.ltd
|
||||
* @Date: 2024-01-15 11:22:10
|
||||
* @LastEditors: donghao donghao@supervision.ltd
|
||||
* @LastEditTime: 2024-01-15 15:23:07
|
||||
* @FilePath: \general-work-web\General-AI-Platform-Web-Client\src\views\demo\leftTree\index.vue
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
-->
|
||||
<script setup lang="ts">
|
||||
import { CollapseTree } from "@/components/CustomTree";
|
||||
defineOptions({
|
||||
name: "DemoLeftTree"
|
||||
name: "DemoLeftTrees"
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<CollapseTree />
|
||||
</div>
|
||||
<div>123</div>
|
||||
</template>
|
||||
|
||||
@ -1,17 +1,21 @@
|
||||
<script setup lang="ts">
|
||||
import { CollapseTree } from "@/components/CustomTree";
|
||||
|
||||
defineOptions({
|
||||
name: "TreeCard"
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="treeCard">TreeCard</div>
|
||||
<div class="treeCard"><CollapseTree /></div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.treeCard {
|
||||
width: 240px;
|
||||
height: 808px;
|
||||
background-color: cadetblue;
|
||||
background: #fafafa;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 16px 0 rgb(0 0 0 / 20%);
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue