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
最新资源
- RL Base强化学习：信赖域策略优化（TRPO）算法TensorFlow实现
- RL Base强化学习：信赖域策略优化（TRPO）算法Pytorch 实现
- 全球各国家及城市json数据
- 用Rust实现仿nginx，力争实现一个可替代方案，http/https代理, socks5代理, 负载均衡, 反向代理, 静态文件服务器，四层TCP/UDP转发，websocket转发, 内网穿透N
- 计算机二级考试选择题练习模拟题70道及答案.doc
- 企业账户分析情况表_hive_20241118.sql
- 数据中台（大数据平台）数据建模存储标准规范.pdf
- Linux 平台下基于 Rust + GTK 开发的网易云音乐播放器
- 基于Rust语言的新一代组装式应用开发框架，它强调 简单性、可扩展性和生产力
- 数据中台（大数据平台）数据共享标准规范.pdf
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
