自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(56)
  • 收藏
  • 关注

原创 vue keep-alive在路由缓存中的使用

路由缓存//include 和 exclude prop 允许组件有条件地缓存//以下例子为:只缓存name为index和my的路由,(注意:这里需要在index 和 my的组件内定义name的值 ,不是给route的name赋值)<keep-alive include ="index,my"> <router-view></router-view></keep-alive>使用了keep-alive后,组件内可以使用activated、d

2021-11-24 14:41:07 524

原创 一些git命令的使用方法

1、拉取代码git clone 代码仓库地址2、提交代码git add . //提交全部文件git commit -m '提交日志' //提交至本地仓库git psh // 推送至远程仓库3、放弃本地修改,拉取最新代码(1)未使用git add缓存代码时 使用git checkout --filename 或 git checkout .(放弃所有修改), 此命令用来放弃修改过未add的内容,但不会删掉新建的文件,因为新建的文件还未加入到git管理系统,git是未知的

2021-11-18 11:20:36 167

原创 为什么倒计时在安卓可以 ,ios不可以

原因:1、ios不识别xxxx-xx-xx这种日期格式2、不兼容24:00:00这个时间点解决方法:1、使用xx.replace(/-/g,"/")替换为xxxx/xx/xx的格式2、可以写成23:59:59

2021-11-18 10:38:42 1637

原创 vue 父级路由调用子路由方法及子路由传值给父级路由

