1 <template>
2 <!-- 拖拽功能 -->
3 <div class="dragBox">
4 <draggable v-model="list" tag="transition-group" group="list" animation="300">
5 <transition-group class="transTag">
6 <el-tag closable @click="tagClick(tag)" @close="handleClose(tag)" v-for="(tag, index) of list" :key="index">
7 <div v-if="tag.type === 'text'">{{ tag.text }}</div>
8 <el-avatar v-else :size="20" :src="tag.src">
9 {{ tag.src === '' ? '' : 'user' }}
10 </el-avatar>
11 </el-tag>
12 </transition-group>
13 </draggable>
14
15 <el-dropdown trigger="click" ref="dropdownRef" @command="dropDownBtn">
16 <span class="el-dropdown-link">
17 <el-button size="small" @click="showInput">+</el-button>
18 </span>
19 <template #dropdown>
20 <el-dropdown-menu>
21 <el-dropdown-item command="图标">图标</el-dropdown-item>
22 <el-dropdown-item command="文本">文本</el-dropdown-item>
23 </el-dropdown-menu>
24 </template>
25 </el-dropdown>
26
27 <!-- 选择图标或者文本的容器 -->
28 <div class="selectContent">
29 <!-- 文本 -->
30 <el-collapse v-model="activeNames" v-if="tagType === 'text'">
31 <el-collapse-item title="自定义列文本" name="1">
32 <div class="selectClass">
33 <el-select v-model="textTypeSelect">
34 <el-option label="时间" value="time"></el-option>
35 <el-option label="时间" value="time"></el-option>
36 </el-select>
37 <div>类型滚动占位</div>
38 </div>
39 <div class="searchClass">
40 <el-input placeholder="搜索">
41 <template #suffix>
42 <el-icon class="el-input__icon">
43 <Search />
44 </el-icon>
45 </template>
46 </el-input>
47 <el-input type="textarea" class="contentClass" v-model="textContent">
48 </el-input>
49 </div>
50 </el-collapse-item>
51 </el-collapse>
52
53 <!-- icon -->
54 <el-collapse class="collapse" v-model="activeNames" v-else>
55 <el-collapse-item title="替换图标" name="1">
56 <div class="inputClass">
57 <el-select v-model="iconTypeSelect">
58 <el-option label="头像" value="ava"></el-option>
59 </el-select>
60 <el-input placeholder="搜索">
61 <template #suffix>
62 <el-icon class="el-input__icon">
63 <Search />
64 </el-icon>
65 </template>
66 </el-input>
67 </div>
68 <div class="iconContentClass">
69 <el-avatar v-for="(tag, i) of avaList" :size="40" :src="tag.src" :key="i"></el-avatar>
70 </div>
71 </el-collapse-item>
72 </el-collapse>
73
74 </div>
75 </div>
76 </template>
77 <script>
78 import { createVNode } from 'vue'
79 import { VueDraggableNext } from 'vue-draggable-next'
80 import { Search, Edit, Check, Message, Star, Delete, } from "@element-plus/icons";
81 export default {
82 components: {
83 draggable: VueDraggableNext, Search
84 },
85 data() {
86 return {
87 avaList: [
88 { src: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png', name: 'user' },
89 { src: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png', name: 'user' },
90 { src: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png', name: 'user' },
91 { src: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png', name: 'user' },
92 { src: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png', name: 'user' },
93 { src: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png', name: 'user' },
94 { src: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png', name: 'user' },
95 { src: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png', name: 'user' },
96 { src: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png', name: 'user' },
97 ],
98 inputValue: '',
99 inputVisible: false,
100 list: [
101 { text: '文本1', type: 'text' },
102 { text: '文本2', type: 'text' },
103 { text: 'icon1', type: 'icon', src: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png' },
104 ],
105 tableHead: [
106 { label: '姓名', prop: 'name' },
107 { label: '年龄', prop: 'age' },
108 ],
109 tableData: [
110 { name: '张三', age: 12 },
111 { name: '李四', age: 12 },
112 ],
113 activeNames: 1,
114 textTypeSelect: '',
115 iconTypeSelect: 'ava',
116 tagType: 'text',
117 textContent: '',
118 }
119 },
120 methods: {
121 onEnd(e) {
122 console.log(e)
123 },
124 // 点击选项 占位的内容
125 dropDownBtn(val) {
126 if (val === '文本') {
127 // 文本
128 this.list.push({ text: '文本', type: 'text' })
129 } else {
130 // 图标
131 this.list.push({ text: 'icon', type: 'icon' })
132 }
133 },
134 // 弹出选择 文本/icon 选择框
135 showInput(e) {
136 console.log(e)
137 this.$nextTick(() => {
138 this.$refs.dropdownRef.handleOpen()
139 })
140 },
141 // 点击tag 切换内容下面选择
142 tagClick(tag) {
143 console.log(tag.type);
144 this.textContent = tag.text
145 this.tagType = tag.type
146 },
147 // 删除tag
148 handleClose(tag) {
149 let index = this.list.map(item => item.text).indexOf(tag.text)
150 this.list.splice(index, 1)
151 },
152 // 删除tag 头像
153 handletagClose(tag) {
154 console.log(tag)
155 tag.src = ''
156 // this.tagList.splice(this.tagList.indexOf(tag.src), 1)
157 },
158 }
159 }
160 </script>
161
162 <style scoped>
163 .read-the-docs {
164 color: #888;
165 }
166
167 .dragBox {
168 width: 500px;
169 height: 500px;
170 border: 1px solid red;
171 /* display: flex;
172 flex-direction: column;
173 justify-content: flex-start;
174 align-items: center; */
175 }
176
177 .el-tag {
178 margin: 0 10px;
179 }
180
181 .dragBox>>>.el-dropdown {
182 width: 10px;
183 height: 10px;
184 }
185
186 .dragBox>>>.el-button {
187 width: 25px;
188 height: 25px;
189 border-radius: 20px;
190 margin-top: 2px;
191 }
192
193 .selectContent {
194 width: 100%;
195 height: 300px;
196 margin-top: 20px;
197 /* border: 1px solid cyan; */
198 }
199
200 .selectContent>>>.el-collapse-item__content {
201 display: flex;
202 flex-direction: row;
203 }
204
205 .selectContent .collapse>>>.el-collapse-item__content {
206 display: flex;
207 flex-direction: column;
208 }
209
210 .selectContent .collapse>>>.el-collapse-item__content .inputClass {
211 display: flex;
212 flex-direction: row;
213 }
214
215 .iconContentClass {
216 width: 100%;
217 height: 300px;
218 text-align: start;
219 }
220
221 .iconContentClass span {
222 margin: 5px 0 0 27px;
223 }
224
225 .selectContent .selectClass {
226 width: 40%;
227 height: 300px;
228 /* border-right: 1px solid cyan; */
229 }
230
231 .selectContent .searchClass {
232 width: 60%;
233 height: 300px;
234 /* border: 1px solid cyan; */
235 }
236
237 .selectContent .searchClass .contentClass {
238 width: 100%;
239 height: 100%;
240 background: #f9f6f65c;
241 border-left: 1px solid #ccc;
242 }
243
244 .headerClass {
245 width: 50px;
246 height: 30px;
247 border: 1px solid red;
248 }
249 </style>
250
标签：src,name,text,88,tag,切换,https,拖拽 From： https://www.cnblogs.com/shiyiersan/p/17182179.html解决vue3+element-plus 用不了icon的办法 https://blog.csdn.net/ddf__/article/details/127838247