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