vue学习之学习之mintui picker选择器实现省市二级联动示例选择器实现省市二级联动示例
本文介绍了vue学习之mintui picker选择器实现省市二级联动示例，分享给大家，具体如下：
Mint UI 使用文档：https://mint-ui.github.io/docs/#/zh-cn2
Popup弹出框介绍：https://mint-ui.github.io/docs/#/zh-cn2/popup
Picker选择器介绍：https://mint-ui.github.io/docs/#/zh-cn2/picker
Datetime picker日期选择器介绍：https://mint-ui.github.io/docs/#/zh-cn2/datetime-picker
代码如下：
<!-- 页面模版 -->
<template>
<div>
<!--header-->
<com-header :title="headerData.title" :toLink="headerData.toLink"></com-header>
<!--header end-->
<!--container-->
<div class="ybb-yuyue">
<div class="yy-item-box mine-me">
<a class="mint-cell mint-field">
<div class="mint-cell-left"></div>
<div class="mint-cell-wrapper">
<div class="mint-cell-title">
<span class="mint-cell-text">头像</span>
</div>
<div class="mint-cell-value">
<div class="mint-cell-value"></div>
<img v-bind:src="data.photo" :onerror="headImg" class="img-box5">
</div>
</div>
</a>
</div>
<div class="yy-item-box mine-me">
<a class="mint-cell mint-field">
<div class="mint-cell-left"></div>
<div class="mint-cell-wrapper">
<div class="mint-cell-title">
<span class="mint-cell-text">姓名</span>
</div>
<div class="mint-cell-value">
<div class="mint-cell-value">
<input placeholder="请输入姓名" type="text" class="mint-field-core text-right" v-model="data.userName">
<div class="mint-field-clear" style="display: none;"><i class="mintui mintui-field-error"></i></div>
</div>
</div>
</div>
</a>
<a class="mint-cell mint-field">
<div class="mint-cell-left"></div>
<div class="mint-cell-wrapper">
<div class="mint-cell-title">
<span class="mint-cell-text">性别</span>
</div>
<div class="mint-cell-value">
<div class="mint-cell-value is-link" @click="sexVisible = true">
<input placeholder="请选择性别" type="text" class="mint-field-core text-right" readonly="readonly" v-model="data.sexText">
<div class="mint-field-clear" style="display: none;"><i class="mintui mintui-field-error"></i></div>
</div>
</div>
<i class="mint-cell-allow-right"></i>
<mt-actionsheet :actions="sexs" v-model="sexVisible" cancel-text="取消"></mt-actionsheet>
</div>
</a>
<a class="mint-cell mint-field">
<div class="mint-cell-left"></div>
<div class="mint-cell-wrapper">
<div class="mint-cell-title">
<span class="mint-cell-text">出生日期</span>
</div>
<div class="mint-cell-value">
<div class="mint-cell-value is-link" @click="open('datePicker')">
<input placeholder="请选择日期" type="text" class="mint-field-core text-right" readonly="readonly" v-model="data.birthday">
<div class="mint-field-clear" style="display: none;"><i class="mintui mintui-field-error"></i></div>
</div>
资源评论
weixin_38728624
- 粉丝: 4
- 资源: 881
最新资源
- 云计算，搭建分布式，然后实现Titantic数据集训练、分类的的代码
- 同城宠物照看-JAVA-基于Spring Boot的同城宠物照看系统的设计与实现（毕业论文）
- 云计算，实现中文字频统计代码，课程设计
- weixin138社区互助养老+ssm(论文+源码)-kaic.zip
- 扶贫助农系统-JAVA-基于spring boot扶贫助农系统设计与实现（毕业论文）
- 母婴护理知识共享-JAVA-基于SpringBoot+vue 的母婴护理知识共享系统（毕业论文）
- 番茄叶片图像病害多标签分类，约5600张数据
- 影音互动科普网站-JAVA-基于SpringBoot的哈利波特书影音互动科普网站设计与实现（毕业论文）
- 航空散货调度-JAVA-基于SpringBoot的航空散货调度系统设计与实现（毕业论文）
- 基于Python Scrapy的贝壳找房爬虫程序
- zigbee CC2530无线自组网协议栈实现一个协调器+多个终端的通讯及控制.zip
- 校园二手物品交易-JAVA-基于springBoot的校园二手物品交易系统的设计与实现（毕业论文）
- 计算机视觉项目：Swin-Transformer 【tiny、small、base】模型实现的图像识别项目：番茄病害图像分类
- 功能完善的电商数据智能爬虫采集系统项目全套技术资料.zip
- 青少年心理健康教育网-JAVA-基于springboot的青少年心理健康教育网站的设计与实现（毕业论文）
- 密评流程及商密应用方案解析
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
