- 博客(31)
- 收藏
- 关注
RSS订阅
原创 前端面试题大全
vue项目性能优化方案 ：https://blog.csdn.net/qq_37939251/article/details/100031285vue路由懒加载的三种方式：https://blog.csdn.net/xm1037782843/article/details/88225104vue异步组件https://www.cnblogs.com/0520euv/p/13893823.htmlvue修饰符https://blog.csdn.net/wqliuj/article/.
2021-04-27 10:24:12
596
原创 使用VUX组件库，苹果系统升级至IOS16后样式错乱
cell-form-preview2， form-preview组件中lable宽度被拉甚至100%。IOS16 系统不支持text-align-last 属性，VUX组件库源码又长久不维护更新。
2022-11-15 12:37:54
889
1
原创 vue 角色权限控制页面，页面内的按钮。总结思路
前端创建asyncRoutes，添加meta: { auth: true },在router.beforeEach 里 router.addRoutes。后端返回有权限的menu tab button，tab，角色管理里，可以配置角色权限 权限配置用tree星控件。auth 为false时不受权限控制，都会显示。用户管理里，可以添加用户的角色，不可修改自己角色。
2022-09-28 14:37:39
601
原创 微信公众号内下载pdf等文件，受微信所限制，安卓和IOS不同处理方式（最最最优版）
后觉得还有更好的解决办法，这次真的找到更加优化版本，一定需要后台配合才行：后台接口返回文件流，不用判断安卓还是IOS，统一前端点击按钮使用form表单提交，安卓会自动弹出默认浏览器引导，IOS会弹出下载窗口。这个应该是最优版本。这里有个知识点，form表单提交，method=‘get’请求 action 无法携带?method=“post’可以携带。
2022-09-16 17:16:09
4021
3
原创 微信公众号内下载pdf等文件，受微信所限制，安卓和IOS不同处理方式
安卓用户，手动点击右上角打开其他浏览器。_loadFile是使用pdf.js 预览pdf文件的，会在下个文章写，当然如果页面是空白也可以，或者是一段友好的提醒文字也可以。IOS手机可以直接下载文件，但是需要后端设置Content-Disposition和Content-Type。PopUp组件是引导层，引导用户点击右上角打开其他默认浏览器，代码就不贴这里了，每个公司都有每个公司的风格。安卓手机只能打开其他浏览器下载，（别问我怎么知道的，试出来的结果），所以跳转至中专页，让在默认浏览器打开。
2022-09-06 18:12:44
6393
原创 前端vue2.6升级至vue2.7后如何使用旧版本vue-router与vuex，并且修改vuex
vue2.6项目升级至vue2.7遇到的问题解决办法
2022-08-15 15:43:35
4083
1
原创 使用cnpm yarn下载依赖后，pdfjs-dist包报错
最近拉了项目使用cnpm i下载依赖的时候遇到了一一个坑，下载成功后， npm run serve 启动服务时，一直报一个错误错误是说pdfjs-dist插件使用了最新ES10语法可选链操作，网上搜索了一下，说需要安装加载器babel（搜索链接：https://www.cnblogs.com/shengwu/p/15235189.html）但是其他伙伴上都能正常运行，为什么我的就要下载babel，所以我怀疑可能是我的pdfjs-dist包版本比他们的高，我下载的包里出现了可选链，而他们的没有，于是我.
2021-10-21 11:46:08
2372
原创 vue 文件转base64方法 && base64转blob路径方法 && a链接下载文件 && form表单下载文件
getBase64(file) { return new Promise((resolve, reject) => { let reader = new FileReader(); let fileResult = ""; reader.readAsDataURL(file); reader.onload = () => { fileResult = reader....
2021-07-30 10:48:17
3388
原创 input输入框控制禁止输入空格，控制只能输入数字
原生标签与UI框架都可以使用禁止输入空格（v-model.trim 只能禁止左右两旁空格）<input type="text" oninput="value=value.replace(/\s*/g,'')"><el-input type="text" v-model='text' oninput="value=value.replace(/\s*/g,'')">只能输入数字<input type="text" oninput="value=value.replac
2021-07-30 10:20:14
1011
原创 使用echarts当数据为空时展示空状态占位图
在开发echarts的时候我们不得不考虑数据为空的情况，其实有很多种解决办法，我自己是这样做的，有更好的办法请私信我，共同学习。大概长这样：创建你的utils:export const setNotopt = (demo,subtext = '暂无数据')=> { var option = { title: { text: ' {a|}', x: 'center', y: 'center',
2021-06-30 16:07:03
6601
3
原创 vue路由懒加载与异步组件
路由懒加载一、定义：延迟加载或按需加载，在需要的时候的时候进行加载二、作用：首屏组件加载速度更快三、方案：首先这是未使用懒加载的代码：import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'Vue.use(Router)export default new Router({ routes: [ { path: '/',
2021-04-28 17:13:26
381
原创 @antv/x6在react中画人物关系图，用group画群组框
cnpm install @antv/x6 --save复制代码import React, { Component } from 'react'import { Graph, Node, Point } from '@antv/x6'class antv extends Component { constructor(props){ super(props); } componentDidMount() { Graph.registerNo.
2021-04-20 11:44:11
2803
2
原创 antv/g2在react中画柱状图，条形图与饼图
cnpm install @antv/g2 --save复制代码：import React, { Component } from 'react'import { Chart } from '@antv/g2';class Hello extends Component { constructor(props){ super(props); this.state = { data: [ { name: '.
2021-04-20 11:41:20
1574
1
原创 vis-network添加节点以外的任何图形（canvas）
包括自定义节点形状宽高内容，自定义提示框位置大小，自定义虚线框等，网上这方面需求内容较少，有问题私聊我，一起讨论，外链都用了cdn链接，复制粘贴即可运行<!-- * @Descripttion: * @version: * @Author: lzy * @Date: 2021-04-13 16:25:15 * @LastEditors: Andy * @LastEditTime: 2021-04-15 15:53:30--><!DOCTYPE html><
2021-04-15 16:39:34
1818
4
原创 前端vis-network实现拓扑图demo
直接上demo，复制粘贴即可<!-- * @Descripttion: * @version: * @Author: lzy * @Date: 2021-04-13 15:09:27 * @LastEditors: Andy * @LastEditTime: 2021-04-13 17:17:00--><!doctype html><html><head> <title></title> <sty
2021-04-13 17:43:23
1990
原创 vue3+vite配置全局scss
首先下载scss，sass-loader，sassnpm install --save-dev sass-loadernpm install --save-dev node-sassnpm install --save-dev sass打开vite.config.ts,添加下边代码，并重启服务module.exports = { cssPreprocessOptions: { scss: { additionalData: '@import "./src/assets/
2021-04-02 17:31:35
10985
9
原创 js中的直接赋值与浅拷贝与深拷贝的区别
js中的直接赋值与浅拷贝与深拷贝的区别////////////// 直接赋值：let foo = [1,2]let bar = fooconsole.log(bar) // [1,2]bar.push(33)console.log(bar) // [1,2,33]console.log(foo) // [1,2,33]/////////////// 浅拷贝// 使用方法// 1.Object.assign() let foo = {a:1,b:2,c:[33,44]} let ba
2021-04-02 17:21:12
195
原创 canvas入门API整理及用法demo
canvas 入门API整理及用法建议新建demo.html,代码复制进去，注释都在里边<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wi
2021-04-02 17:18:46
132
原创 vue后台获取数据量确定渲染轮播图的页量
轮播图每页展示6条数据，数据量不确定。轮播图页数要随着数据量的大小来确定贴代码： <el-carousel trigger="click" :autoplay='false'> <el-carousel-item v-for="item in Math.ceil(industryList.length / 6)" :key="item"> <div class="whdja"> &l
2021-02-09 16:26:14
1029
原创 vue2和vue3两者的响应式核心原理区别
带薪摸鱼：手写一下vue2和vue3的响应式核心原理vue2：<body> <div> <input type="text" id="input"> <span id="text"></span> </div> <script> var obj = {}; Object.defineProperty(obj, 'prop', { ge
2021-02-09 16:09:47
397
原创 vue 的路由互相切换时怎么保持当前页面的滚动的距离？最新方案来了
最近一直有人私信我，反映之前的一篇文章《vue 的路由互相切换时怎么保持当前页面的滚动的距离？》存在问题，今天就贴出来新的思路，还得要自己多思考一下，拒绝CV，确保无问题。直接贴代码：<van-tabs v-model="active"> <van-tab title="标签 1"> <van-list v-model="loading1" :finished="finished1" f
2021-02-09 16:02:49
677
原创 vue3新的api ，学习vue3，记录vue3 踩过的坑之watch
在vue3 中创建动态数据的时候我们可以使用： const num = ref(1) const str = ref('foo')我们可以理解这种形式为动态数据单独管理使用监听器watch ：<!-- * @Author: lzy * @Date: 2020-09-02 15:42:47 * @FilePath: \vue3\my-vue3\src\views\login.vue--><template> <div> num3: {
2020-09-02 17:20:33
725
原创 nvm是做什么的？nvm怎么使用
nvm安装与使用1、nvm是什么nvm全名node.js version management，顾名思义是一个nodejs的版本管理工具。通过它可以安装和切换不同版本的nodejs。下面列出下载、安装及使用方法。2、下载可在点此在github上下载最新版本,本次下载安装的是windows版本。打开网址我们可以看到有两个版本：nvm-noinstall.zip：绿色免安装版，但使用时需进行配置。nvm-setup.zip：安装版，推荐使用3、安装本次演示的是安装版。1、双击安装文件 nvm-
2020-09-02 10:55:07
6568
1
原创 拖拽一侧可以改变盒子宽度或者高度，拿来即用。
使用方法：传入字段：type:非必须 类型 水平方向 level 垂直方向 vertical 默认 levelfromName：必须，唯一的值，与项目其他地方使用的值保证不一样miniMum:非必须：最小缩放宽度直接贴代码：<!-- * @Author: lzy * @Date: 2020-07-14 18:36:53 * @FilePath: \lcfc_code\lcfc_code\src\components\moveWidth\lrMove.vue 左右拉动可以改变宽.
2020-08-12 09:59:51
1308
3
原创 基于element 日历组件写了一个简单的日志
比如我们要统计过去每日做了什么，加了两个事件显示，每日是否做了什么，加了颜色，还加了气泡提示，可以自定义，我在这里写的是一个具体日期提示。换上data里的arr就可以显示出效果啦！也参考了https://blog.csdn.net/qq493820798/article/details/106858962博主的优秀文章，加了上个月下个月按钮的点击事件，话不多说，上代码吧：<!-- * @Author: lzy * @Date: 2020-08-10 18:10:31 * @Fil.
2020-08-11 18:41:16
738
原创 vue刷新页面侧边栏，保持原来位置高亮
to.fullpath 为当前进入页面的path，因为刷新后，同样也能进入路由守卫，我们在这里保存他然后回到侧边栏组件：有问题随时与我联系哦
2020-07-23 18:07:24
1433
原创 vue 的路由互相切换时怎么保持当前页面的滚动的距离？
子路由是长列表，滚动某到一个位置后，再进入其他页面，然后再点击进入页面，滚动距离消失，重新回到了顶部：首页 ，活动，我的，分别为子路由的三个页面，如果首页是新闻，刷到十几条数据后，去了我的页面，然后再返回首页新闻列表，数据回到了顶部，是不是很崩溃，我的解决：箭头指的分别记录初始位置，也就是 0，在页面内，我们上划看新闻的时候，要实时记录滚动距离，如下图所示：activated 可以简单理解为 设置keep-alive的缓存组件进入页面触发。此时的this.route,可以访问到进入页面的路由数
2020-07-23 17:58:48
828
原创 vue 同页面内的 tab切换，怎么保持各自的滚动距离？
如图所示，三个列表，你是不是也发现了，看了一个列表，去其他列表，滚动距离竟然都一样，崩溃吧，其实这个现象很容易理解：他们是一个页面啊，我们在用手指滑动的是整个页面，这就是我们的四个列表啦，此时你是不是已经知道怎么解决了？没错，我们只单独滑动当前列表，也就是这个div盒子不就好啦？有时候我们只是把东西想的过于复杂了给每个盒子设置固定高度，两行css搞定！！有问题随时联系我哦，下一篇讲，不同页面如何保持滚动距离...
2020-07-23 17:54:08
1555
4
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人