vue3 ant design vue项目实战——单选框（Radio）的使用以及Form表单的双向绑定

• 知识调用（form表单的源代码附在文章最后）
• 场景复现
• 实现需求
• • form表单整体架构的搭建
  • input输入框文本域的嵌套
  • 单选组合Radio的嵌套
  • button按钮组合的嵌套
• form表单源代码

本文依旧沿用ant design vue组件库和ts语言🔥🔥更多内容见Ant Design Vue官方文档

知识调用（form表单的源代码附在文章最后）

场景复现

一个功能齐全的后台管理系统，一定离不开Form表单的使用，form表单有很多学问，从本期文章开始会详细介绍如何在项目中使用form表单、完成数据的双向绑定、各种组件的嵌套，最后形成封装好了的form表单，可以实现复用。

具体UI需求如下：（本期文章详细介绍）

• 1.表单需要有输入框，限制输入字数，样式为文本域
• 2.表单需要有单选组合，样式为垂直平铺
• 3.表单需要有按钮组合，包括取消按钮和确认按钮

功能需求：（下期文章详细介绍）

• 1.表单的值需要动态绑定
• 2.点击确认按钮，控制台能够正确打印表单提交的值
• 3.点击取消按钮，表单内容能够重置
• 4.点击确认按钮时，检查表单输入是否有为空的部分，给出相应提示

UI界面最终实现效果：

实现需求

一定别忘了，任何时候使用组件，都需要在main.ts文件中注册，才能在页面中使用。
组件的注册在《知识调用》文章中都能找到，这里就不多介绍了。

form表单整体架构的搭建

form表单整体架构可以分为三个部分，也就是三个form-item，分别用于嵌套input输入框文本域、radiogroup垂直单选框组合、button按钮组合
html部分：

给 小朱 添加一条荣誉
证书内容
选择 小朱 需要绑定的证书

css部分：（可以根据需求进行调整）

.form {margin:0 auto;width: 500px;height: 450px;margin-top: 15px;background-color: #FFFFFF;border: 1px solid rgba(172, 171, 171, 0.16);border-radius: 10px;position: relative;p {margin-left: 50px;margin-top: 20px;font-size: 15px;margin-bottom: 10px;font-family: "微软雅黑";}.button-box {position: absolute;bottom: -5px;left: 170px;}
}

实现效果如下：

input输入框文本域的嵌套

我们需要在第一个form-item中添加input输入框文本域，这里推荐使用textarea

标签中属性的解释：

• 1.placeholder——文本域中的初始提示字句
  
• 2.show-count——显示输入字数
  
• 3.:maxLength——绑定最大长度
• 4.allow-clear——清除按钮、点击即可清除所有输入内容
  

css样式添加：（在form样式中添加input输入框的样式）

代码如下：

    input {width: 400px;margin-left: 50px;}

实现效果：

单选组合Radio的嵌套

html部分：（在第二个form-item中添加以下内容，嵌套单选组合）

{{ item.options }}

标签中属性的解释：
1.:style——绑定自定义的选项样式

// 样式数据类型
interface radioStyleType {display:string,lineHeight:string,marginLeft:string,height:string,
}
// 单选框样式
const radioStyle = reactive({display: 'flex',height: '30px',lineHeight: '30px',marginLeft:'50px',
});

2.v-for——选项采用循环的方式输出

// 选择项数据类型
interface optionsType {id:number,options:string
}
// 证书选择框选择项
const certificatesOptionsValue = ref([{"id":1,"options":"2022年技术部年度证书"},{"id":2,"options":"2023年技术部年度证书"},{"id":3,"options":"2024年技术部年度证书"},
])

现在我们来看一下实现效果：

button按钮组合的嵌套

html部分：（在第三个form-item中添加以下代码，样式之前已经写好，这里只需要设置两个按钮之前的间隔即可）

取消
确定

此时我们来看看最终的实现效果：

和给出的UI需求已经一模一样，到目前为止，页面的渲染工作已经完成。

form表单源代码

html部分：

给 小朱 添加一条荣誉
证书内容
选择 小朱 需要绑定的证书
{{ item.options }}取消确定

css部分：

.form {margin:0 auto;width: 500px;height: 450px;margin-top: 15px;background-color: #FFFFFF;border: 1px solid rgba(172, 171, 171, 0.16);border-radius: 10px;position: relative;input {width: 400px;margin-left: 50px;}p {margin-left: 50px;margin-top: 20px;font-size: 15px;margin-bottom: 10px;font-family: "微软雅黑";}.button-box {position: absolute;bottom: -5px;left: 170px;}
}

ts部分：

import { ref, reactive } from "vue"
import { Router, useRouter } from "vue-router";const router : Router = useRouter();
// 样式数据类型
interface radioStyleType {display:string,lineHeight:string,marginLeft:string,height:string,
}
// 单选框样式
const radioStyle = reactive({display: 'flex',height: '30px',lineHeight: '30px',marginLeft:'50px',
});// 选择项数据类型
interface optionsType {id:number,options:string
}
// 证书选择框选择项
const certificatesOptionsValue = ref([{"id":1,"options":"2022年技术部年度证书"},{"id":2,"options":"2023年技术部年度证书"},{"id":3,"options":"2024年技术部年度证书"},
])

当然，现在实现的只是UI界面，真正核心的是数据的动态绑定，让表单每个部分的值能够存储在变量当中，从而进一步实现后续的提交与重置功能。