GTbond的博客

原创 TS-1-类型

TS-1-类型

原创 vue2遇到问题--mixins中watch被多次调用

vue2监听事件重复多次

原创 vant-swipe自适应图片高度+图片预览

vant-swipe自适应图片高度+图片预览

原创 vue+h5移动端音乐自动播放

无

原创 判断iframe是否加载完成的完美方法

判断iframe是否加载完成的完美方法需求：vue某个组件引入iframe，需要判断iframe是否加载完毕，不然用户进入是白屏加载中created (){使用加载提示框} mounted () { const iframe = document.querySelector('#iframe') // 处理兼容行问题 if (iframe.attachEvent) { iframe.attachEvent('onload', () => {

原创 vue内网穿透

解决 Vue 项目 invalid host header 问题disableHostCheck:true报错问题描述使用内网穿透时出现 invalid host header找了好多都是让配置vue.config.js系统报错// vue3 vue.config.jsmodule.exports = {// 跳过检查hostdevServer: { disableHostCheck: true }}按照上述进行配置时出现报错信息在这里插入图片描述原因分析：根据报错提示在web

原创 vue遇到的问题五：修改路由参数，不会刷新该页面

1. vue路由，修改某组件的路由参数，不会刷新该组件需求：在某个组件中，内容由参数发起接口获取，且该组件由上/下翻页效果，需要改变参数，更新内容http://localhost:8080/#/module?type=1&id=15 //需要改变id解决办法：监听路由方法一：watch:{// 路由发生变化页面刷新 '$route' (to, from){ this.$router.go(0); }}//缺点：刷新一次页面，用户体验不好方法二：// 将函

原创 移动端自适应

一. 利用rem+js该方法利用rem根据html元素字体大小变化，例如html的font-size=16，则1rem等于16px；但是html的font-size是不会自己变的，需要利用js来改变不同设备下的font-size的大小1. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 设置 html的meta2. http

原创 css图片缩放清晰

css使图片缩放清晰img{ image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; -ms-interpolation-mode: nearest-neighbor;}

原创 vue中使用v-html，css不生效

1.vue中使用v-html，css不生效

原创 vant遇到的问题

1.vant 的CountDown倒计时倒计时一开始，自动执行一次“finish 倒计时结束时触发” ，“change 倒计时变化时触发”也会触发，原因不明，导致直接触发事件，暂时解决方法，设置一个全局变量，值为1，再finish事件触发时，自减一，第二次触发finish事件时，才执行我想要执行的代码...

原创 日期函数（最近一周/一个月/半年/一年）

日期函数（最近一周/一个月/半年/一年）// getTime 返回 1970 年 1 月 1 日至今的毫秒数。// setTime(毫秒) 方法以毫秒设置 Date 对象。//今天function today(){ const newDay = new Date(); return newDay.getFullYear()+"-" + (newDay.getMonth()+1) + "-" + newDay.getDate() } //最近一周 function las

原创 vue-生成二维码+下载二维码

<div class="img" ref="code"> <qrcode-vue :value="link" size="175" level="H" /></div><p class="down" @click="code()">下载二维码</p>import html2canvas from "html2canvas";import QrcodeVue from "qrcode.vue";components:{ Qr

原创 截取URL中的参数值

截取URL中的参数值`//对encodeURI()编码过的 URI 进行解码。function getUrlParam(name) {var reg = new RegExp("(^|&)" + name + “=([^&]*)(&|$)”, “i”);var r = window.location.search.substr(1).match(reg);if(r != null){return decodeURI(r[2]);}return “”;//如果此处只写

原创 前端工具下载

前端工具下载git 下载 https://npm.taobao.org/mirrors/git-for-windows/ 选择Git-xxx-64-bit.exe 文件vscode 下载官网https://code.visualstudio.com/ 获取到文件下载地址，将/stable地址之前的地址换为如下内容：http://vscode.cdn.azure.cn + /stable········ 切换国内的镜像...

原创 uniapp笔记

1.项目目录2.模板语法vue组件语法v-bind / :v-on / @v-modelv-ifv-showv-for空标签templateview 作为div使用text 作为span使用

原创 ES6查漏补缺

ES6查漏补缺1. let 和const 命令区别于var不存在变量提升let 是块级作用域，只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响const命令同样适用let不允许在相同作用域内，重复声明同一个变量重点： let实际上为 JavaScript 新增了块级作用域，即外层代码块不受内层代码块的影响块级作用域内部，优先使用函数表达式const声明一个只读的常量。一旦声明，常量的值就不能改变；const

原创 Less基础使用

Less基础使用个人理解：less就是升级版css，可以使用变量、函数等，易维护1. 基本用法例如设置一个项目的主题色，大部分元素都要用到，如果用到的元素每个都写具体color:xxx；换个颜色不是就要全部修改？设置成变量，需要用到该颜色的都使用变量，以后修改颜色，只需要修改变量//style.less设置变量：（书写位置没有影响）@mainColor : pink; //@变量名 : 具体颜色使用变量：p{ color: @mainColor; //属性： @变量名}

原创 多行文本收起/展开功能

多行文本收起/展开功能1. 效果图（默认设置超过2行才显示 按钮）文字未超过两行超过两行2. 优点缺点1.按钮和文字是环绕型，不会遮挡文字，文字避开会换行，不会像用定位做的，不会遮挡刚刚顶满最后一行的文字，定位的按钮和部分文字出现遮挡2. 默认超过两行出现 收起、展开功能；可以修改-webkit-line-clamp: 2;改变行数3.兼容性问题：IE浏览器不能生效3. 代码<template> <!-- 按钮和文字是环绕型，不会遮挡文字，文字避开会

原创 粘粘定位：吸顶效果

吸顶效果1. 才用 position:sticky 粘性定位这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位，适用于一些特殊场景；元素定位表现为在触发条件前为相对定位，触发条件之后为固定定位top, right, bottom，left 就是条件；跨越它们设定的值，就是触发条件设置的top、left的值等就是相当于设置fixed定位的位置兼容性：position:sticky 的兼容性不乐观案例：//html<b

原创 JS基础知识四：scrollWidth, clientWidth, offsetWidth的区别

scrollWidth, clientWidth, offsetWidth的区别1. 定义scrollWidth：对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大。clientWidth：对象内容的可视区的宽度，不包滚动条等边线，会随对象显示大小的变化而改变。offsetWidth：对象整体的实际宽度，包滚动条等边线，会随对象显示大小的变化而改变。2. 具体情况2-1、元素内无内容或者内容不超过可视区，滚动不出现或不可用的情况下scrollWidth=client

原创 鼠标相关事件

鼠标右键自定义菜单原生js书写思路： 鼠标右键点击事件，先阻止鼠标右键的默认事件；在把自己书写的html展示出来；再点击任意地方消失//html<li>胡歌</li>//自定义的鼠标右键菜单 采取绝对定位，top、left默认为0，默认隐藏<div class="menu"> <div class="item">一级菜单</div> <div class="item">一级菜单</div&gt

原创 vue+element后台管理系统+TagsView基础版

TagsView基础版1. 使用框架、插件vue2+element+vuex2. 大概思路大概需求：1、从效果图看，【人类】这个首页的tag一开始就存在，且不能被删除2、当点击左侧栏的时候,如果没有与该菜单相应的tag则新增，如果存在，变成选中状态3、删除tag时，存在几种情况，若删除的tag是当前页面的tag，那么路由就要跳转；如果删除的tag不是当前页面的tag，则不需要跳转路由4、若删除的tag是当前页面的tag，有分两种情况：如果是最后一个tag被删，那往前一个tag跳转

原创 vscode配置、插件同步保存

转载：https://baijiahao.baidu.com/s?id=1667725885292502238&wfr=spider&for=pc个人纪录1. 下载插件在VSCode扩展商店中搜索“Settings Sync”并安装，安装完后，可以重启一下VSCode2. 插件配置在VSCode程序中任意位置使用快捷键“Ctrl+Shift+P”，输入 sync，点击 Sync: Upload / Update Settings3. 登录首次使用快捷键“Ctrl+

原创 Vue基础知识梳理（二）

vue基础知识梳理（二）1. vue中v-bind:class动态添加class方案一：直接在html结构中给class一个对象//html<div class="btn" :class="{wordColor:false,wordSize:true}" >点我</div>//样式.btn{ width: 100px; height: 30px; line-height: 30px; text-align: center; b

原创 不常见的方法

1. object.hasOwnProperty()object.hasOwnProperty()是用来检测属性是否为对象的自有属性，如果是，返回true，否者falselet person={ name:"胡歌", age:18, eat:{ food:"面条" }}person.hasOwnProperty("name") //trueperson.hasOwnProperty("age") //trueperson.hasOwnProperty("eat") //true

原创 遇到问题四：接口返回一个Blob类型，转化为URL使用

接口返回一个Blob类型，转化为URL使用//html<img :src="verifyIMG" alt="">//方法getVerify().then(res => { let url = window.URL.createObjectURL(res); // 会产生一个类似 blob:d3958f5c-0777-0845-9dcf-2cb28783acaf 这样的URL字符串 // 你可以像使用普通 URL 那样使用它，比如用在 img.src 上。

原创 Vue-路由传参的方法与区别

路由传参1. 通过路由属性中的name来确定匹配的路由，通过params来传递参数父组件this.$router.push传递参数//html<button @click="toChild"> </button>//方法toChild(){ this.$router.push({ name:''ChildView", params:{ id : 1, age:20, ··· } })}子组件使用this.rout

原创 Vue项目+切换中英文+element国际化

vue项目中切换中英文（基础版）1. 使用 vue-i18n 插件安装：npm install vue-i18n官网：https://kazupon.github.io/vue-i18n/zh/started.html2. 在main.js文件加入i18配置import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'// 引入VueI18

原创 前端-文件上传

文件上传1. vue+element 文件上传<el-upload class="upload-demo" //必选参数，上传的地址 action="https://jsonplaceholder.typicode.com/posts/" //是否支持多选文件 multiple //最大允许上传个数 :limit="3" //覆盖默认的上传行为，可以自定义上传的实现 :http-request="uploadFn" > <el-butt

原创 js运算符号顺序

原创 打印功能window.print()

打印功能window.print()1. window.print()打印其实打印的是整个当前网页2.3. 样式问题如果使用less,scss 是不会生效的只能使用css语言格式, 就是不能像less、scss嵌套写//在style中，使用@media print{}//不要嵌套写@media print { div{ font-size:12px; ··· } ···}背景颜色可能不会生效，字体颜色生效了...

原创 vue+element遇到的问题

用lang=“scss” 写样式，修改element的默认样式，用 ::v-deep 样式穿透<style lang="scss" scoped> ::v-deep .el-input-group__append { background-color: #5094ff; border: 1px solid #5094ff; }</style>用lang=“less” 写样式，修改element的默认样式，用 /deep.

原创 vue实际运用六：处理token过期

vue实际运用六：处理token过期1. 后端为了安全，token一般存在有效时间，当token过期，所有请求失效解决方案：1)在请求发起前拦截每个请求，判断token的有效时间是否已经过期，若已过期，则将请求挂起，先刷新token后再继续请求。优点： 在请求前拦截，能节省请求，省流量缺点： 需要后端额外提供一个token过期时间的字段；使用了本地时间判断，若本地时间被篡改，特别是本地时间比服务器时间慢时，拦截会失败使用方法：axios.interceptors.request.use() 这

原创 vue实际运用五：不需要响应式的数据的处理

不需要响应式的数据的处理在我们的Vue开发中，会有一些数据，从始至终都未曾改变过，这种死数据，既然不改变，那也就不需要对他做响应式处理了，不然只会做一些无用功消耗性能，比如一些写死的下拉框，写死的表格数据，这些数据量大的死数据，如果都进行响应式处理，那会消耗大量性能。// 方法一：将数据定义在data之外data () { this.list1 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx } this.list2 = { xxxxxxxxxxxxxxxx

原创 Vue实际运用四：递归组件-做树状菜单列表

递归组件使用场景：Vue的递归组件，组件递归自身实现无限制层级的渲染，适合树状菜单1.创建Tree.vue文件，作为组件树的入口文件，类似于App.vue，一些数据data会在Tree.vue进行一些初始化的操作。<template> <div> //通过自定义属性传递 数据给子组件 <TreeMenu :label="treeList.label" :nodes="treeList.nodes"></TreeMenu&gt

原创 Vue实际运用三：vuex持久化

vuex持久化vuex：刷新浏览器，vuex中的state会重新变为初始状态解决办法：使用vuex-persistedstate插件安装 npm i -S vuex-persistedstate引入及配置：在store下的index.js中import Vue from 'vue'import Vuex from 'vuex'//引入import persistedState from 'vuex-persistedstate'Vue.use(Vuex)export de

原创 实际技能二：常用的校验

/** * @param {string} path 判断字符串是否是https?:|mailto:|tal: 开头的 * @returns {Boolean} */export function isExternal(path) { return /^(https?:|mailto:|tel:)/.test(path)} /** * @param {string} str //检验字符串是否是 admin editor * @returns {Boolean} */expo

原创 Vue实际运用二：前后端配合-控制权限 addRoute()

控制权限菜单权限控制（菜单中的页面是否能被访问）按键、请求等具体操作的权限控制菜单的权限控制需求：只显示当前用户能访问的权限内菜单，如果用户通过URL进行强制访问，则会直接进入404基本流程：获取用户权限并存储——>根据用户权限选择性渲染菜单1. 创建路由表公共路由：登录、维护等页面写到默认的路由中动态路由（权限控制）：需要权限的页面写到一个变量或者一个文件中重定向路由：404一定要写在最后//router/index.jsimport Vue from 'vu

原创 vue实际运用一：element+前端简单控制权限

前端简单控制权限vue+element的NavMenu 导航菜单在hove组件中，左边是NavMenu 导航菜单，右边是对应组件1. 路由配置{ path: '/hove', name: 'Hove', component: ()=>import('../views/Hove.vue'), redirect: '/hove/person', children:[{ path: 'person', name: 'Perso