qq_38090109的博客

原创 vscode用户代码片段，快速生成vue片段

打开vscode, 配置-首选项-用户代码片段，选择代码片段文件或创建代码片段，选择或新建vue.json打开vscode, 文件-首选项-用户代码片段，选择代码片段文件或创建代码片段，选择或新建vue.json打开vscode, 文件-首选项-用户代码片段，选择代码片段文件或创建代码片段，选择或新建vue.json打开vscode, 文件-首选项-用户代码片段，选择代码片段文件或创建代码片段，选择或新建vue.json...

原创 相对时间处理（Dayjs插件）

1. 安装包npm i dayjs2. 封装模块date-time.js文件中：// 提供用来处理日期时间的工具模块import dayjs from 'dayjs'// 引入中文语言包import 'dayjs/locale/zh-cn'// 引入插件 dayjs/plugin/relativeTime// 在你npm i daysj时，插件已经下载了。// 具备计算相对时间的功能import rTime from 'dayjs/plugin/relativeTime'//

原创 JS最大安全数值

一. 奇怪现象：- 原始数据 "id": 1244088406116401152- 预览后数据 "id": 1244088406116401200- 我们使用的axios获取数据，默认会使用 JSON.parse() 进行转换，说明我们在代码中会遇到和开发者工具中看到的一样的现象。- 总结：使用 JSON.parse()转换数据ID会有问题。二. 问题原因：- 在javascript中如果数字的值太大了，在转换json对象的时候，在进行运算的时候，会有误差。- 换句话说：数值太大不安全，

原创 vscode代码片段设置

第一步：第二步：第三步：第四步：

原创 富文本vue-quill-editor

地址: https://www.npmjs.com/package/vue-quill-editor.使用步骤安装：`npm install vue-q局部注册：// 导入样式import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import 'quill/dist/quill.bubble.css'// 导入组件import { quillEditor } from 'vue-quill-edi

原创 base64转blob

