- 博客(19)
- 收藏
- 关注
原创 高德地图, 根据长/宽/角度 绘制矩形 polygon
created(){ map.off('click', this.drawPolygon) }, methods: { // 点击地图绘制矩形polygon drawPolygon(e) { // 地图点击坐标 const lnglat = { lon: e.lnglat.getLng(), lat: e.lnglat.getLat() } // ...
2022-04-12 16:54:14 1540
原创 vue 使用谷歌地图相关操作
0.地图初始化 initMap() { this.map = new google.maps.Map(document.getElementById('js-container'), { zoom: 15, center: { lat: xxx, lng: xxx }, // 中心点 mapTypeId: 'terrain', keyboardShortcuts: false, // 隐藏右下角 快捷键盘 f
2022-04-12 10:56:00 1173
原创 使用vue-cropper实现图片裁剪
1.安装 npm install vue-cropper2.main.js配置import VueCropper from 'vue-cropper'Vue.use(VueCropper)3.页面使用<template> <!-- 图片裁剪 --> <div class="wrap"> <!-- 上传图片按钮 --> <input type="file" name="上传图片" i
2022-03-18 14:07:28 1661
原创 vue 打包移除console信息
1.安装依赖 babel-plugin-transform-remove-console2.配置 babel.config.jsconst prodPlugins = []// 如果是发布阶段,处于生产环境,就向prodPlugins数组里添加一个插件if (process.env.NODE_ENV === 'production') { prodPlugins.push('transform-remove-console')}module.exports = { presets: [
2022-03-07 15:47:34 649
原创 vue 前端导出页面级表格数据
1.安装插件npm install xlsx file-saver -Snpm install script-loader -S -D2.创建js文件 utils/Export2Excel.js (可直接复制使用)/* eslint-disable */import { saveAs } from 'file-saver'import XLSX from 'xlsx'function generateArray(table) { var out = []; var rows =
2022-03-07 10:44:45 512
原创 微信小程序自定义导航栏
微信小程序自定义导航栏1. 在需要的页面.json文件中配置使用自定义导航栏: “navigationStyle”: "custom"2. app.js文件 计算导航栏高度等信息App({ globalData: {}, onLaunch() { // ==========================导航栏计算============================ // 获取菜单按钮(右上角胶囊按钮)的布局位置信息。坐标信息以屏幕左上角为原点。 let menuButtonObj
2022-03-07 10:22:14 781
原创 微信小程序蓝牙功能使用
// 此次 serviceId characteristicId notifyId 是固定值,可以直接写在data中,如不是需要动态获取 // deviceId 需要在 getBluetoothDevices 或 onBluetoothDeviceFound 接口中获 // serviceId 需要在 getBLEDeviceServices 接口中获取 // characteristicId 需要在 getBLEDeviceCharacteristics 接口中获取let bluet..
2022-03-03 10:46:09 2025
原创 H5与ios/android交互传参
判断手机型号,使用不同方法传参方法名:与app端协商的公共方法名,两端要统一;参数:需要传递给app端的数据 var u = navigator.userAgent; var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios if (isAndroid) {
2021-06-17 10:25:48 1433
原创 支付宝小程序生成二维码
1.NPM依赖管理:输入qrcode,安装依赖;2.js文件:Page({ data: { qrImg: '', // 二维码图片地址 }, onLoad() {}, // 生成二维码 createCode(data) { //根据字符串生成svn格式的二维码 let that = this; QRCode.toString(data, { type: 'svg' }, function (err, url) { let url= 'da
2021-06-16 13:58:44 1818
原创 js如何判断数据类型
function typeOf(obj) { return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase() }, typeOf('123') // string typeOf([]) // array typeOf({}) // object
2021-04-23 11:08:32 73
原创 修改input标签中 placeholder颜色
各浏览器不同兼容input::input-placeholder { color: rgba(255, 255, 255, 0.24);}/* Mozilla Firefox 4 to 18 */.input::input-placeholder::-moz-placeholder { color: rgba(255, 255, 255, 0.24);}/* Mozilla Firefox 19+ */.input::input-placeholder::-moz-placeholde
2021-04-08 16:12:55 244
原创 vue 实现 input 上传图片
代码li 标签的显示与隐藏要使用v-show,使用v-if会报错。<template> <div class="wrap"> <ul class="img_container"> <li v-show="img_url" style="position: relative"> <img class="show_img" :src="img_url" alt="" /> <span c
2021-03-04 09:32:57 1695 1
原创 vue 循环文本列表超出3行显示...点击展开按钮查看全部(展开收起)
效果图实现步骤循环列表在页面中无法获取到dom,所以封装组件,获取dom。1.父组件代码<template> <div class="container"> <div class="list" v-for="(item, index) in dataList" :key="index"> <foldText :showContent="item.text"></foldText> </div>
2021-02-19 14:14:37 3202 7
原创 vue实现echarts图表下载(含多张图表),导出图片格式
使用插件: html2canvasnpm安装: npm install html2canvas组件引入: import html2canvas from “html2canvas”1. 页面样式2. 点击下载(代码) methods: { // 将echarts图表转换为canvas,并将canvas下载为图片 download() { // 图表转换成canvas html2canvas(document.getElementById.
2021-02-02 16:55:37 6047 2
原创 使用flex布局,echarts图表首屏加载自适应无效果,刷新页面后能够自适应。
使用flex布局,echarts图表首屏加载自适应无效果,刷新页面后能够自适应。修改前效果图(右侧图表超出):代码: mounted() { this.$nextTick(() => { this.initChart(); }); }, methods: { // 初始化 initChart() { var myChart = echarts.init(document.getElementById(id));
2021-01-29 11:15:11 1157
原创 video 设置 poster,默认显示视频第一帧
video 设置 poster,默认显示视频第一帧 <video :src="videoUrl" :poster=" videoUrl + '?x-oss-process=video/snapshot,t_0,f_jpg,w_0,h_0,ar_auto' " ></video>主要参考(阿里云视频截帧)
2021-01-18 16:43:27 6809 2
原创 H5页面跳转至应用市场(Android/ios)
H5页面跳转至应用市场(Android/ios) methods: { goAppStore() { var u = navigator.userAgent; var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1; //android终端 var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
2021-01-18 16:31:49 2656
原创 vue 获取用户上传的apk文件的详细信息
安装使用 app-info-parsernpm install --save app-info-parserhtml<template> <div> <input style="margin: 10px" type="file" name="上传" id="" ref="uploadFile" @change="changeFile" /> </div>.
2020-12-09 15:16:44 1324
原创 vue中使用vue-i18n实现中英文切换
vue中使用vue-i18n实现中英文切换1.npm安装npm install vue-i18n2.配置i18n1.在src目录下创建lang文件夹,用于存放中英文切换所需文件
2020-12-09 14:01:42 913
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人