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>