uniapp+vue实现元素上下互换位置

uniapp+vue实现元素上下互换位置

效果图：

HTML：

<uni-section title="收集内容" type="line">
	<view class="example">
		<div class="formContent">
			<div class="formList" v-for="(item,index) in chooseData" :key="index">
				<div class="formTitle">
					<span style="color: #D9001B;">*</span>{{index+1}}.{{item.title}}
					<div class="iconsBox">
						<button :disabled="index === 0" @click="goTo(item,index)">
							<uni-icons type="top" size="24"></uni-icons>
						</button>
						<button :disabled="index === chooseData.length - 1" @click="goDown(item,index)">
							<uni-icons type="bottom" size="24"></uni-icons>
						</button>
						<uni-icons type="trash" size="24" @click="deleteForm(index)">
						</uni-icons>
					</div>
				</div>
				<div class="formOption" v-if="item.option">
					<p class="options" v-for="(el,_index) in item.option">-{{el}}</p>
				</div>
			</div>
		</div>
		<div class="userDefined" @click="userDefined">
			<uni-icons type="plusempty" size="24"></uni-icons>添加自定义信息采集项
		</div>
	</view>
</uni-section>

JS：

chooseData: [{
	id: 1,
	title: '学生当日体温（填空题）',
	type: 'input',
	required: true
}, {
	id: 2,
	title: '是否接触过高风险人员（单选题）',
	type: 'radio',
	option: ['是', '否'],
	required: true
}, {
	id: 3,
	title: '学生健康码（附件题）',
	type: 'upload',
	required: true
}, {
	id: 4,
	title: '学生行程卡（附件题）',
	type: 'upload',
	required: true
}],

// div向上移动
goTo(item, index) {
	var tempOption = this.chooseData[index - 1]
	this.$set(this.chooseData, index - 1, this.chooseData[index])
	this.$set(this.chooseData, index, tempOption)
},
// div向下移动
goDown(item, index) {
	var tempOption = this.chooseData[index + 1]
	this.$set(this.chooseData, index + 1, this.chooseData[index])
	this.$set(this.chooseData, index, tempOption)
},
deleteForm(index) {
	this.chooseData.splice(index, 1)
},

Learn from loss and your day will come