Skip to content

Commit 7242cbe

Browse files
dntzhangdntzhang
authored
Merge pull request #986 from mpbfx/feature/7-18
feat(vueify): 使用 omi-vueify 封装 omi tree组件实现 vue 组件
2 parents 1128877 + 2ae52c6 commit 7242cbe

File tree

6 files changed

+853
-2
lines changed

6 files changed

+853
-2
lines changed

‎packages/omi-vueify/examples/simple/src/App.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<script setup lang="ts">
22
import HelloWorld from './components/HelloWorld.vue'
3+
import TreeComponent from './components/TreeComponent.vue'
34
</script>
45

56
<template>
@@ -12,6 +13,7 @@ import HelloWorld from './components/HelloWorld.vue'
1213
</a>
1314
</div>
1415
<HelloWorld msg="Vite + Vue" />
16+
<TreeComponent />
1517
</template>
1618

1719
<style scoped>
@@ -27,4 +29,4 @@ import HelloWorld from './components/HelloWorld.vue'
2729
.logo.vue:hover {
2830
filter: drop-shadow(0 0 2em #42b883aa);
2931
}
30-
</style>
32+
</style>

‎packages/omi-vueify/examples/simple/src/components/TreeComponent.vue‎

Lines changed: 224 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,224 @@
1+
<script setup lang="ts">
2+
import { ref } from 'vue';
3+
import { omiVueify } from '../../../../src/index';
4+
import './o-tree';
5+
import type { TreeNode } from './o-tree';
6+
7+
// 使用omiVueify封装o-tree组件
8+
const OmiTree = omiVueify('o-tree', {
9+
methodNames: ['nodeExpand', 'nodeCollapse', 'addNode', 'removeNode', 'updateNode', 'highlightNode']
10+
});
11+
12+
// 树节点数据
13+
const treeData = ref<TreeNode[]>([
14+
{
15+
id: 1,
16+
label: '一级节点 1',
17+
expanded: true,
18+
children: [
19+
{
20+
id: 11,
21+
label: '二级节点 1-1',
22+
children: [
23+
{
24+
id: 111,
25+
label: '三级节点 1-1-1'
26+
}
27+
]
28+
},
29+
{
30+
id: 12,
31+
label: '二级节点 1-2'
32+
}
33+
]
34+
},
35+
{
36+
id: 2,
37+
label: '一级节点 2',
38+
children: [
39+
{
40+
id: 21,
41+
label: '二级节点 2-1'
42+
},
43+
{
44+
id: 22,
45+
label: '二级节点 2-2'
46+
}
47+
]
48+
}
49+
]);
50+
51+
const treeRef = ref();
52+
53+
const addNodeInput = ref('');
54+
const addLabelInput = ref('');
55+
const addPositionInput = ref('');
56+
57+
function performAddNode() {
58+
const parentId = addNodeInput.value ? parseInt(addNodeInput.value) : null;
59+
const label = addLabelInput.value || 'New Node';
60+
const position = addPositionInput.value ? parseInt(addPositionInput.value) : -1;
61+
62+
const newNode = { label };
63+
treeRef.value.addNode(parentId, newNode, position);
64+
addNodeInput.value = '';
65+
addLabelInput.value = '';
66+
addPositionInput.value = '';
67+
}
68+
69+
const removeNodeInput = ref('');
70+
71+
function performRemoveNode() {
72+
const id = parseInt(removeNodeInput.value);
73+
if (!isNaN(id)) {
74+
treeRef.value.removeNode(id);
75+
}
76+
removeNodeInput.value = '';
77+
}
78+
79+
const updateNodeInput = ref('');
80+
const updateLabelInput = ref('');
81+
82+
function performUpdateNode() {
83+
const id = parseInt(updateNodeInput.value);
84+
const label = updateLabelInput.value;
85+
if (!isNaN(id) && label) {
86+
treeRef.value.updateNode(id, { label });
87+
}
88+
updateNodeInput.value = '';
89+
updateLabelInput.value = '';
90+
}
91+
92+
const findNodeInput = ref('');
93+
94+
function performFindNode() {
95+
const id = findNodeInput.value ? parseInt(findNodeInput.value) : null;
96+
treeRef.value.highlightNode(id);
97+
}
98+
99+
</script>
100+
101+
<template>
102+
<div class="tree-component">
103+
<h3>树组件示例</h3>
104+
<div class="container">
105+
<div class="tree-container">
106+
<OmiTree
107+
ref="treeRef"
108+
:data="treeData"
109+
>
110+
</OmiTree>
111+
</div>
112+
<div class="operations">
113+
<div class="form-group">
114+
<h4>添加节点</h4>
115+
<input v-model="addNodeInput" placeholder="Parent ID (null for root)" />
116+
<input v-model="addLabelInput" placeholder="Label" />
117+
<input v-model="addPositionInput" placeholder="Position (-1 for end)" />
118+
<button @click="performAddNode">添加</button>
119+
</div>
120+
121+
<div class="form-group">
122+
<h4>删除节点</h4>
123+
<input v-model="removeNodeInput" placeholder="Node ID" />
124+
<button @click="performRemoveNode">删除</button>
125+
</div>
126+
127+
<div class="form-group">
128+
<h4>更新节点</h4>
129+
<input v-model="updateNodeInput" placeholder="Node ID" />
130+
<input v-model="updateLabelInput" placeholder="New Label" />
131+
<button @click="performUpdateNode">更新</button>
132+
</div>
133+
134+
<div class="form-group">
135+
<h4>查找节点</h4>
136+
<input v-model="findNodeInput" placeholder="Node ID" />
137+
<button @click="performFindNode">查找</button>
138+
</div>
139+
</div>
140+
</div>
141+
</div>
142+
</template>
143+
144+
<style scoped>
145+
.tree-component {
146+
padding: 20px;
147+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
148+
color: #333;
149+
}
150+
151+
h3, .operations h4 {
152+
margin-top: 0;
153+
margin-bottom: 1em;
154+
font-weight: 600;
155+
}
156+
157+
.container {
158+
display: flex;
159+
gap: 30px;
160+
align-items: flex-start;
161+
}
162+
163+
.tree-container {
164+
flex: 1;
165+
}
166+
167+
.operations {
168+
width: 200px;
169+
display: flex;
170+
flex-direction: column;
171+
gap: 20px;
172+
}
173+
174+
.form-group {
175+
display: flex;
176+
flex-direction: column;
177+
gap: 8px;
178+
}
179+
180+
.operations input,
181+
.operations button {
182+
width: 100%;
183+
padding: 8px;
184+
border: 1px solid #ddd;
185+
border-radius: 4px;
186+
box-sizing: border-box;
187+
font-size: 14px;
188+
}
189+
190+
.operations button {
191+
background-color: #f0f0f0;
192+
border-color: #ccc;
193+
cursor: pointer;
194+
font-weight: 500;
195+
}
196+
.operations button:hover {
197+
background-color: #e0e0e0;
198+
}
199+
200+
.modal {
201+
position: fixed;
202+
inset: 0;
203+
background: rgba(0, 0, 0, 0.5);
204+
display: grid;
205+
place-items: center;
206+
}
207+
.modal-content {
208+
background: white;
209+
padding: 20px 25px;
210+
border-radius: 5px;
211+
max-width: 500px;
212+
width: calc(100% - 40px);
213+
}
214+
.modal-content button {
215+
margin-top: 15px;
216+
}
217+
pre {
218+
white-space: pre-wrap;
219+
word-wrap: break-word;
220+
background: #f7f7f7;
221+
padding: 10px;
222+
border-radius: 4px;
223+
}
224+
</style>

0 commit comments

Comments
 (0)