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

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

@@ -27,6 +27,7 @@
handle=".moverQues" handle=".moverQues"
> >
<template #item="{ element: it, index: itIndex }"> <template #item="{ element: it, index: itIndex }">
<div class="flex" style="flex-wrap: wrap; width: 100%">
<van-radio <van-radio
:key="itIndex" :key="itIndex"
:name="it.option_index" :name="it.option_index"
@@ -49,16 +50,12 @@
</div> </div>
</template> </template>
</contenteditable> </contenteditable>
<input
class="other-input"
type="text"
v-if="it.is_other"
style="width: 100%"
/>
</div> </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,6 +68,7 @@
:question="element" :question="element"
> >
<template #item="{ element: it, index: itIndex }"> <template #item="{ element: it, index: itIndex }">
<div class="flex" style="flex-wrap: wrap; width: 100%">
<van-checkbox <van-checkbox
:key="itIndex" :key="itIndex"
:name="it.option_index" :name="it.option_index"
@@ -92,16 +90,12 @@
</div> </div>
</template> </template>
</contenteditable> </contenteditable>
<input
class="other-input"
type="text"
v-if="it.is_other"
style="width: 100%"
/>
</div> </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>