7aa18252b5
- 添加 OptionAction 和 QuestionAction 组件 - 在 BaseSelect 组件中集成新功能 - 更新 ChooseQuestion 组件，添加单选题添加选项功能 -调整样式，增加空间间隔和对齐方式
88 lines
2.0 KiB
Vue
88 lines
2.0 KiB
Vue
<template>
|
|
<van-field
|
|
v-model="element.stem"
|
|
:label="element.stem"
|
|
:required="element.config.is_required === 1"
|
|
label-align="top"
|
|
class="base-select"
|
|
>
|
|
<template #label>
|
|
<div
|
|
:contenteditable="active"
|
|
class="van-field"
|
|
@blur="saveStem($event, element)"
|
|
v-html="element.stem"
|
|
></div>
|
|
</template>
|
|
<template #input>
|
|
<van-checkbox-group>
|
|
<template v-for="item in element.options">
|
|
<van-checkbox
|
|
v-for="(it, index) in item"
|
|
:key="index"
|
|
:name="it.value"
|
|
:label="it.label"
|
|
:disabled="it.disabled"
|
|
icon-size="0.45rem"
|
|
>
|
|
<template #default>
|
|
<div class="flex align-center space-between">
|
|
<div
|
|
class="van-cell van-cell--borderless"
|
|
:contenteditable="active"
|
|
@blur="saveOption($event, it)"
|
|
v-html="it.option"
|
|
></div>
|
|
<div class="right-action">
|
|
<option-action v-if="active"></option-action>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</van-checkbox>
|
|
</template>
|
|
</van-checkbox-group>
|
|
</template>
|
|
</van-field>
|
|
</template>
|
|
<script setup>
|
|
import OptionAction from '@/views/Design/components/ActionCompoents/OptionAction.vue';
|
|
import { ref } from 'vue';
|
|
const props = defineProps({
|
|
element: {
|
|
type: Object,
|
|
default: () => {
|
|
return {
|
|
stem: ''
|
|
};
|
|
}
|
|
},
|
|
active: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
});
|
|
|
|
const element = ref(props.element);
|
|
const saveOption = (e, ele) => {
|
|
ele.option = e.target.innerHTML;
|
|
};
|
|
const saveStem = (e, ele) => {
|
|
ele.stem = e.target.innerHTML;
|
|
};
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.base-select {
|
|
& .van-checkbox-group {
|
|
width: 100%;
|
|
|
|
& .van-checkbox {
|
|
width: 100%;
|
|
|
|
& ::v-deep .van-checkbox__label {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|