1.效果展示
2.数据
const cards = ref([
{
content: '信息1',
input: '',
required: true,
cardRadio: '手机号码',
radio: [
{
value: '单行文本'
},
{
value: '手机号码'
},
{
value: '身份证'
},
{
value: '多行文本'
},
{
value: '地址'
}
]
},
{
content: '信息2',
input: '',
required: true,
cardRadio: '多行文本',
radio: [
{
value: '单行文本'
},
{
value: '手机号码'
},
{
value: '身份证'
},
{
value: '多行文本'
},
{
value: '地址'
}
]
}
])
3.html结构,逻辑很简单,我就不加注释了
<el-card
v-for="(card, index) in cards"
:key="index"
class="card"
style="width: 90%; margin-bottom: 15px"
>
<template #header>
<div class="card-header">
<div>{{ card.content }}</div>
<div>
<el-button
type="text"
icon="arrow-up"
@click="moveUp(index)"
:disabled="index === 0"
>上移</el-button
>
<el-button
type="text"
icon="arrow-down"
@click="moveDown(index)"
:disabled="index === cards.length - 1"
>下移</el-button
>
<el-button
type="danger"
link
icon="delete"
@click="removeCard(index)"
:disabled="cards.length == 1"
>删除</el-button
>
</div>
</div>
</template>
<div>
<el-radio-group v-model="card.cardRadio">
<el-radio :value="x.value" v-for="(x, y) in card.radio" :key="y">{{
x.value
}}</el-radio>
</el-radio-group>
<div style="display: flex; align-items: center">
<el-input
v-model="card.cardRadio"
class="!w-300px"
:placeholder="card.cardRadio"
maxlength="5"
show-word-limit
>
<template #prepend>{{ card.cardRadio }}</template>
</el-input>
<el-input
v-model="card.input"
class="!w-350px"
placeholder="请输入提示语"
maxlength="20"
show-word-limit
style="margin-left: 10px"
/>
<el-checkbox
v-model="card.required"
label="必填"
style="margin-left: 10px"
/>
</div>
</div>
</el-card>
4.上移下移删除方法
// 上移
function moveUp(index) {
if (index > 0) {
const temp = cards.value[index - 1]
cards.value[index - 1] = cards.value[index]
cards.value[index] = temp
}
}
//下移
function moveDown(index) {
if (index < cards.value.length - 1) {
const temp = cards.value[index + 1]
cards.value[index + 1] = cards.value[index]
cards.value[index] = temp
}
}
//删除
function removeCard(index) {
cards.value.splice(index, 1)
}