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部分:
<a-formclass="form"name="basic":model="contentFormState"autocomplete="off"><p style="font-size:16px;margin-top:24px;"><b>给 小朱 添加一条荣誉</b><!-- input输入框文本域--></p><a-form-item name="promotionContent"><p>证书内容</p></a-form-item><a-form-item><p style="margin-top:-10px">选择 <b>小朱</b> 需要绑定的证书</p><!-- radiogroup单选框组合--></a-form-item><a-form-item class="button-box"><!-- 按钮组合--></a-form-item></a-form>
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
<a-textareastyle="width:400px;margin-left:50px"placeholder="请输入证书内容" show-count allow-clear:maxlength="100" />
标签中属性的解释:
1.placeholder
——文本域中的初始提示字句
2.show-count
——显示输入字数
3.:maxLength
——绑定最大长度4.allow-clear
——清除按钮、点击即可清除所有输入内容
css样式添加:(在form样式中添加input输入框的样式)
代码如下:
input {width: 400px;margin-left: 50px;}
实现效果:
单选组合Radio的嵌套
html部分:(在第二个form-item
中添加以下内容,嵌套单选组合)
<a-radio-group name="certificatesRadioGroup"style="margin-top:5px"><a-radio:style="radioStyle"v-for="item of certificatesOptionsValue" v-model:value="item.options" :key="item.id">{{ item.options }}</a-radio></a-radio-group>
标签中属性的解释:
1.:style
——绑定自定义的选项样式
// 样式数据类型interface radioStyleType {display:string,lineHeight:string,marginLeft:string,height:string,}// 单选框样式const radioStyle = reactive<radioStyleType>({display: 'flex',height: '30px',lineHeight: '30px',marginLeft:'50px',});
2.v-for
——选项采用循环的方式输出
// 选择项数据类型interface optionsType {id:number,options:string}// 证书选择框选择项const certificatesOptionsValue = ref<optionsType[]>([{"id":1,"options":"技术部年度证书"},{"id":2,"options":"技术部年度证书"},{"id":3,"options":"2024年技术部年度证书"},])
现在我们来看一下实现效果:
button按钮组合的嵌套
html部分:(在第三个form-item中添加以下代码,样式之前已经写好,这里只需要设置两个按钮之前的间隔即可)
<a-button>取消</a-button><a-button type="primary" style="margin-left:10px">确定</a-button>
此时我们来看看最终的实现效果:
和给出的UI需求已经一模一样,到目前为止,页面的渲染工作已经完成。
form表单源代码
html部分:
<a-formclass="form"name="basic":model="contentFormState"autocomplete="off"><p style="font-size:16px;margin-top:24px;"><b>给 小朱 添加一条荣誉</b></p><a-form-itemname="promotionContent"><p>证书内容</p><a-textareav-model:value="contentFormState.certificates_content"style="width:400px;margin-left:50px"placeholder="请输入证书内容" show-count allow-clear:maxlength="100" /></a-form-item><a-form-item><p style="margin-top:-10px">选择 <b>小朱</b> 需要绑定的证书</p><a-radio-group v-model:value="contentFormState.certificates_select" name="certificatesRadioGroup"style="margin-top:5px"><a-radio:style="radioStyle"v-for="item of certificatesOptionsValue" v-model:value="item.options" :key="item.id">{{ item.options }}</a-radio></a-radio-group></a-form-item><a-form-item class="button-box"><a-button @click="cancelContent()">取消</a-button><a-button type="primary" style="margin-left:10px"@click="confirmContent()":disabled="contentFormState.confirm == 0 ? true : false">确定</a-button></a-form-item></a-form>
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<radioStyleType>({display: 'flex',height: '30px',lineHeight: '30px',marginLeft:'50px',});// 选择项数据类型interface optionsType {id:number,options:string}// 证书选择框选择项const certificatesOptionsValue = ref<optionsType[]>([{"id":1,"options":"技术部年度证书"},{"id":2,"options":"技术部年度证书"},{"id":3,"options":"2024年技术部年度证书"},])
当然,现在实现的只是UI界面,真正核心的是数据的动态绑定,让表单每个部分的值能够存储在变量当中,从而进一步实现后续的提交与重置功能。
vue项目实战中关于Form表单用法有很多,后期会不定期更新~感兴趣的小伙伴可以订阅本专栏,方便后续了解学习~觉得这篇文章有用的小伙伴们可以点赞➕收藏➕关注哦~