weixin_43795169-CSDN博客

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

原创一些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 153

原创为什么倒计时在安卓可以，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 1618

原创 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 7107 1

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

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

2021-11-18 09:57:17 265

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

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

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

原创 uniapp H5端解决跨域

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

2021-04-12 10:42:37 127

原创图片大小超出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 1230

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

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 809

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

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

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

2020-05-14 12:08:10 721

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

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

2020-05-14 12:00:00 783

原创安装指定版本的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 3023

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

原创微信小程序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 3519

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

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

2020-03-26 16:50:35 257

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

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

2020-03-26 16:23:44 327

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

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

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

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 3932

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

原创微信小程序接入广告（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 4892 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 2343

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

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

原创 vue滚动事件

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

2020-03-10 16:31:12 2095

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

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

2020-03-10 15:58:25 2153

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

原创 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 936 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 745

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

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

2020-03-01 13:26:28 2962

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

2019-11-01 12:13:30 1437

原创微信小程序阻止冒泡

（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 120

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

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

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

2019-10-29 11:21:48 1525

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

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

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

空空如也

空空如也