vue
夲木^_^
在这个大海里,保持向前游动且不被淹si
展开
-
循环多张图片使用 ctx.draw 微信小程序上传图片添加水印,后面图片空白问题。
循环使用ctx.draw出现空白图片。微信小程序上传图片添加水印原创 2023-01-13 16:08:39 · 1104 阅读 · 1 评论 -
vue 项目下使用dataV和echarts 开发可视化大屏
非常好用的vue 项目下的可是化大屏功能。使用dataV 和echarts.js原创 2022-11-15 16:12:18 · 1588 阅读 · 0 评论 -
微信小程序webview加载的H5页面 跳小程序问题
这套代码判断跳转 使用的是wx.miniProgram.redirectTo({url: ‘/pages/page/index/index’})。但是发现两个小程序。但引入入口跳H5的位置不一样。在index 跳H5的这样可以。其它页面跳H5不能这样跳回(但开发者工具上可以,真机又不行,醉了)。推测应该得按绝对路劲来。如果只是返回上一页。直接使用wx.miniProgram.navigateBack 是没有问题。...原创 2022-08-31 17:37:19 · 2598 阅读 · 0 评论 -
微信小程序之webview H5以小程序 的跳回,传值触发动作
在小程序引入H5页面<web-view bindmessage="handleGetMessage" src="{{outSrc}}"></web-view> handleGetMessage: function(e) { // 获取webView 修改后传递的信息。判断调用用户信息接口 console.log('修改了用户信息', e.detail.data) if(e.detail.data && e.detail.data[0] &原创 2022-04-11 14:37:42 · 1429 阅读 · 0 评论 -
vue URL或接口请求拼接参数方法
新建个url.js 文件/** * 参数字符串转换成对象形式,如:a=1&b=2 转换成 {a:1, b:2} * @param {String} str 需要转换的字符串 * @param {String} [sep=&] 连接符,可选,默认 & * @param {String} [eq==] 键值间隔符,可选,默认 = * @returns {Object} */export function parse (str, sep, eq) { let obj =原创 2022-01-20 16:45:57 · 4795 阅读 · 0 评论 -
常用的正则表达式
01、手机机身码(IMEI) /^\d{15,17}$/02、必须带端口号的网址(或ip)/^((ht|f)tps?:\/\/)?[\w-]+(\.[\w-]+)+:\d{1,5}\/?$/03、网址(url,支持端口和"?+参数"和"#+参数) /^(((ht|f)tps?):\/\/)?[\w-]+(\.[\w-]+)+([\w.,@?^=%&:/~+#-]*[\w@?^=%&/~+#-])?$/04、统一社会信用代码(宽松匹配)(15位/18位/20位数字/字母)原创 2021-11-24 09:45:38 · 403 阅读 · 0 评论 -
vue driver.js引导页面效果
首先,先安装 npm install driver.jsnpm install driver.js页面再引用import Driver from 'driver.js';import 'driver.js/dist/driver.min.css';import steps from "./guide"; // 配置项 对应的HTML 上加上最好是id 可以是.class<div id="guide-menu"> <div></div>原创 2021-11-10 23:11:38 · 882 阅读 · 0 评论 -
模拟Cascader 单纯的显示
子组件: cascaderDiv.vue<template> <div class="cascader_div"> <div class="cascader_option" v-for="(val,index) in dataList" :key="index+'cas'"> <div @click="detail(val,index)"> <span>{{val.p原创 2021-11-05 09:32:38 · 157 阅读 · 0 评论 -
关于vue 项目防范XSS攻击问题
1.对于从接口请求的数据,尽量使用{{}}加载,而不是V-HTMLvue中的大括号会把数据解释为普通文本。通常如果要解释成html代码则要用v-html。而此指令相当于innerHTML。虽然像innerHTML一样不会直接输出script标签,但也可以输出img,iframe等标签。vue文档关于v-html的说明如下所示:2.对用V-HTML和INNERHTML加载的客户信息进行转义如果显示内容里面有html片段,一定需要用v-html或者innerHTML加载,例如:里面的message是原创 2021-11-03 16:10:25 · 12361 阅读 · 0 评论 -
van-calendar 组件 限制周六日等处理
<van-calendar title=“请选择预约日期” color="#61A3F2" v-model=“show” type=“single” :min-date=“minDate” first-day-of-week=“1”:max-date=“maxDate” @confirm=“timeConfirm” :formatter=“formatter”/> data() { return { servItemCname: '', week原创 2021-10-08 17:50:20 · 1044 阅读 · 0 评论 -
H5加app混合开发。关于H5页面使用高德定位功能,失败问题
因为是混合开发。app 加载H5页面使用的是webView控件。app 需要开启H5辅助定位功能。如安卓高德官方文档 https://lbs.amap.com/api/android-location-sdk/guide/android-location/new-assistant_location原创 2021-09-22 15:31:06 · 1138 阅读 · 2 评论 -
vue html页面script引用高德地图异步问题
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=xxxx"></script> 在页面script 引入高德api . 如果在api 还没有返回是就去调用。会报错未获取到AMap所以需要异步处理在html 页面 <script> (function () { var url = `https://webapi.amap.com原创 2021-09-13 11:16:38 · 512 阅读 · 0 评论 -
vue 页面悬浮图标 滑动。和影响背景页面滑动问题等
直接上代码先 。组件 。次组件功能没有全部完善,需要自己改动 float.vue<template> <div class="ys-float-btn" :style="{'width':itemWidth+'px','height':itemHeight+'px','left':left+'px','top':top+'px'}" ref="div" @touchstart.stop="gtouchstart()" @touchmove.s原创 2021-09-06 16:24:01 · 651 阅读 · 0 评论 -
js vue日期时间判断 大于某个日期时间
computed:{ isdateTime: function() { // 时间判断 首页更新跑马灯提示 let a= new Date() // console.log(a.getFullYear()) if (a.getFullYear() > 2021) { return false; } else if (a.getMonth() > 7) { // 月份,大于8月 ..原创 2021-08-19 16:09:15 · 2203 阅读 · 0 评论 -
js 正则替换换行符和空格( )
如数据是 let a = '↵换行个阿斯蒂芬↵换行个阿斯蒂芬↵ ABCD'; let b = a..replace(/[\r\n]/g,'<br/>').replace(/ /g, ' ');这样就搞定了。多个空格就会多个 替换原创 2021-07-13 18:08:52 · 2137 阅读 · 0 评论 -
关于JS运算,出现多余小数点尾数,浮点问题处理
js 计算 如3.6-3=0.6000000000000001。加减乘除,就不一一举例了。原因十进制的0.1和0.2都会被转换成二进制,但由于浮点数用二进制表达时是无穷的,例如。JavaScript 代码:0.1 -> 0.0001100110011001...(无限)0.2 -> 0.0011001100110011...(无限)整数的精度问题19571992547450991===19571992547450992 // true同样的原因,在 JavaScript 中原创 2021-06-15 09:45:34 · 6220 阅读 · 0 评论 -
关于textarea 自动撑高问题,设别换行问题
如果只是为了渲染,设别换行的话。我们可以换个思路来实现。把textarea 的换行符替换成div等元素能设别的。不就可以了吗<div class="text" v-html="actDetailInWxObj.actDesc.replace(/\n\r/g,'<br/>')"></div>搞定...原创 2021-05-21 17:34:14 · 223 阅读 · 2 评论 -
js vue 数据对象排序
attacheClick(val){ this.isAttache = val; let tableData = JSON.parse(JSON.stringify(this.tableData)); if (val == '0') { this.tableData = this.sortByKey(tableData,'premiumAll'); console.log('按保费', this.so原创 2021-05-21 14:59:02 · 346 阅读 · 0 评论 -
vue 使用Swiper.js 实现轮播 ,中间图还在两边显示一小段上下图
首先得安装依赖 再引入Swiper.js 。在main.js 引入// swiper 轮播样式import “swiper/swiper-bundle.min.css”;分装组件页面<template> <!-- 轮播组件 --> <div class="swiper_banner"> <div class="swiper-container"> <div class="swiper-原创 2021-04-16 17:52:08 · 963 阅读 · 0 评论 -
微信公众号vue 项目H5页面后台有对前端页面重定向,本地环境调用问题
接口会报302。应为有重定向解决方式 :先打开测试环境。查看查询的后台是通过cookies 来判断重定向。 把测试kookies 赋值到http://localhost:8080/ 本地环境下的页面cookies 里面。就ok 了原创 2021-03-08 09:35:20 · 685 阅读 · 0 评论 -
H5 微信端分享功能模块各按钮禁用,打开处理,及分享组件
首先,路由切换是每个页面都默认调用微信方法关闭。看你要关闭那些https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#44 官方文档地址项目加载的时候需要去注入微信wx.config 。但要调用微信sdk .我这是通过后台拿的签名等数据 created(){ GET_CONFIG({appId:APP_ID,url:window.location.href.split("#")[0]}).then(.原创 2021-02-08 10:57:29 · 982 阅读 · 0 评论 -
数组对象,根据对象多个属性值,或单个判断,重组数组
首先 提供重组方法// let a = [{id: 1}, {id: 3}, {id: 2}, {id: 3}, {id: 1}]; // [[{id: 1}, {id: 1}], [{id: 2}], [{id: 3}, {id: 3}]]export function reduceList(val, src) { // 通过某个属性值相同判断—重组数组对象let b = val.reduce((r, x) => ((r[x[src]] || (r[x[src]] = [])).push(x原创 2021-02-05 15:36:15 · 342 阅读 · 0 评论 -
H5跳转小程序点击按钮各种样式注入无法撑开问题
<div class="launch_btn_2"> <wx-open-launch-weapp username="gh_xxxxxx" :path="path" > <script type="text/wxtag-template"> <style>.btn {width: 180px; h.原创 2020-12-30 17:33:40 · 1213 阅读 · 3 评论 -
js日期和时间戳之间相互转换
// (1)、将当前日期转换为时间戳。 var now = new Date(); console.log(now.getTime()) // 将当前日期转换为时间戳,getTime()方法可返回距1970年1月1日之间的毫秒数。也可以使用 +now ,该效果等同于now.getTime()// (2)、将指定日期转换为时间戳。 var t = "2017-12-08 20:5:30"; // 月、日、时、分、秒如果不满两位数可不带0. var T = new Da原创 2020-12-15 17:38:36 · 554 阅读 · 0 评论 -
关于 H5 跳转微信小程序,扫码识别跳转小程序
H5跳转小程序 官方文档https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html已有实现,有问题可以留言,或加微信475458659原创 2020-11-24 15:37:10 · 839 阅读 · 0 评论 -
vue异步公共方法处理
findLoginUserAuthorityCode (context,data){ // /api/userAuthorization/findLoginUserAuthorityCode return new Promise((resolve, reject) => { publicModuleApi.findLoginUserAuthorityCode(data).then(res => { let src = {};原创 2020-09-09 11:07:40 · 392 阅读 · 0 评论 -
vue 页面添加script 标签引入js
mounted() { // AMapUI.loadUI(...) this.init (); }, methods: { init () { let script = document.getElementById('gaodeMapScript'); // if(this.map) return; // this.isBodyLoading = true; if(!script){ script = documen原创 2020-09-08 11:28:41 · 6798 阅读 · 0 评论 -
URL字符串 某个值得截取替换
var url="http://192.44545/#/asdadsa?cc=uihkh&aa=009";if (url.match(/aa=(\S*)&/)){ url.replace(url.match(/aa=(\S*)&/)[1], '99809809')} else { url.match(/(\S*)parentOpenId=/)[1] +'aa=999999999'}原创 2020-08-24 15:04:00 · 516 阅读 · 0 评论 -
vue 多个页面共用 js 方法处理 跳转路由实现之mixins
直接上图首先js 配置原创 2020-08-07 14:59:13 · 1304 阅读 · 0 评论 -
js 唤醒app(安卓,ios)
需要安卓和ios 配合需要配置要scheme和host提供给H5唤醒方法原创 2020-08-07 14:54:33 · 428 阅读 · 0 评论 -
vue动态路由配置, 通过路由区分模块化打包配置
import Vue from 'vue';import Router from 'vue-router';import config from '@/config';Vue.use(Router);// 模块路由名称(与文件夹名称相同)const moduleNameList = [ "basicService", "equipment", "upkeep", "workOrderRouter", "medicalWaste", "inspection", "or原创 2020-07-31 15:35:32 · 2898 阅读 · 0 评论 -
关于 vue使用 keepAlive是 使用nutui滚动组件时切换路由滚动问题的一个小bug处理
切换路由会滚动页面重新加载数据后, 滑动的距离还是上一次多页的。但这是是只加载了一页数据。所有会导致页面空白了。加上 beforeRouteLeave( to, from, next){ // keepAlive 导致滚动组件没有更新视图层 返回时距离有问题。所以加上路由导航守卫 // console.log('22222') // form.meta.keepAlive = false; next(); },导航守卫就好了...原创 2020-07-23 16:11:21 · 457 阅读 · 0 评论 -
vscode vue代码高亮加支持scss嵌套语法设置
首先 下载插件 HTML Snippets "files.associations": { "*.cjson": "jsonc", "*.wxss": "css", "*.wxs": "javascript" },位置 file–preferences–settings 里面设置settings.json 文件配置原创 2020-07-14 18:45:03 · 1589 阅读 · 0 评论 -
vue cli3下 src 图标显示[object Module] 问题
配置chainWebpack: config => { config.module .rule('images') .use('url-loader') .loader('url-loader') .tap(options => Object.assign(options, { limit: 2000, esModule: false })); // 配置线上图片转base64。 app 已有做浏览器缓存。转换过大,会加大首屏加载时长}原创 2020-07-09 10:35:36 · 1490 阅读 · 2 评论 -
vue cli3 配置上线 本地图标转换base64 显示
chainWebpack: config => { config.module .rule('images') .use('url-loader') .loader('url-loader') .tap(options => Object.assign(options, { limit: 600000 })); // 配置线上图片转base64 }limit 是配置可转换图片大小...原创 2020-06-24 09:23:12 · 1342 阅读 · 0 评论 -
vue页面 单独引入外部cdn 或 地图api 方式
<template> <div class="position-box"> <!-- <el-amap vid="amapDemo" :center="center" :zoom="zoom" class="map"> <el-amap-marker vid="component-marker" :position="psCenter"></el-amap-marker> </el-amap> --原创 2020-05-27 14:55:09 · 648 阅读 · 0 评论 -
vue cli3之vue.config.js 文件配置
'use strict'const path = require('path')function resolve(dir) { return path.join(__dirname, dir)}const name = 'vue project' // page title// If your port is set to 80,// use administrator privileges to execute the command line.// For example, Mac原创 2020-05-27 14:48:12 · 523 阅读 · 0 评论 -
vue CDN引入插件在 main.js 全局引入时 防止报错 导致项目无法加载问题
main.js . 关于CDN引入可以看我上一篇文章var echarts = {};var moment = {};try { // 防止CDN无效时报错影响项目打开 echarts = require('echarts'); moment = require('moment');}catch(err){ echarts = {}; moment = {};}finally{ Vue.prototype.$echarts = echarts; Vue.prot原创 2020-05-20 11:37:37 · 1872 阅读 · 0 评论 -
cli3项目 移动端减少首屏时间,配置使用CDN
安装插件cnpm install --save-dev html-webpack-pluginvue.config.js 文件配置const HtmlWebpackPlugin = require(‘html-webpack-plugin’) // 引入CDN配置插件const externals = { // 不打包插件// vue: ‘Vue’,// ‘vue-router’: ‘VueRouter’,// vuex: ‘Vuex’,// axios: ‘axios’,echarts:原创 2020-05-19 17:13:48 · 1139 阅读 · 0 评论 -
js复制内容到黏贴板。
复制必需依赖input,textarea。<input class=“copy” @click=“copyClick” value=“复制链接”/>copyClick(){ // 复制 let Url=this.appUrl; // 需要复制的内容 this.appUrl 为vue data定义变量。 let isInput = document.createElement('input'); isInput.value = Url; document.bod原创 2020-05-13 09:25:23 · 143 阅读 · 0 评论