qq_41287158的博客

vue vue-awesome-swiper 视频与图片混合自动轮播 视频播放完后自动切换下一个

vue 父组件监听子组件的数据变化 父组件监听子组件的data

使用自定义字体包太大导致加载太慢解决办法 用font-spider字蛛解决自定义字体包太大的问题

在开发中，遇到这样一个需求。由于我们的照片是要下发到设备上，而我们的设备只支持jpg格式的图片。那么我们不能限制用户只选择jpg图片进行上传，这样用户体验极差。解决方案：用canvas转换图片的格式1、把转换的方法单独放在imgTypeChange.js中imgTypeChange.js文件// 把image 转换为 canvas对象function imgToCanvas(image) { let canvas = document.createElement("canvas"); c

问题：当我们对el-table的某一列进行判断显示隐藏时，就会出现列位置和表头样式错乱的问题我们通常的写法（会错乱的写法）<el-table-column label="test" v-if="active !== '2'" > </el-table-column>修正后的写法（不会错乱的写法）<el-table-column label="test" :key="Math.random()" v-if="active !== '2'" > </el-ta

背景：最近在项目中有这样一个场景,当用户点击“导出”时，需要把当前页面的数据分析导出成一张图，并且直接下载到本地。（当前页面包含有echarts图）1、安装依赖包 html2canvasnpm i -S html2canvas2、在需要使用导出的页面导入 html2canvasimport html2canvas from "html2canvas";<div class="export-btn" @click.stop.once ="exportClick">

执行顺序如下图：

效果图br换行可以使用v-html<p v-html="info"></p>data() { return { activeName: 'first', info: '1、优化批量上传图片<br/>2、优化时间' } },\n 换行 <p style="white-space: pre-wrap;">{{ info }}</p> data() { return { info:

最近有这样一个需求，一个弹框中有一个tabs切换且tab标签是动态的，每个tab中有一个表格和一个分页。那我们需要怎么做表格内容和分页互不影响呢？（效果如下）接下来就讲讲具体的实现：思路：1. 获取到tabs标签列表 例如：parkingList2. 在parkingList中添加page（分页）、allList（表格内容）3. 用一个currentPark装当前选中的tab <el-tabs v-model="activeName" @tab-click="handClick"&gt

<template> <div class="number-grow-warp"> <span ref="numberGrow" :data-time="time" :class="{ 'number-grow': isShowClass }" >{{ value }}</span > </div></template><script>expor

安装dplayernpm install dplayer --save安装flv.jsnpm install flv.js --save在页面中引入dplayerindex.html<script src="https://cdn.bootcss.com/flv.js/1.5.0/flv.min.js"></script> <div id="dplayer"></div> import DPlayer from 'dplayer liv.

第一种方法：定时刷新tokenimport { calcDate } from '@/util/date.js'import { getStore } from '@/util/store.js'created() { //实时检测刷新token this.refreshToken() }, methods: { // 方法 refreshToken() { this.refreshTime = setInterval(() => { c.

vue刷新页面 刷新页面的三种方法在项目中又刷新整个页面的需求，所以我们来谈谈刷新页面的方法，有两种常见的方法，还有一种不常见但是极力推荐的。第一种this.$router.go(0)第二种location. reload()这两种和Ctrl+r 、F5效果一样，是重新加载整个页面，会出现一瞬间白屏的效果，用户体验不好，所以不推荐使用第三种（推荐），通过provide / inject 的方式，具体方法如下App.vue 文件<template> <d

vue + axios + element-ui 实现全局Loading(部分接口不要loading，多个请求合并一个loading)

vue 通过IP地址解析省市 前端通过后台返回的ip地址解析得到地址我使用的是太平洋的请求地址：http://whois.pconline.com.cn/ipJson.jsp?ip=182.140.44.44&json=true // 182.140.44.44 是自己要解析的IP地址因为存在跨域的问题，所以后端转成了我们的域名访问// ip 传入需要解析的ip即可export const ipAnalysis = ip => request({ url: baseI

难免有些情况是需要修改node_modules中的包的，直接放解决办法第一步、安装patch-packagenpm install patch-package --save-dev第二步、在 package.json 文件中的 scripts 中加入 “postinstall”: “patch-package”，这里必须手动加入。 "postinstall": "patch-package"第三步、修改需要修改的node_modules中的包，例如：第四步、手动执行命令创建 npx pa

封装axios form-data 针对统一的formData入参方式1. 在axios中，设置请求头的content-type config.headers.post['Content-Type'] = 'multipart/form-data'2. 封装请求//* 封装post请求export function post(url, data = {}) { return new Promise((resolve, reject) => { axios({ url, met

1. 安装插件 npm install jwt-decode --save2. 在需要使用的地方引入 import jwtDecode from 'jwt-decode' const code = jwtDecode(res.data.data.accessToken) console.log(code)// 就可以解析成功了 3.例子：

vue vue-cli3.0中引入JQuery安装JQuery npm i jquery -S在vue.config.js中，加入如下代码 const webpack = require('webpack') configureWebpack: config => { plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'win

element-ui el-table 鼠标移入滚动条出现 移出表格滚动条隐藏使用el-table的两个事件cell-mouse-leave // 当单元格 hover 退出时会触发该事件cell-mouse-enter // 当单元格 hover 进入时会触发该事件我这里用到了jQuery(不会引入的可以去搜一下)<el-table height='500' :data="userList" style="width: 100%" :header-cell

第一步、npm install babel-plugin-transform-remove-console --save-dev第二步、配置babel.config.js文件（第一种则是无论是开发阶段还是发布阶段都会把console移除）第二种：我们只希望在项目发布的阶段移除掉console，测试和开发阶段不需要移除console...