我正在制作一份Responsiveyes/no問卷，用戶可以在每個提出的問題上選擇yes/no。
我希望每個questionCard組件都有一個單選按鈕組（是/否）。單選圈應該是隱藏的，只有標簽是可見的。點擊標簽應該選擇合適的選項。 這一切都能做到
當我重新調整視窗大小時，我的問題就來了！布局發生了適當的變化，但卻沒有改變。布局發生了適當的變化，但是單選卻消失了。有什么想法嗎？
有什么想法可以讓我在不考慮視窗大小的情況下保持選擇嗎？
App.vue
<template>
<parent-component />
</template>
<script>
從"./components/parentComponent.vue "匯入parentComponent。
輸出默認 {
name: "App",
組件。{
parentComponent。
},
};
</script>
<style>
</style>
Parent.vue
<template>
<div>
<question-card
v-for="car in objectData.cars.data"
:key="car.id"
:carData="汽車"
></question-card>
</div>
</template>
<script>
從"./questionCard.vue "匯入questionCard。
輸出默認 {
name: "App",
組件。{
questionCard。
},
data() {
回傳 {
objectData: {
cars: {
資料。[
{
id: 1,
name: "Do You Like Tesla?",
},
{
id: 2,
name: "Do You Like BMW?",
},
{
id: 3,
name: "Do You Like AUDI?",
},
],
},
},
};
},
};
</script>
Questioncard.vue
<template>
<br />
<br />
<div class="hidden sm:block">
<h1>Lage Screen</h1>
<h2 class="font-old">{{ carData.name }}</h2>
<div class="flex items-center justify-center">
<輸入
@change="onChange($event)"
type="radio"
:name="carData.id"
:id="carData.id 'yes'"
/>
<標簽
:for="carData.id 'yes'"
class="border text-center border-yellow-500 rounded-2xl w-11/12 py-0.5 hover:bg-red-500 hover:text-white hover:border-green-300"
>
<span>是</span>
</label>
</div>
<div class="flex items-center justify-center">
<輸入
@change="onChange($event)"
type="radio"
:name="carData.id"
:id="carData.id 'no'"
/>
<標簽
:for="carData.id 'no'"
class="border text-center border-yellow-500 rounded-2xl w-11/12 py-0.5 hover:bg-red-500 hover:text-white hover:border-green-300"
>
<span>No</span>
</label>
</div>
</div>
<div class="sm:hidden">
<h1>小螢屏</h1>
<h2 class="font-old">{{ carData.name }}</h2>
<div class="flex items-center w-1/2 justify-center" >
<輸入
@change="onChange($event)"
type="radio"
:name="carData.id"
:id="carData.id 'yes'"
/>
<標簽
:for="carData.id 'yes'"
class="border text-center border-yellow-500 rounded-2xl w-11/12 py-0.5 hover:bg-red-500 hover:text-white hover:border-green-300"
>
<span>是</span>
</label>
</div>
<div class="flex items-center w-1/2 justify-center">
<輸入
@change="onChange($event)"
type="radio"
:name="carData.id"
:id="carData.id 'no'"
/>
<標簽
:for="carData.id 'no'"
class="border text-center border-yellow-500 rounded-2xl w-11/12 py-0.5 hover:bg-red-500 hover:text-white hover:border-green-300"
>
<span>No</span>
</label>
</div>
</div>
</template>
<script>
出口默認 {
props: ["carData"],
data() {
回傳 {
selected: null,
};
},
方法: {
onChange(event) {
this.selected = event.target.value;
},
},
};
</script>
<樣式范圍>
input[type="radio"] {
顯示：無。
}
input[type="radio"]:checked label {
背景顏色。#78be20;
}
</style>
uj5u.com熱心網友回復：
我看到你在使用TailwindCSS。你可以用w-1/2 sm:w-full來控制元素的大小
你不需要為不同的螢屏尺寸提供不同的輸入。喜歡這個
<div class=">
<h1>任何尺寸螢屏</h1>
<h2 class="font-old">{{ carData. name }}</h2>{ carData }}</h2>
<div class="flex items-center justify-center w-1/2 sm:w-full"/span>>
<input
@change="onChange（$event）"
type="radio"。
:name="carData.id"。
:id="carData.id 'yes'"
/>
<label >。
:for="carData.id 'yes'"
class="border text-center border-yellow-500 rounded-2xl w-11/12 py-0.5 hover:bg-red-500 hover:text-white hover:border-green-300"
>
<span>Yes</span>
</label>/span>
</div>/span>
<div class="flex items-center justify-center w-1/2 sm:w-full"/span>>
<input
@change="onChange（$event）"
type="radio"。
:name="carData.id"。
:id="carData.id 'no'"
/>
<label >。
:for="carData.id 'no'"
class="border text-center border-yellow-500 rounded-2xl w-11/12 py-0.5 hover:bg-red-500 hover:text-white hover:border-green-300"
>
<span>No</span>/span>
</label>/span>
</div>/span>
</div>/span>
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/310024.html
標籤：