车牌号上的省会简称;uni-app组件,vue组件通用，小程序可模仿

<!-- car.vue组件 -->
<template><!-- 我得遮罩层  组件--><view class="car" v-show="isShow"><view class="zhezhao" @tap="close"><view class="box" @tap.stop="stop"><view class="item" v-for="(item, index) in city" :key="index" @tap="choose(item)">{{item}}</view></view></view></view>
</template>

<script>
export default {data() {return {city: ['京','沪','浙','苏','粤','鲁','晋','冀','豫','川','渝','辽','吉','黑','皖','鄂','津','贵','云','桂','琼','青','新','藏','蒙','宁','甘','陕','闽','赣','湘'],// name:'',isShow:false};},methods: {choose(item){// 把这个值暴漏出去也就是给父组件让它yongconsole.log(item)// this.name = item// 再手动关闭this.$emit('carFang',item) //调用父组件函数把选好的城市名传过去this.close()},close(){this.isShow=false},show(){this.isShow=true    //显示},stop(){console.log('阻止冒泡,不让点击剩余部分关闭')}}
};
</script>


<style lang="scss" scoped>
// my zhezhao
.zhezhao {position: fixed;width: 100%;top: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.6);
}
.box {position: absolute;bottom: 0;display: flex;justify-content: left;flex-wrap: wrap;padding-left: 23upx;background:#c6c6c6;
}
.item {width: 80upx;height: 60upx;background: #eee;box-shadow: 0upx 5upx 0upx 0upx #666;border: 2px solid #fff;margin: 10upx;border-radius: 5upx;text-align: center;font-size: 24upx;line-height: 60upx;
}
</style>

父组件使用:

<text class="chepai">车牌号码</text>
<text class="city" @tap="choseCity">{{cityName}} ></text>
<car ref="carName" @carFang="carFang"></car>

<script>import car from '../../components/car.vue'export default {data(){return {cityName:'豫'  // 写个默认值 }},components: {car},methods: {carFang(e){console.log(e)this.cityName=e               // 用来接收选择好的城市名},choseCity(){// this.$refs.carName.show()    }}}
</script>

车牌号上的省会简称;uni-app组件,vue组件通用，小程序可模仿相关推荐

[vue] vue和微信小程序写法上有什么区别？
[vue] vue和微信小程序写法上有什么区别?写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别. 一.生命周期先贴两张图: vue生命周期小程序生命周期相比之下 ...
【毕业设计之微信小程序系列】基于APP的微信点餐小程序的设计与实现
基于APP的微信点餐小程序的设计与实现摘要本文介绍了一种基于APP的微信点餐小程序的设计与实现方法.该系统利用微信公众号作为用户入口,用户可以通过微信扫码进入点餐系统,选择菜品.下单.支付等操作 ...
APP 抓包和微信小程序抓包-Charles 的精简使用教程
APP 抓包和微信小程序抓包-Charles 的精简使用教程 2021-09-25 更新 2019-07-10 更新目标教程一.安装 Charles 二.Charles 简介 (1)Charle ...
订阅号助手APP怎么插入留言板小程序？
现在很多小伙伴都是都是利用碎片化的时间来编写文章,身边并没有电脑,这个时候就没有办法使用电脑浏览器上的订阅号留言板插件来接入留言功能了,好在我们又开发了手机端在订阅号助手APP上接入留言板小程序的功能 ...
在Mac Os(苹果)上用手机抓包软件Charles抓取微信小程序中的高清无水印视频
手机抓包是一名测试工程师常备的技能,比如我想查看一个接口请求的参数.返回值,还有移动设备上的http请求.https请求,这一次的背景是我们想要在app端和小程序端抓取一些视频,这里用腾讯视频作为例子 ...
移动端App分享，以及微信小程序和公众号分享功能实现
移动端App分享,以及微信小程序和公众号分享功能实现分享功能记录收藏,上链接前端工作记录
APP自动化_操作微信小程序/H5页面实现自动化_多终端并行
APP自动化_混合App自动化理论相关原理:本质是混合app,应该用切入webview的方法去自动化web页面. 现状:目前由于技术原因无法切到webview中做自动化. 方案:采用原生app自动方 ...
android 自定义键盘_Android自定义输入车牌号键盘、车牌简称，数字，字母键盘...
本文来自阿钟的投稿,全文阅读大约十分钟为了便于用户快捷的输入车牌号码便需要自定义个车牌键盘,而不是使用系统的键盘输入,上效果图: 横屏效果图片竖屏效果图片一.首先我们要来分析一下需要做哪些东 ...
node.js+uni计算机毕设项目基于微信小程序的车位共享系统LWPPT（程序+小程序+LW）
该项目含有源码.文档.程序.数据库.配套开发软件.软件安装教程.欢迎交流项目运行环境配置: Node.js+ Vscode + Mysql5.7 + HBuilderX+Navicat11+Vue ...
如何给APP开发属于自己的小程序
前言工欲善其事,必先利其器. 首先,我们需要知道微信小程序是什么?微信小程序内核是什么?微信小程序的开发语言什么?这样才能更好的开发微信小程序,以及解决遇到的问题. 一.微信小程序是什么微 ...

车牌号上的省会简称;uni-app组件,vue组件通用，小程序可模仿

车牌号上的省会简称;uni-app组件,vue组件通用，小程序可模仿相关推荐

最新文章

热门文章