拖拽和切换
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
解决vue3+element-plus 用不了icon的办法 https://blog.csdn.net/ddf__/article/details/127838247
