目录
一、功能背景描述:
二、代码实现:
2.1:下载插件
2.2:按需页面引入并注册插件
2.3:使用
一、功能背景描述:
在后台管理系统中,需求添加某些配置选项,并且选项可以拖拽调整顺序,指定按钮图标允许拖拽,不是整行拖拽。最终将配置的选项传给后端保存。功能如下图展示:
二、代码实现:
2.1:下载插件
中文文档 :
vue.draggable中文文档 - itxst.comhttps://www.itxst.com/vue-draggable/tutorial.html
npm i vuedraggable
2.2:按需页面引入并注册插件
<script>
import draggable from 'vuedraggable'
export default {
components: { draggable },
}
</script>
2.3:使用
<draggable v-if="item.radioType !== 3" v-model="item.options" :disabled="allowDrag">
<div v-for="(childItem, childIndex) in item.options" :key="childIndex" style="display: flex;margin-bottom: 20px;">
<img @mouseenter="startLongPress" @mouseleave="endLongPress" class="drag_icon mr10" style="cursor: move;" src="@/assets/ReturnVisit/drag.png" alt="拖动图标">
<span style="width: 8%;">选项{{ childIndex+1 }}:</span>
<el-input v-model="childItem.cname" placeholder="请输入选项" clearable maxlength="100" show-word-limit type="textarea" autosize resize="none" />
<el-button type="primary" icon="el-icon-plus" circle class="ml20" @click.stop="handleAdd(childItem.cname,index)" />
<el-button v-if="item.options.length > 1" type="danger" icon="el-icon-delete" circle @click.stop="handleReduce(childIndex,index)" />
</div>
</draggable>
<script>
import draggable from 'vuedraggable'
export default {
name: 'ProblemItem',
components: { draggable },
props: {
questionList: {
type: Array,
default: () => []
}
},
data() {
return {
tageType: ['', 'warning', 'success'],
allowDrag: false, // 控制是否允许拖拽
longPressTimer: null, // 长按计时器
longPressThreshold: 300, // 长按阈值
}
},
computed: {
question_list: {
get() {
return this.questionList
},
set(value) {
this.$emit('update:questionList', value)
return value
}
}
},
mounted() {
},
methods: {
startLongPress() {
clearTimeout(this.longPressTimer);
this.longPressTimer = setTimeout(() => {
//鼠标移入后的逻辑
console.log('鼠标移入');
this.allowDrag = false
// 可以在这里触发一个事件或者执行其他操作
}, 300);
},
endLongPress() {
clearTimeout(this.longPressTimer);
// 在这里可以添加松开鼠标后的逻辑(如果需要)
console.log('鼠标松开');
this.allowDrag = true
},
}
}
</script>
有问题指正下哈谢谢!