vue3 antd项目实战

2024-03-28 15:18| 来源: 网络整理| 查看: 265

Ant Design vue组件库——单选框（Radio）的使用知识调用场景复现核心内容准备工作基本用法常见用法单选组合 a-radio-group按钮样式的单选组合 a-radio-button垂直单选组合 radioStyle更多输入框选项常用属性

知识调用 🔥🔥更多内容见Ant Design Vue官方文档🔥🔥 vue3+ant design vue+ts实战【ant-design-vue组件库引入】🔥vue3【列表渲染】v-for 详细介绍（vue中的“循环”）

在这里插入图片描述

场景复现

最近在项目开发中需要使用到ant design vue组件库的单选框（Radio）组件。所以本期文章会详细地教大家如何使用Radio单选框。

核心内容

🔥🔥 更多具体内容见Ant Design Vue官方文档在这里插入图片描述何时使用：

用在多个备选项中选择单个状态和Select地区别是，Radio所有选项默认可见，方便用户比较选择，因此选项不宜过多在这里插入图片描述

可以看到在select组件中，已经明确说明，当选项少于5项时，使用Radio单选框时最好的选择。

下面是实际的代码演示和效果展示

准备工作

一定要注意，任何时候使用组件，都要记得先注册、再使用注册部分如下图：👇👇👇 在这里插入图片描述注册代码（模板）：

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组件库内的所有常用组件，建议是一次性注册完。

基本用法 Radio import { defineComponent, ref } from 'vue'; const checked = ref(false);

v-model双向绑定初始选择状态；在script中定义初始选择状态为false即关闭。在这里插入图片描述

更改选项内容直接在标签内中更改即可。在这里插入图片描述

常见用法单选组合 a-radio-group A B C D import { defineComponent, ref } from 'vue'; const value = ref('1'); // 通过v-model:value双向绑定设置初始选项为选项1

在这里插入图片描述

建议使用单选组合时，带上相应的name属性在这里插入图片描述

按钮样式的单选组合 a-radio-button

1.普通的按钮单选组合

Hangzhou Shanghai Beijing Chengdu import { defineComponent, ref } from 'vue'; const value1 = ref('a'); // 初始选项为HangZhou

在这里插入图片描述

2.填底的按钮单选组合通过button-style属性，添加solid填底样式在这里插入图片描述

Hangzhou Shanghai Beijing Chengdu import { defineComponent, ref } from 'vue'; const value1 = ref('a'); // 初始选项为HangZhou

在这里插入图片描述

垂直单选组合 radioStyle

通过:style属性绑定自定义样式

Option A Option B Option C import { defineComponent, reactive, ref } from 'vue'; const value = ref(1); const radioStyle = reactive({ display: 'flex', // 设置垂直平铺 height: '30px', // 设置各选项的高度 lineHeight: '30px', // 设置每行之间的高度 });

在这里插入图片描述

更多输入框选项 More... import { defineComponent, reactive, ref } from 'vue';

在这里插入图片描述配合垂直单选组合使用：（加上v-if条件判断）

Option A Option B Option C More... import { defineComponent, reactive, ref } from 'vue'; const value = ref(1); const radioStyle = reactive({ display: 'flex', height: '30px', lineHeight: '30px', });

在这里插入图片描述

常用属性

在这里插入图片描述

特别是option属性，可以进行数据的动态绑定，减少html部分的代码量，更好的实现代码结构功能化。

实例—— 双向绑定单选框的值，循环输出选项

html部分:

script部分:

// 证书模板选择项 const formworkOptionsValue = ref([ {"id":1,"options":"五分钟讲堂录取通知书"}, {"id":2,"options":"五分钟讲堂转正证书"}, {"id":3,"options":"五分钟讲堂培训证书"}, {"id":4,"options":"五分钟讲堂退休证书"}, ],)

实现效果：在这里插入图片描述

关于Ant Deign Vue组件库的知识点和用法有很多，后期会不定期更新。 感兴趣的小伙伴可以订阅本专栏，方便后续了解学习。 觉得这篇文章有用的小伙伴们可以点赞➕收藏➕关注哦~

【本文地址】

公司简介

联系我们