首页 > 其他分享 >uni-app 使用地区选择 组件

uni-app 使用地区选择 组件

时间:2024-05-24 15:52:26浏览次数:14  
标签:csXzqhdm val app cityPicker 组件 uni formData

问题描述: 

使用uni-app 时发现没有现成可用的地区选择组件,通过插件市场找了两个,大部分都是vue2,不兼容vue3,也不是那么好用,后来找了一个直接兼容vue3的 

插件地址

将其封装成组件,在需要的地方进行调用 

 

	<cityPicker ref='cityPickerRef' :column="3" :default-value="formData.csXzqhdm" :mask-close-able="true" @confirm="confirm" @cancel="cancel" :visible="visible" />

	import cityPicker from "@/components/piaoyi-cityPicker/piaoyi-cityPicker.vue"

  	const confirm = (val : any) => {
		formData.csXzqhdm = val.code
		selectCityName.value = val.name
		visible.value = false
		console.log(formData.csXzqhdm, 'formData.csXzqhdm')
	}
	const cancel = () => {
		visible.value = false
	}     

  

标签:csXzqhdm,val,app,cityPicker,组件,uni,formData
From: https://www.cnblogs.com/qinyuanchun/p/18211111

相关文章

  • uniapp中,首先显示一个大的地图,点击地图上的点,缩小地图并且在下方显示地图上的点对应的
    <template><viewclass="content"><mapid="map":style="{width:'100%',height:selectedMarker.title?'50vh':'76vh',zIndex:'500'}":markers="markers&quo......
  • React后台管理(八)-- 开发页面前准备---插槽以及函数组件传值
    文章目录前言一、插槽的使用1.父组件结构如下2.子组件接受插槽内容二、父子函数组件传值1.父组件传值给子组件(1)父组件定义属性传值给子组件(2)子组件通过props去接收属性值2.子组件传值父组件(1)父组件接收子组件的值,更新数据(2)子组件通过方法,将值传出给父组件,类似vue的......
  • mapper,service,controller,entity之间的关系
    目录一、学到了二、错误与纠正一、学到了1.mapper(repository):数据访问层,负责与数据库进行交互,执行数据库的操作。定义了各种数据库操作方法的接口,并由ORM框架自动实现主要职能是执行数据库的增删改查,并将数据库操作结果返回给上层的service。2.service:业务逻辑层,处理逻......
  • SwiftUI中的手势(DragGesture拖拽手势及Drag动画组件)
    上一篇文章我们了解了如何使用.gesture修饰符和@GestureState属性包装器,让我们看看另一种常见的手势:DragGesture拖拽手势。下面先看个效果图:这个效果中,我们实现了一个Text文本,并添加了拖拽手势,可以拖动到屏幕的任意位置,松手后停留在目标位置,而非回到原来的起点位置。UI......
  • C#基础:委托与事件(在Unity中举例)
    委托(Delegate):委托是C#中的一种类型,表示对具有特定参数列表和返回类型的方法的引用。委托类似于C++中的函数指针,但它是类型安全的,并且是面向对象的。它们通常用于将方法作为参数传递给其他方法,实现回调功能。委托的关键特性:类型安全:委托是类型安全的,这意味着方法的签名必须与......
  • 苹果应用上传AppStore
    将ipa提交到AppStore需要Mac电脑操作,现在大部分的程序员都是使用混合开发平台windows系统的电脑,自己装虚拟机过程又繁琐。使用此工具只需要网页上点两下帮你完成这些鸡毛蒜皮事,让你有更多的时间花在改bug上。1.打开苹果应用商店管理后台获取密钥,地址https://appstoreconnect.a......
  • 微信小程序中页面显示时触发子组件的重新渲染
    使用生命周期函数:在页面的onShow或onLoad生命周期函数中,调用子组件的方法或者改变子组件的数据,从而触发子组件的重新渲染。例如,在页面的js文件中:Page({onShow:function(){//调用子组件的方法this.selectComponent('#childComponentId').refreshDa......
  • 【Python】数据分析 Section 6.4: Heatmaps | from Coursera “Applied Data Science
    Heatmapsareawaytovisualizethree-dimensionsofdataandtotakeadvantageofspatialproximityofthosedimensions.InmakingrevisionstothiscourseIwasreallytemptedtogetridofthesectiononheatmaps,asI'veseenenoughbadheatmapst......
  • 显示更多组件
    文章目录1.概念介绍2.实现方法3.示例代码4.内容总结我们在上一章回中介绍了"关于MediaQuery的优化"相关的内容,本章回中将介绍readMore这个三方包.闲话休提,让我们一起TalkFlutter吧。1.概念介绍我们在本章回中介绍的readMore是一个三方包,它主要用来折叠和展......
  • 定时器组件设计方案
    层级时间轮实现高性能定时器此篇介绍时间轮,它的时间复杂度是最优的,插入、查找(最小)、删除都是O(1),很恐怖的性能这里示例一个三层时间轮,模拟时钟表盘的运作方式,便于理解且性能不低设计思路:1.根据定时任务的超时时间,按超时时间范围存入不同的链表中,处于同一个链表的任务的超......