【uView】picker 地区选择

看了评论，大部分说用不了。原因是... 这是 uView1.x 的写法，uView 2.0 是没有mode这个属性的。

思路：利用u-picker 的region地区模式作为选择器，然后展示在u-input中。

<u-form class="form" :model="form" ref="uForm" :error-type="['toast']" :border-bottom="false"  label-position="left" label-width="160" ><u-form-item label="所在地区" prop="area" :border-bottom="false"><u-input v-model="form.area" placeholder="请选择所在地区" @focus="change()"/><u-picker class="region" mode="region" v-model="show" @confirm="confirm"></u-picker></u-form-item>
</u-form>

confirm中e的返回值

data() {return {form: {area: '',},rules: {area: [{ required: true, message: '请选择所在地区', trigger: ['change','blur'],}],},show: false,  // picker是否展示}
},methods：{change () {this.show = true},confirm (e) {// 省市区拼接this.form.area = e.province.label + e.city.label + e.area.label},}

【uView】picker 地区选择相关推荐

微信小程序地区选择，单级学校选择和省，市，区选择
为了高校小程序设计大赛,刚刚接触小程序没多久,遇到了好多问题,解决之后想把解决办法分享给他人,同时也是记录自己的学习过程.为了这个地区选择走了好多弯路,一开始要什么腾讯地图授权,但又没有备案了的域名, ...
小程序开发--地区选择四级联动（选择省,市,县,镇）
前端时间接到一个项目,里面有涉及到地区选择四级联动(即能选择到镇).自己去网上收罗了一波,也没发现有很详细的,所以就自己来写,写完总结一下. 首先地址选择小程序有自带一个组件,我们就先来看看这个组件: ...
WPF地区选择控件（内附下载地址）
最近使用WPF做了一个地区选择控件,可以提供省.市.地区.县等名称的快速录入.查询使用的是Lucene组件(主要是想体验一下牛刀杀鸡) 功能列表: 支持汉字.全拼.简拼的快速搜索支持光标键和鼠标滚轮 ...
微信小程序picker地区选择器显示省市二级联动
效果图: 微信官方配置二级level="city",无效(官方说正在修改2022.12.22) 自己写,用多级联动写 html: <picker mode="mul ...
类似中华英才网，51job的地区选择效果
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org ...
js三级地区选择插件，省市县级联下拉列表
js三级地区选择插件,省市县级联下拉列表 3级省地市级联菜单,ie/ff 测试通过,支持多个并存,支持事件 demo1为最简单的一份实现,页面id配置需在js文件中写入,适合简单情况 demo2增加了 ...
三级联动地区选择插件
最近在做一个需求,用到了地区选择的下拉插件,自己做了一点封装, 效果类似下图使用的时候只需要初始化控件就行了 var city = new City("area").init() ...
Element Plus 实例详解（三）___Date Picker 日期选择
Element Plus 实例详解(三) ___Date Picker 日期选择文章目录: 一.前言二.搭建Element Plus试用环境 1.搭建Vue3项目(基于Vite + Vue) 2. ...
仿智联招聘首页html源码,模仿智联职位选择,地区选择Js插件
[实例简介] 模仿智联职位选择,地区选择Js插件,界面需要做简单的修改 [实例截图] [核心代码] jquery-plugin-ExtendedBoxy └── jquery-plugin-Exten ...

【uView】picker 地区选择

【uView】picker 地区选择相关推荐

最新文章

热门文章