扣肉_-CSDN博客

原创高德地图, 根据长/宽/角度绘制矩形 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 1477

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 1113

原创使用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 1625

原创 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 638

原创 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 500

原创微信小程序自定义导航栏

微信小程序自定义导航栏1. 在需要的页面.json文件中配置使用自定义导航栏： “navigationStyle”: "custom"2. app.js文件计算导航栏高度等信息App({ globalData: {}, onLaunch() { // ==========================导航栏计算============================ // 获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。 let menuButtonObj

2022-03-07 10:22:14 726

原创微信小程序蓝牙功能使用

// 此次 serviceId characteristicId notifyId 是固定值，可以直接写在data中，如不是需要动态获取 // deviceId 需要在 getBluetoothDevices 或 onBluetoothDeviceFound 接口中获 // serviceId 需要在 getBLEDeviceServices 接口中获取 // characteristicId 需要在 getBLEDeviceCharacteristics 接口中获取let bluet..

2022-03-03 10:46:09 1931

原创 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 1353

原创支付宝小程序生成二维码

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 1743

原创 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 61

原创修改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 228

原创 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 1597 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&gt

2021-02-19 14:14:37 2984 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 5642 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 1098

原创 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 6471 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 2545

原创 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 1230

原创 vue中使用vue-i18n实现中英文切换

vue中使用vue-i18n实现中英文切换1.npm安装npm install vue-i18n2.配置i18n1.在src目录下创建lang文件夹，用于存放中英文切换所需文件

2020-12-09 14:01:42 782

qq_41792905的博客