function base64ToBlob(code) { let parts = code.split(";base64,"); let contentType = parts[0].split(":")[1]; let raw = window.atob(parts[1]); let rawLength = raw.length; let uInt8Array = new Uint8Array(rawLength); for (let i = 0; i < rawLen

原创 使用百度地图

export const baiduMap = function() { return new Promise(function(resolve, reject) { window.init = function() { resolve(window.BMap); }; var script = document.createElement("script"); script.type = "text/javascript"; script.src =

原创 图片全屏展示

// 全屏position: absolute; top: 0; left: 0; // 让高度和宽度直接继承窗口的大小 width: 100%; height: 100%; background: url("../assets/login_bg.jpg") no-repeat center/ cover;

原创 使用html2canvas生成图片

安装npm i html2canvas页面中使用<template> <div class="qrcode" id="qrcode"> <img :src="addressQRCode" alt id="codeImg" /> </div> <div class="saveQrcode" @click="uploadQrcode">保存二维码</div></template>&lt.

原创 输入框限制通用方法

tool.js文件中// point 小数点位数export function inputLimit(e, point) { if (point > 0) { //小数 ^(\-)*(\d+)\.(\d{1,3}).*$ e.target.value = e.target.value.replace(/[^\d.]/g, "") //清除“数字”和“.”以外的字符 .replace(/^\./g, "") //验证第一个字符是数字 .replace(/\..

原创 预览图片插件viewer的使用

1.安装npm install v-viewer2 引入(main.js文件中)import Vue from 'vue';import Viewer from 'v-viewer'import 'viewerjs/dist/viewer.css'Vue.use(Viewer)// 对viewerjs进行修改全局默认配置项目Viewer.setDefaults({ Options: { 'inline': true, 'button': true, 'navbar': true, 't

原创 Vue插件vxe-table实现树形表格

1.main文件中import 'xe-utils';import VXETable from 'vxe-table';import 'vxe-table/lib/style.css'Vue.use(VXETable);页面中使用可参考 https://www.jianshu.com/p/f131a1985282.

原创 上传图片组件的封装

1.图片上传组件<template> <div style="display: inline-block;margin-bottom: 24px;position: relative"> <input style="opacity: 0;width: 0;height: 0;position: absolute;" type="file" accept="image/png, image/jpg, image/jpeg"

原创 Vue-Cli4.x项目通过electron打包桌面应用程序

https://blog.csdn.net/zzw1248001691/article/details/106204256/.

原创 vue中this.$set的使用

this.$set(obj, key, value)用途：为data中的某一个对象添加一个属性<template> <div> <Button @click="setMessage" type="primary">添加属性</Button> {{ student.name }} <input type="text" v-model="student.age"> </div></template

原创 ajax处理token非法或失效

链接: https://blog.csdn.net/Lclghjk/article/details/109029992?utm_medium=distribute.pc_category.none-task-blog-hot-7.nonecase&depth_1-utm_source=distribute.pc_category.none-task-blog-hot-7.nonecase&request_id=.

原创 解决vue项目路由出现message: “Navigating to current location (XXX) is not allowed“的问题

原因：在路由中添加了相同的路由。解决方案：重写路由的push方法在src/router/index.js 里面import Router from 'vue-router’下面写入下面方法即可const routerPush = Router.prototype.pushRouter.prototype.push = function push(location) { return routerPush.call(this, location).catch(error=> error)}

原创 根据token判断时候可以直接打开首页

有token，说明是登录状态，可以直接打开首页；无token, 说明是未登录状态，打开i首页后又立马跳转回登录页面

原创 Vue: 单页面应用如何保持登录状态

https://www.xiabingbao.com/post/vue/vue-keep-logininfo.html

原创 vue视频播放器

vue-video-playe插件1. 安装2. 在main.js入口文件中引入3. 在页面中引用4. 配置数据5. 效果图1. 安装npm install vuevue-video-player --save2. 在main.js入口文件中引入import "videojs-contrib-hls";import VideoPlayer from "vue-video-player";require("video.js/dist/video-js.css");require("vue-v

原创 vue+vant上拉刷新与下拉加载功能的实现

<template> ...... <div class="main"> <van-pull-refresh v-model="isLoading" @refresh="onRefresh" > <van-list v-model="loading" :finished="finished" finis

原创 vue+vant实现图片或者视频的上传

<template> <div> <van-uploader v-model="imgList" :before-read="beforeRead" accept="image/*, video/*" /> </div></template><script>export default { data() { return { imgList: [] }; }, metho

原创 在vue中根据条件给一个标签绑定不同的class

原创 复制功能的实现

tool.jsimport Clipboard from "clipboard";// 复制export function toCopy(name) { var clipboard = new Clipboard(name); clipboard.on("success", () => { window.newVue.$toast("复制成功！") clipboard.destroy(); }); clipboard.on("error", () => .

原创 点击下载按钮下载图片到本地

原创 Vue中iview的导航栏刷新状态保持不变的解决办法

iview的Menu 导航菜单中active-name为激活的name值。要想刷新不变，可以设置:active-name="$route.path，还有每个MenuItem 的name值等于to的值就行。这样就可以实现刷新保持状态不变。

原创 关于VUE项目中报Error: Avoided redundant navigation to current location: 的错

router文件夹下面的index.js中加上下面几句代码const originalPush = Router.prototype.pushRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err)}

原创 如何在父组件中去覆盖子组件中样式?

如果一定要父组件中去覆盖子组件（第三方的）的样式：方法一： 不要写成scoped. 此时，样式就是全局的。方法二： 在保持scoped的情况下，还可以使用 /deep/。为什么用了scoped之后，不能覆盖子组件的样式？因为scoped会在选择器最后加data-v-xxxxxxx这属性名，所以无法选中子组件的样式。为什么用了/deep/之后，就可以覆盖子组件的样式？.index{ padding-top:50px; /deep/ .van-tabs__wrap {

原创 es6模块化

1.引入历史上，javascript作为一门解释型的弱类型语言一直不被人看重。其中有很一个很重要的因素是它没有模块体系。模块体系说起来很高大上，其实就是一句话：它不支持在一个.js中引入另一个.js文件。例如：有两个文件：a.js，b.js// a.jsfunction f1() {}b.js// 如何去使用a.js中定义的f1?这个问题在其它很多编程语言中都不是问题，例如java,php,c,c++,python… 。在es6出来之前，解决这个问题很痛苦，有如下两种曲线救国的方法：

原创 使用vant组件库做移动端项目时的REM适配方法

移动端项目，它需要去适配不同的手机屏幕。我们希望实现适配的效果是：与屏幕大小相关。以按钮为例：在大屏手机，按钮的宽高都大些，在小屏手机上尺寸小些。技术手段：把所有px单位改成rem根据不同的手机屏幕的宽度，来动态设置rem的参考值：html标签上的font-size的大小。地址Vant 中的样式默认使用px作为单位，如果需要使用rem单位，推荐使用以下两个工具一起工作，来达到目标。postcss-pxtorem 是一款 postcss 插件，用于将px转化为 rem它需要设置在开发依赖

原创 开发vue项目时报错Expected indentation of 2 spaces but found 4 indent

开发vue项目时报错Expected indentation of 2 spaces but found 4 indent报错原因解决方案报错原因严格的检查缩进问题，不是报错，我们可以关闭这个检查规则解决方案找到如下的文件，添加"indent": [“off”, 2]然后重启项目npm run serve...