1、父级路由调用子路由的方法子路由中定义了一个getData()方法methods:{ getData(){ console.log('这是子路由方法 由父级路由触发') }}在父级路由页面中给router-view加ref属性 <div class="content"> <router-view ref="child"></router-view> </div>接着调用子路由的getData()方法mounted(){ thi

2021-11-18 10:23:23 7210 1

原创 vue 动态加载组件和按需加载组件

动态加载组件<template> <div class="hello"> <!-- is的值匹配组件的name --> <components :is="currentComponents"></components> </div></template><script>const info=()=>import ('./info.vue') //按需加载组件const

2021-11-18 09:57:17 284

原创 vue引入子路由 及其使用场景

定义子路由//router.jsimport Vue from 'vue'import Router from 'vue-router'Vue.use(Router)export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: resolve=>(require(["@/components/HelloWorld"],resolve)),

2021-11-17 17:17:10 466

原创 vue引入路由的几种方式 包含路由懒加载方式

方式一:// router.js 此处省略Router等的引入import HelloWorld from '@/components/HelloWorld'export default new Router({ routes:[ { path:'/', name:'HelloWorld', components:HelloWorld } ]})方式二:resolve=>(require([‘地址’],resolve))的方式实现路由懒加载// route

2021-11-17 16:21:36 861

原创 vue单页面接入百度统计

在申请百度统计后 会得到以下一段代码,插入到index.html的 < head >< /head >中// index.html<script> var _hmt = _hmt || []; window._hmt=_hmt; window._hmt.push(['_setAutoPageview', false]); //我这里关闭了自动发送页面PV统计请求 防止首次访问时发起两次请求 按自身的需求吧 (function() {

2021-11-17 15:12:45 654

原创 uniapp H5端解决跨域

1、manifest.json源码视图中配置"h5" : { "devServer": { "disableHostCheck": true, "proxy": { "/tapi": { "target": "xxx", //需要跨域请求的域名 "changeOrigin": true, "secure": false,

2021-04-12 10:42:37 140

原创 图片大小超出div宽高时 如何按比例缩放

给img添加 object-fit属性<div> <img src=" " /></div>div{ width:100px; height:100px;}img{ width:100%; height:100%; object-fit:cover; //剪切图片,保留原始比例}object-fit属性所有的值object-fit: fill|contain|cover|scale-down|none|initial|inherit;

2020-06-04 15:43:19 1262

原创 刷新时 让滚动条回退到顶部

var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; //获取当前滚动条与顶部的距离var timer=setInterval(function(){ var top=scrollTop/2 document.documentElement.scrollTop-=top; //每一段时间滚动一定的距离,直到滚动条回退到顶部 清除定时器 if(doc

2020-05-27 11:12:09 821

原创 使用video标签时报错 Uncaught (in promise) DOMException

问题<video id="video" preload> <source src="1.mp4"></source></video>play(){ var video=document.geiElementById('video'); video.play(); //播发视频 // video.pause(); //停止播放}运行时报错 Uncaught (in promise) DOMException原因

2020-05-14 18:56:04 10854

原创 ios上z-index失效的原因

做webapp的时候,需要做一个弹窗的遮罩层,但是给元素添加z-index的时候,android正常 ios上不生效 ,导致ios上有些内容没有被弹窗的遮罩层覆盖原因:被添加z-inex样式的元素的父元素样式中含有overflow:……,导致了ios中z-index不生效...

2020-05-14 12:08:10 752

原创 前端自定义浏览器标题栏或收藏时标题前显示的icon图标

准备步骤:(1)制作一个.ico类型的图片文件 一般尺寸为16*16也可以在网上找 图片转换icon 的在线工具(浏览器会首先在网页的根目录下找favicon.ico文件)(2) 将favicon放在根目录下1、原生在html的 < head >< /head > 标签中引入 <!--浏览器地址栏icon--> <link rel="icon" href="favicon.ico" type="image/x-icon"> &

2020-05-14 12:00:00 804

原创 安装指定版本的vue-cli

1、安装vue-cli最新版本如果有旧版本,卸载旧版本 npm uninstall vue-cli -g暗转新版本 npm install -g @vue/cli2、安装指定版本 vue-cli查询可用版本 npm view vue-cli versions --json安装指定版本 npm install -g vue-cli@2.9.6npm install -g @vue/cli@版本号 (vue-cli3以上)3、查看当前版本vue -V...

2020-05-11 11:46:41 3052

原创 natapp内网穿透的使用

1、工具下载 https://natapp.cn/2、注册账号 按照提示购买隧道 我这里购买的是免费的填写信息 我这里需要的隧道协议是web,用于web项目和微信开发穿透到本地服务。映射到本地的端口号是127.0.0.1:8080获得隧道3、natapp工具下载后,减压,运行natapp.exe文件使用命令行 输入 natapp -authtoken 隧道的...

2020-04-04 12:08:27 343

原创 微信小程序bindtap事件传值 取值

传值 <button bindtap="btn" id="hello" data-cnName="你好" data-name="{{name}}">Button按钮</button>取值data:{ name: '名字 '},btn(e){ console.log(e.currentTarget.id); // 'hello' con...

2020-03-27 11:49:35 3561

原创 微信小程序生成底部tabbar

1、在app.json中配置"sitemapLocation": "sitemap.json", "tabBar": { "color": "#a9b7b7", "selectedColor": "#11cd6e", "borderStyle": "white", "list": [ { "selectedIconPath": "i...

2020-03-26 16:50:35 270

原创 微信小程序引入iconfont图标

1、下载iconfont小图标 https://www.iconfont.cn/选择图标添加入库,再添加至项目 在‘我的项目’中将资源下载到本地2、项目中新建一个iconfont.wxss文件,将下载下来的压缩包里iconfont.css的代码复制到 iconfont.wxss,然后在app.wxss引入iconfont.wxss文件...

2020-03-26 16:23:44 340

原创 js判断项目在安卓系统还是ios系统打开

var userAgent = navigator.userAgent; var isAndroid = userAgent .indexOf('Android') > -1 || userAgent .indexOf('Adr') > -1; //android终端 var isiOS = !!userAgent .match(/\(i[^;]+;( U;)? ...

2020-03-11 18:50:29 227

原创 vue 给v-for循环列表添加不一样的class或者id

<ul> <li v-for="(item,index) of cards" :id='ownClass(item)' :key="index" > </li></ul>data(){ return{ cards: [{ id: 1, name: 1}, { id: 2, name: 2}] }} methods:{ o...

2020-03-11 18:47:00 2020

原创 黑色背景视频和白色背景图片变透明的方法

css 的 mix-blend-mode 属性例1: mix-blend-mode:screen 滤色<div> <div class="bg"></div> <video src="../../../2.mp4" autoplay="autoplay" muted="muted" /> <!--2.mp4是一个黑色背景的动...

2020-03-11 15:04:44 4003

原创 vue 拼接序列图为gif动画

<div class="gif"> <img :src="gif" /></div>export default{ data(){ return{ gif:'', imgs:[ 'cardGif (1)','cardGif (2)','cardGif (3)','cardGif (4)','cardGif (5)','c...

2020-03-11 14:17:57 1873

原创 微信小程序接入广告(banner广告 激励视频广告 插屏广告)

1、banner广告<ad unit-id="{{ adUnitId }}"></ad>2、视频广告<ad unit-id="{{ adUnitId }}" ad-type="video" ad-theme="white"></ad>3、插屏广告 // 实例化插屏广告 createInterstitialAd: function ...

2020-03-11 12:15:40 4939 1

原创 js监听物理返回键 浏览器返回键

1、监听 popstate ,按物理返回键 浏览器返回键 调用history.back()、history.forward()、history.go()方法也会触发var isRun;window.addEventListener('pageshow', function() { isRun = false; setTimeout(function() { isRun = tru...

2020-03-11 11:42:15 2394

原创 js倒计时 精确到毫秒

倒计时 精确到毫秒(只保留100以内的毫秒数)<body> <div class="time"></div> </body> <script> var day = 0; var hr = 0; var min = 0; var sec = 0; var ms = 0; var newExpire = 3 ...

2020-03-11 10:47:31 886

原创 vue使用过滤器filters

1、filter的使用 <div>{{ num | numFilter }}</div> <div :id="id | idFilter"></div>export default{ data(){return {} }, filters:{ numFilter:function(val){ if (!val) retu...

2020-03-10 18:28:02 302

原创 vue滚动事件

vue监听滚动事件,当移动到某个按钮之后(即按钮消失在屏幕之内),底部出现悬浮框mounted() { window.addEventListener('scroll', this.handleScroll, true); //监听滚动条},updated() { this.btnTop = document.querySelector('#test').offsetTop; //监...

2020-03-10 16:31:12 2123

原创 js判断项目是在微信还是支付宝浏览器打开

isWeiXin() { var ua = window.navigator.userAgent.toLowerCase(); if (ua.match(/MicroMessenger/i) == 'micromessenger') { // console.log("微信端"); // 是微信端 this.wei...

2020-03-10 15:58:25 2201

原创 vue项目将px转化为rem (解决移动端的适配问题)

(1)安装 lib-flexible 和 px2rem-loadernpm i lib-flexible --snpm i px2rem-loader --d(2)在main.js文件中引入lib-flexible,即设置自动调整页面比例 import 'lib-flexible'(3)还要在index.html中把这样的语句删除,否则将根据已有的meta标签来设置缩放比例...

2020-03-10 15:49:25 1193

原创 vue构建多入口 多出口项目

**vue构建多入口 多出口项目**(1)使用vue-clit搭建项目cnpm install -g vue-cli vue init webpack '项目名'(2) 调整一下项目目录(3)修改main.js和other.js文件main.jsimport Vue from 'vue'import App from './entrance/App'...

2020-03-10 15:38:26 956 1

原创 vue刷新时不让页面出现空白的方式 provide/inject

**vue刷新时不让页面出现空白的方式**(1)控制router的显示与隐藏 App.vue<template> <div id="app"> <router-view v-if="routerAlive"/> </div></template><script> exp...

2020-03-10 09:59:19 765

原创 gif图片只加载一次,再次刷新不会重新加载怎么办

gif图片只加载一次,再次刷新不会重新加载怎么办方法一(vue项目):<div class="gif" v-show="gif_show" > <img :src="!gif_show|| gif " /> </div>只需要对src进行判断,替换src的缓存方法二:图片路径后面,每次需...

2020-03-01 13:26:28 3077

原创 JS根据某个特定字符把字符串分成两句话

<script type="text/javascript"> function foundText(key){ //key为关键字 var str = "广西壮族自治区-贺州市是个美丽的地方"; //从‘市’截取字符串 var index = str.indexOf(key); console.log(index) var result1 = str.subst...

2019-11-01 12:13:30 1466

原创 微信小程序阻止冒泡

(1)使用这种写法,当点击inner事件的时,也会触发out事件<view class='out' bindtap="out"> <view class='inner' bindtap="inner"> </view></view>Page({ out(){ console.log('外面的') }, in...

2019-10-30 14:33:14 132

原创 vue生成二维码

(1) 安装插件npm i qrcode --s(2) 组件中引入import QRCode from "qrcode"(3)使用html代码 <canvas id="qrcode"></canvas>js代码 mounted() { this.$nextTick(()=>{ this.qrcode(ur...

2019-10-29 14:58:42 125

原创 小程序复制文字、保存图片

<view class="desc"> <text class="text">复制的文字</text> <image src="图片路径"></image> </view> <view class="btn"> <button bindtap='cop...

2019-10-29 11:21:48 1552

原创 vue路由传参的两种方式

1、使用params传参这种方式参数不会跟在地址栏,但是刷新之后就获取不到路由传的参数值了(1)在定义路由的时候,加name属性const routes = [ { path: '/', redirect: '/home'},//设置默认指向的路径 { path: '/home',component: Home}, {path:'/Order',name:'Order', com...

2019-10-24 15:06:43 245

原创 github添加ssh

1.通过命令ssh-keygen,生成ssh,记住生成路径2.在github上添加ssh在主页的右上角选择 setting选择SSH and GPS keys - New SSH key在key中填入刚生成的id_rsa.pub文件的内容(生成的时候会有路径,根据路径找到id_rsa.pub文件),Add SSH key3....

2019-10-22 19:52:58 121

原创 vue点击按钮将网页内容生成图片(html2canvas)

1、引入html2canvasnpm install html2canvas --s2、在组件中引入import html2canvas from "html2canvas"3、 给需要转成图片的内容节点加ref,便于获取<div id="info" ref="html2canvas"> ……</div>4、点击分享按钮,生成图片 shareBtn...

2019-10-22 18:56:00 881

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除