知識調(diào)用

場景復(fù)現(xiàn)

最近在項目開發(fā)中需要使用到ant design vue組件庫的單選框（Radio）組件。所以本期文章會詳細(xì)地教大家如何使用Radio單選框。

核心內(nèi)容

???? 更多具體內(nèi)容見Ant Design Vue官方文檔

何時使用：

• 用在多個備選項中選擇單個狀態(tài)
• 和Select地區(qū)別是，Radio所有選項默認(rèn)可見，方便用戶比較選擇，因此選項不宜過多
  
  可以看到在select組件中，已經(jīng)明確說明，當(dāng)選項少于5項時，使用Radio單選框時最好的選擇。

下面是實際的代碼演示和效果展示

準(zhǔn)備工作

一定要注意，任何時候使用組件，都要記得先注冊、再使用
注冊部分如下圖：??????

注冊代碼（模板）：

import { createApp } from 'vue'
import App from './App.vue'
import {
    Button, message, Form, Input, Checkbox, Menu, Layout,
    Breadcrumb, Tag, Table, Select, DatePicker, Spin, Switch,
    ConfigProvider,
    Card, Popconfirm, Badge,
    FormItem, Radio, Transfer,PageHeader,Modal,Image,Tabs
} from 'ant-design-vue';

const app = createApp(App)

app.use(router).use(Button).use(Form).use(Breadcrumb).use(Tag)
    .use(ConfigProvider).use(Switch).use(Popconfirm).use(Badge).use(Card).use(DatePicker)
    .use(Transfer).use(Modal).use(Radio).use(PageHeader).use(Image).use(Tabs).use(Spin)
    .use(Input).use(Checkbox).use(Menu).use(Layout).use(Table).use(Select)
    .mount('#app');
app.config.globalProperties.$message = message;

這些基本上涵蓋了ant desgin vue組件庫內(nèi)的所有常用組件，建議是一次性注冊完。

基本用法

<template>
  <a-radio v-model:checked="checked">Radio</a-radio>
</template>
<script lang="ts" setup>
import { defineComponent, ref } from 'vue';

const checked = ref<boolean>(false);
</script>

v-model雙向綁定初始選擇狀態(tài)；在script中定義初始選擇狀態(tài)為false即關(guān)閉。

更改選項內(nèi)容直接在標(biāo)簽內(nèi)中更改即可。

常見用法

單選組合 a-radio-group

<template>
  <a-radio-group v-model:value="value" name="radioGroup">
    <a-radio value="1">A</a-radio>
    <a-radio value="2">B</a-radio>
    <a-radio value="3">C</a-radio>
    <a-radio value="4">D</a-radio>
  </a-radio-group>
</template>
<script lang="ts" setup>
import { defineComponent, ref } from 'vue';

const value = ref<string>('1'); // 通過v-model:value雙向綁定 設(shè)置初始選項為選項1
</script>

建議使用單選組合時，帶上相應(yīng)的name屬性

按鈕樣式的單選組合 a-radio-button

1.普通的按鈕單選組合

<template>
  <div>
     <a-radio-group v-model:value="value1">
       <a-radio-button value="a">Hangzhou</a-radio-button>
       <a-radio-button value="b">Shanghai</a-radio-button>
       <a-radio-button value="c">Beijing</a-radio-button>
       <a-radio-button value="d">Chengdu</a-radio-button>
     </a-radio-group>
  </div>
</template>
<script lang="ts"setup>
import { defineComponent, ref } from 'vue';

const value1 = ref<string>('a'); // 初始選項為HangZhou
</script>

2.填底的按鈕單選組合
通過button-style屬性，添加solid填底樣式

<template>
  <div>
     <a-radio-group v-model:value="value1" button-style="solid">
       <a-radio-button value="a">Hangzhou</a-radio-button>
       <a-radio-button value="b">Shanghai</a-radio-button>
       <a-radio-button value="c">Beijing</a-radio-button>
       <a-radio-button value="d">Chengdu</a-radio-button>
     </a-radio-group>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';

const value1 = ref<string>('a'); // 初始選項為HangZhou
</script>

垂直單選組合 radioStyle

通過:style屬性綁定自定義樣式

<template>
  <a-radio-group v-model:value="value">
    <a-radio :style="radioStyle" :value="1">Option A</a-radio>
    <a-radio :style="radioStyle" :value="2">Option B</a-radio>
    <a-radio :style="radioStyle" :value="3">Option C</a-radio>
  </a-radio-group>
</template>
<script lang="ts" setup>
import { defineComponent, reactive, ref } from 'vue';

const value = ref<number>(1);
const radioStyle = reactive({
  display: 'flex', // 設(shè)置垂直平鋪
  height: '30px', // 設(shè)置各選項的高度
  lineHeight: '30px', // 設(shè)置每行之間的高度
});
</script>

更多輸入框選項

<template>
   <a-radio :style="radioStyle" :value="4">
     More...
     <a-input style="width: 100px; margin-left: 10px" />
   </a-radio>
</template>
<script lang="ts" setup>
import { defineComponent, reactive, ref } from 'vue';
</script>

配合垂直單選組合使用：（加上v-if條件判斷）

<template>
  <a-radio-group v-model:value="value">
    <a-radio :style="radioStyle" :value="1">Option A</a-radio>
    <a-radio :style="radioStyle" :value="2">Option B</a-radio>
    <a-radio :style="radioStyle" :value="3">Option C</a-radio>
    <a-radio :style="radioStyle" :value="4">
      More...
      <a-input v-if="value === 4" style="width: 100px; margin-left: 10px" />
    </a-radio>
  </a-radio-group>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from 'vue';

const value = ref<number>(1);
const radioStyle = reactive({
  display: 'flex',
  height: '30px',
  lineHeight: '30px',
});
</script>

常用屬性

特別是option屬性，可以進行數(shù)據(jù)的動態(tài)綁定，減少html部分的代碼量，更好的實現(xiàn)代碼結(jié)構(gòu)功能化。

html部分:

<a-radio-group 
   v-model:value="formState.certificates_seal_select" 
   name="sealRadioGroup"
   >
   <a-radio 
      v-for="item of sealOptionsValue" 
      v-model:value="item.options" 
      :key="item.id"
      >{{ item.options }}
   </a-radio>
</a-radio-group>

script部分:

// 證書模板選擇項
const formworkOptionsValue = ref<optionsType[]>([
    {"id":1,"options":"五分鐘講堂錄取通知書"},
    {"id":2,"options":"五分鐘講堂轉(zhuǎn)正證書"},
    {"id":3,"options":"五分鐘講堂培訓(xùn)證書"},
    {"id":4,"options":"五分鐘講堂退休證書"},
],)

實現(xiàn)效果：
文章來源地址http://www.zghlxwxcb.cn/news/detail-594705.html

到了這里，關(guān)于vue3 antd項目實戰(zhàn)——radiogroup單選組合、radiobutton單選按鈕【v-model雙向綁定數(shù)據(jù)、v-for循環(huán)輸出options選擇項】的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！