
Vue项目实战-Vant篇
文章平均质量分 50
记录Vant项目开发中的一系列问题和心得~
超喜欢你呦
我们总是孤独成长,你的坚持,终将美好.
展开
-
Vue 中使用高德地图API 获取地理位置+逆地理编码
库版本packageversionvue2.6.0vant2.12.6@amap/amap-jsapi-loader1.0.1需求:H5中获得用户位置授权后获取终端经纬度和地点名称,PC/移动端适用。Action!第一步:引入高德API库:import AMapLoader from '@amap/amap-jsapi-loader';第二步:添加插件,绘制地图AMap.Geocoder 地理编码与逆地理编码AMap.Geolocat原创 2021-04-30 16:20:37 · 5528 阅读 · 1 评论 -
Vant 自定义组件适配 iphone 底部安全区
场景:IM问题:聊天界面输入框在iphone下被底部指示条遮盖,如下图:解决方案:提示:这里填写该问题的具体解决方案:例如:新建一个 Message 对象,并将读取到的数据存入 Message,然后 mHandler.obtainMessage(READ_DATA, bytes, -1, buffer).sendToTarget();换成 mHandler.sendMessage()。<meta name="viewport" content="width=device-原创 2021-04-28 12:38:16 · 12931 阅读 · 4 评论 -
Vue 中 touch 事件无效解决方案
添加 .native.prevent 修饰符即可<van-button round @touchstart.native.prevent="onTouchStart" @touchmove.native.prevent="onTouchMove" @touchend.native.prevent="onTouchEnd" > Hold to Talk </van-button>原创 2021-03-30 15:05:41 · 4022 阅读 · 0 评论 -
Vue 中使用 debounce 时获取 vue 实例
template 部分:<template> <van-search v-model="searchValue" @input="debounceSearch(onSearch)" /></template>script 部分:import { debounce } from 'lodash';import { Search } from 'vant';export default { name: 'input',原创 2021-03-29 17:53:41 · 889 阅读 · 0 评论 -
Vue 中 qrcode.vue 生成二维码以及添加中心logo
一、安装插件npm i qrcode.vue -S二、使用组件<template> <van-popup v-model="showQr" v-bind="popupConfig" > <div class="qrcode-wrapper"> <div class="qrcode-title"> <van-icon name="scan" /> 使用其他设备扫描二维原创 2021-03-16 18:38:10 · 4126 阅读 · 0 评论 -
Vue 中使用 style-resources-loader 配置全局使用 less sass 变量
项目场景:例如:项目场景:示例:通过蓝牙芯片(HC-05)与手机 APP 通信,每隔 5s 传输一批传感器数据(不是很大)问题描述:提示:这里描述项目中遇到的问题:例如:数据传输过程中数据不时出现丢失的情况,偶尔会丢失一部分数据APP 中接收数据代码:@Override public void run() { bytes = mmInStream.read(buffer); mHandler.obtainMessage(READ原创 2021-03-16 14:41:58 · 1646 阅读 · 0 评论 -
Vue + Vant + i18n 实现国际化及语言切换
Vue + Vant + i18n 实现国际化及语言切换packageversionvue2.6.11vant2.12.6vue-i18n8.23.0最近一个用 react-mobile 的小型 IM App 被客户吐槽UI,所以现在用传说Vue中最漂漂的 Vant 重构一下,没办法,react实在是没有省心又好看的react库了[手动哭脸T_T],所以喽,搞起!...原创 2021-03-02 19:35:20 · 6375 阅读 · 0 评论