![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
行走的毛毛虫
一枚小前端多多交流
展开
-
uniapp中h5与android和ios之间调用
1.h5调用android的方法window.android.JavaScriptInterfaceToShare("需要传给android的参数")//JavaScriptInterfaceToShare是android的方法名//android 是android的包类名2.h5调用ios的方法window.webkit.messageHandlers.JavaScriptInterfaceToGiftBgDetails.postMessage("参数")//JavaScriptI原创 2022-05-10 17:00:17 · 1098 阅读 · 0 评论 -
js优化浏览器性能之节流
1.建立函数function throttle(fn,delay){ let valid = true return function() { if(!valid){ //暂停 return false } // 开始 valid = false setTimeout(() => { fn() valid = tr原创 2021-11-25 15:13:12 · 288 阅读 · 0 评论 -
js优化浏览器性能 防抖操作
1.监听浏览器滚动条function showTop () { var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; console.log('滚动条位置:' + scrollTop);}2.利用闭包创建函数function debounce(fn,delay){ let timer = null //借助闭包 return function() {原创 2021-11-25 14:43:00 · 440 阅读 · 0 评论 -
vue中canvas绘制文字超出指定长度行数显示三个点
1.新建一个js文件//处理文字多出省略号显示export function dealWords(options) { options.ctx.setFontSize(options.fontSize);//设置字体大小 var allRow = Math.ceil(options.ctx.measureText(options.word).width / options.maxWidth);//实际总共能分多少行 var count = allRow >= optio原创 2021-11-24 16:20:56 · 1462 阅读 · 0 评论 -
vscode解决代码格式化换行,代码混乱
1.打开vscode ——>首选项——>设置——>用户中找到Vetur——>在settings.json中编辑2.添加以下代码"typescript.validate.enable": false, "vetur.format.defaultFormatter.html": "js-beautify-html", "vetur.format.defaultFormatterOptions": { "js-beautify-html".原创 2021-10-21 10:53:52 · 3444 阅读 · 0 评论 -
小程序保存当前图片到本地相册
wx.getImageInfo({ src: '网络图片地址 http', success(res) { console.log(res.path) wx.saveImageToPhotosAlbum({ filePath: res.path, success: red => { that.$tools.toast('保存成功'); }, fail: err => {.原创 2021-09-17 12:01:07 · 240 阅读 · 0 评论 -
vue中表单导出pdf格式文档
1.npm安装插件//将页面html转换成图片npm install --save html2canvas//将图片生成pdfnpm install jspdf --save 2.在项目下穿件一个js文件// 导出页面为PDF格式import html2canvas from "html2canvas"import JSPDF from "jspdf"export default { install (Vue, options) { Vue.prototype.Exp原创 2021-08-23 21:04:31 · 1344 阅读 · 0 评论 -
在vue中使用原生七牛云sdk分片上传大文件
1.利用npm下载七牛云sdk,(具体可以参考官方api:https://developer.qiniu.com/kodo/1650/chunked-upload)npm install qiniu-js@1.X -D2.在当前页面或者mian.js中直接引入require('qiniu-js/dist/qiniu.min.js')3.以下是全部代码<template> <div class="upload"> <div id="video原创 2021-07-30 18:26:32 · 1520 阅读 · 3 评论 -
vue项目中使用rem进行适配布局
1.新建一个rem.js文件复制以下代码到js文件中(function (window, document) { let rootVw = 750; function resize() { var ww = window.innerWidth; if (ww > window.screen.width) { window.requestAnimationFrame(resize); } else { if (ww原创 2021-07-07 15:34:56 · 283 阅读 · 0 评论 -
js保留银行卡前四位和后四位中间用*代替
let carNumber ="6217853600008665059"let NewCar = carNumber.replace(/^(\d{4})\d+(\d{4})$/,'$1 **** **** $2')console.log(NewCar)//6217 **** **** 5059原创 2021-07-03 15:11:38 · 1330 阅读 · 0 评论 -
js中解决转义字符
decodeURIComponent()原创 2021-06-30 12:20:58 · 1611 阅读 · 0 评论 -
Object.assign()基本用法
Object.assign方法用来将源对象(source)的所有可枚举属性,复制到目标对象(target)。它至少需要两个对象作为参数,第一个参数是目标对象,后面的参数都是源对象。原创 2021-06-04 10:20:55 · 979 阅读 · 0 评论 -
js中new Date()获取的标准时间 转换成 例如: 2021-05-07
//调用let valueData = this.timeFormat(new Data())console.log(valueData,'当前时间字符串')timeFormat(time) { // 时间格式化 2019-09-08 let year = time.getFullYear(); let month = time.getMonth() + 1 > 10 ? time.getMonth()+1 : '0'+(time.getMonth()+1.原创 2021-05-07 20:27:37 · 4665 阅读 · 0 评论 -
vue中将一个对象遍历,key作为变量value作为值,以路由传参的形式路由跳转
1.假设一个对象dataObj<script>export default { data() { return { parmsdata: [] } },methods:{ //点击事件触发toRputer(){let that = this let dataObj = { key:"123", shopid:"18", studyid:"12}//遍历可以采用其他方法,我这里用的是 for ... infor(let i原创 2021-04-26 14:38:14 · 1365 阅读 · 0 评论 -
vue中重置路由到某一个页面
在路由文件夹下面 router 文件下const routes = [ { path: '/', redirect: '/home',//重置页面到home页面 }, { path: '/home', meta: { name: "个人中心", }, component: () => import("@views/Home.vue") },]原创 2021-04-20 10:33:44 · 496 阅读 · 0 评论 -
uniapp中如何定义全局组件类似于vue中的app.vue中的内容
1.将封装好的组件(例如 publicComponents)在main.js中引入import PublicComponents from "@/components/PublicComponents.vue"let componetsBox= Vue.component('center-poup', CenterPoup)//在 app.$mount()下添加document.body.appendChild(new componetsBox().$mount().$el)...原创 2021-04-10 17:26:01 · 1306 阅读 · 2 评论 -
vue事项元素滑动顶部吸顶
1.html<ui id="searchBar"> <li>1234354</li> <li>1234354</li> <li>1234354</li> <li>1234354</li> <li>1234354</li> <li>1234354</li> <li>1234354</li> <li>原创 2021-04-02 16:00:37 · 217 阅读 · 2 评论 -
uniapp中和小程序中video视频的播放和暂停
1.HTML中<video id="myVideo" :src="liveBackplay_url" enable-danmu danmu-btn controls></video>2.在mounted中或者Created中mounted() { this.videoContext = uni.createVideoContext('myVideo');//创建视频实例指向video },3.this.videoContext.play(原创 2021-04-02 15:53:14 · 5494 阅读 · 1 评论 -
vscode设置vue代码片段
1.点击vscode左上方 文件------>首选项--------->用户片段----------->vue.json(顶部搜索框搜索vue)2.添加以下代码{ "Print to console": { "prefix": "vue", "body": [ "<template>", " <div>\n", " </div.原创 2021-03-20 11:50:53 · 130 阅读 · 0 评论 -
vue中手机端项目在微信中打开,关闭当前页面方法
document.addEventListener( "WeixinJSBridgeReady", function () { WeixinJSBridge.call("closeWindow"); }, false ); WeixinJSBridge.call("closeWindow");//微信对象中的方法原创 2021-03-16 19:15:59 · 879 阅读 · 0 评论 -
vue实现点击展开全部,点击收起全部
1.html代码 <div class="richTxt" :class="is_show ? 'new_detail' : 'work_detail'"> <img src="@/assets/images/bg-recommend.png" alt />//测试的一张图片本地图片 </div> <div class="look_all" @click="原创 2021-03-10 15:58:10 · 2845 阅读 · 0 评论 -
vue实时监测video视屏播放时长和总时长
1.html代码 <div class="top_vdio"> <video id="video" :src="medioUrl" controls="controls"></video>//medioUrl视频地址 </div>2.js代码//监听播放时间 var video = document.getElementById("video"); //使用事件监听方式捕捉事件 video.addEven原创 2021-03-10 15:31:02 · 7423 阅读 · 5 评论 -
vue利用canvas自定义手写签名
1.利用vue第三方vue-esignnpm install vue-esign --save2.在入口文件main.js中引入import vueEsign from 'vue-esign'Vue.use(vueEsign)3.html代码 <div class="pupu_box"> <div class="desc_txt"> <span>注:注:个人签名要求字迹工整、清晰规范、易于识别,杜绝过于艺术原创 2021-03-06 18:55:48 · 420 阅读 · 0 评论 -
vue移动端,使用canvas生成商品海报及自定义海报
1.使用 vue-canvas-posternpm i vue-canvas-poster --save2.在main.js入口文件中引入import VueCanvasPoster from 'vue-canvas-poster'Vue.use(VueCanvasPoster)3.html代码<template> <div class> <vue-canvas-poster :widthPixels="0" :painting="pai原创 2021-03-05 20:48:39 · 1307 阅读 · 0 评论 -
vue移动端获取视屏vdio的第一帧作为图片
1.在图片地址后面加上'?vframe/jpg/offset/1/w/120/h/90'就可以了 <img class="st_log" :src="item.media_url+'?vframe/jpg/offset/1/w/120/h/90'" alt />原创 2021-03-03 21:55:05 · 2852 阅读 · 3 评论 -
利用vue实现悬浮收缩功能
1.在data中定义模拟数组(注:根据数组需求可自行删改) template: [ { category: "float-button", content: { image: "", list: [ { btnimage: require("@/assets/images/boming.png"), imag原创 2021-03-03 14:01:37 · 943 阅读 · 1 评论 -
vue实现悬浮按钮可以随处移动
1.html代码<div class="callback float" @click="onClick" @mousedown="down" @touchstart="down" @mousemove="move" @touchmove="move" @mouseup="end" @touchend="end" ref="fu" > <!-- <p @click="callback">返回原创 2021-03-01 18:23:28 · 2555 阅读 · 7 评论 -
vue中修改下载文件的名字,例如docx,pdf,xlsx
const blob = new Blob([this.detailinfo.reg_file_url], {//this.detailinfo是后台返回给前台的文档下载链接 type: "application/msword", }); const objectUrl = URL.createObjectURL(blob); const link = document.createElement("a"); //...原创 2021-03-01 18:15:52 · 2450 阅读 · 1 评论 -
在vue中判断当前页面是嵌入在小程序中还是微信浏览器中
1.使用weixin-js-sdknpm install weixin-js-sdk//在当前页面引入import wx from "weixin-js-sdk";2.在所需要判断的地方加入以下代码 var ua = window.navigator.userAgent.toLowerCase(); let that = this; if (ua.match(/MicroMessenger/i) == "micromessenger") {原创 2021-03-01 18:10:02 · 2795 阅读 · 0 评论 -
vue中监听所有页面路由传参
1.在app.vue中使用watch函数watch: {//和methods同级 $route() { console.log(window.location.href, "页面参数"); //如果要存入使用的和接收的话 sessionStorage.setItem("token",this.$route.query.token)//token假设参数中有token参数 }, },...原创 2021-03-01 18:03:48 · 428 阅读 · 0 评论 -
js中根据数组对象中的相同id值进行合并,并将name值合并,并且用逗号隔开返回新的数组对象
1.模拟一个假的数组let dataArr = [ { id:1, name:"A", score:10, }, { id:2, name:"B", score:10, }, { id:1, name:"c", score:10, }, { id:2, name:"D", score:10, },]2.合并对象数组 var beforeData = dataArr;原创 2021-03-01 17:55:10 · 4253 阅读 · 0 评论 -
js中返回一个数组对象中的某一个值 在当前数组中的索引
1.模拟一个数组对象//自定义数组对象let dataArr = [ { id:1, name:"小明", sex:"男", desc:"喜欢唱歌" }, { id:2, name:"小花", sex:"女", desc:"喜欢画画" }, { id:3, name:"小三", sex:"男", desc:"喜欢gril" }, ]原创 2021-03-01 16:59:35 · 2800 阅读 · 1 评论 -
vue项目中没有token进入其他页面会重置到登录页,但是有时候有的页面不需要验证token解决方法
1.在你的路由拦截main.js中router.beforeEach中(有的不在main.js中以我的为例)router.beforeEach((to, from, next) => { var token = localStorage.getItem('token')//存储token if (to.meta.name) { document.title = to.meta.name;//路由中设置页面标题 if (token||to.meta.nacy=='true'原创 2020-12-22 11:03:57 · 5345 阅读 · 9 评论 -
vue中使用vant中的图片预览组件出现图片在没有关闭改变路由图片不关闭解决方法
1.给图片点击查看创造全局变量 在data中定义instance_beforelookImg() { this.instance_before = ImagePreview({ images: [this.detailInfo.acupoint_img],//this.detailInfo.acupoint_img图片地址改成自//己的图片地址 }); },2.在当前页面同过钩子函数在路由离开的时候,关闭预览的图片 beforeRouteL..原创 2020-12-22 10:53:52 · 977 阅读 · 0 评论 -
vue前端配置反向代理解决跨域问题
1.在项目中的config文件夹下面index.js中(如果你用的是vue3以上请在根目录下找到vueConfig.js)中找到proxyTable:{}配置proxyTable: { '/baseApi': { target: 'https://XXXXXXXXXX.com',//服务器地址 及接口地址 changeOrigin: true, // 在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数 据,这样服务端和服务端进原创 2020-12-03 14:21:55 · 896 阅读 · 1 评论 -
关于html中页面滚动条的样式及修改
::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端的按钮 ::-webkit-scrollbar-track 外层轨道 ::-webkit-scrollbar-track-piece 内层滚动槽 ::-webkit-scrollbar-thumb 滚动的滑块 ::-webkit-scrollbar-corner 边角 ::-webkit-resizer 定义右下角拖动块的样式...原创 2020-12-03 11:02:10 · 452 阅读 · 0 评论 -
针对于vue或者html中图片在服务器中更换前端浏览器中没有更新的问题
ctrl+f5 完美解决原创 2020-11-06 10:27:20 · 741 阅读 · 0 评论 -
vue中操作原生音频audio的播放和暂停
1.在methods中定义方法playAudio()palyAudio(){ this.audio = new Audio(); this.audio.src = mp3; let playPromise; playPromise = this.audio.play(); if (playPromise) { playPromise.then(() => { // 音频加载成功 // 音频的原创 2020-10-28 10:37:10 · 12361 阅读 · 0 评论 -
mpvue小程序上传图片的使用和删除
# 在当前所用的template模板中嵌入html、以下代码<div class="p10_15"> <upload_ :upload_info="upload_info" ref="uploads" @cb="get_choose_img" ></upload_> </div>## 在script中引入upload组件 import uplo原创 2020-09-15 16:23:29 · 219 阅读 · 1 评论 -
mpvue小程序获取用户地理位置登录授权简单封装
# 在所在当前页面中嵌入html、代码<div class> <p>当前位置:{{currentLocation }}</p> <open_set v-if="show_setting" @close_setting="close_setting" @cb="setting_info" ></open_set> <div class="w_100 h150原创 2020-09-15 16:06:32 · 254 阅读 · 1 评论