hz/ylst-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(Design): 重构选择题组件布局和样式

Browse Source 
-调整单选和多选题目的布局结构，优化视觉效果
- 改进"其他"选项的输入框样式，增加textarea替代input
- 优化输入框样式，禁止文本选择和调整大小
This commit is contained in:
陈昱达
2025-03-23 15:47:45 +08:00
parent 55add6603f
commit 74deac6195
1 changed files with 63 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
src/views/Design/components/Questions/Choice.vue
View File

@@ -27,38 +27,35 @@
handle=".moverQues"
>
<template #item="{ element: it, index: itIndex }">
<van-radio
:key="itIndex"
:name="it.option_index"
:label="it.label"
:disabled="it.disabled"
icon-size="0.45rem"
>
<!-- 自定义文本 -->
<template #default>
<div class="flex align-center van-cell">
<div class="flex" style="width: 100%; flex-wrap: wrap">
<contenteditable
v-model="it.option"
:className="active ? 'contenteditable-input' : ''"
:active="active"
>
<template #right-icon>
<div v-if="active" class="moverQues">
<van-icon class-prefix="mobilefont" name="option "></van-icon>
</div>
</template>
</contenteditable>
<input
class="other-input"
type="text"
v-if="it.is_other"
style="width: 100%"
/>
<div class="flex" style="flex-wrap: wrap; width: 100%">
<van-radio
:key="itIndex"
:name="it.option_index"
:label="it.label"
:disabled="it.disabled"
icon-size="0.45rem"
>
<!-- 自定义文本 -->
<template #default>
<div class="flex align-center van-cell">
<div class="flex" style="width: 100%; flex-wrap: wrap">
<contenteditable
v-model="it.option"
:className="active ? 'contenteditable-input' : ''"
:active="active"
>
<template #right-icon>
<div v-if="active" class="moverQues">
<van-icon class-prefix="mobilefont" name="option "></van-icon>
</div>
</template>
</contenteditable>
</div>
</div>
</div>
</template>
</van-radio>
</template>
</van-radio>
<textarea class="other-input" type="text" v-if="it.is_other" style="width: 100%" />
</div>
</template>
</option-action>
</van-radio-group>
@@ -71,37 +68,34 @@
:question="element"
>
<template #item="{ element: it, index: itIndex }">
<van-checkbox
:key="itIndex"
:name="it.option_index"
:label="it.label"
:disabled="it.disabled"
icon-size="0.45rem"
>
<template #default>
<div class="flex align-center van-cell">
<div class="flex" style="width: 100%; flex-wrap: wrap">
<contenteditable
v-model="it.option"
:className="active ? 'contenteditable-input' : ''"
:active="active"
>
<template #right-icon>
<div v-if="active" class="moverQues">
<van-icon class-prefix="mobilefont" name="option "></van-icon>
</div>
</template>
</contenteditable>
<input
class="other-input"
type="text"
v-if="it.is_other"
style="width: 100%"
/>
<div class="flex" style="flex-wrap: wrap; width: 100%">
<van-checkbox
:key="itIndex"
:name="it.option_index"
:label="it.label"
:disabled="it.disabled"
icon-size="0.45rem"
>
<template #default>
<div class="flex align-center van-cell">
<div class="flex" style="width: 100%; flex-wrap: wrap">
<contenteditable
v-model="it.option"
:className="active ? 'contenteditable-input' : ''"
:active="active"
>
<template #right-icon>
<div v-if="active" class="moverQues">
<van-icon class-prefix="mobilefont" name="option "></van-icon>
</div>
</template>
</contenteditable>
</div>
</div>
</div>
</template>
</van-checkbox>
</template>
</van-checkbox>
<textarea class="other-input" type="text" v-if="it.is_other" style="width: 100%" />
</div>
</template>
</option-action>
</van-checkbox-group>
@@ -173,12 +167,17 @@ const emitValue = () => {
& .other-input {
width: 100%;
height: 20px;
height: 89px;
background: #ffffff;
padding: 3px 5px;
margin-top: 10px;
border: 1px solid #ccc;
border-radius: 5px;
border-radius: 8px;
outline: none;
// 禁止拖动
-webkit-user-select: none;
-moz-user-select: none;
//textarea禁止扩大
resize: none;
}
}
</style>