![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
瑕、疵
前端小白 可接任务 app 小程序 桌面应用 三维 gis 爬虫
展开
-
css 子元素 圆 均匀分布 展开动画
scss 实现 圆均匀分布 展开动画原创 2024-05-10 09:42:14 · 706 阅读 · 0 评论 -
vue3 ts axios 请求封装 取消请求 失败重发 权限控制
用了 TypeScript 进行全面支持,针对前后端交互常见问题进行了细致的处理,包括将 token 添加至请求头、增加超时请求重试、添加请求取消功能等等。此外,该工具还提供了统一的异常处理机制,对于常见的网络连接不稳定、请求超时等异常情况,能够快速准确地进行处理。使用该工具,可以提高代码质量和可维护性。原创 2023-05-09 09:19:38 · 746 阅读 · 1 评论 -
vue 前端 js 实现预览word文档需求 docx-preview
vue 前端 js 实现预览word文档需求 docx-preview原创 2022-08-05 13:55:00 · 4273 阅读 · 1 评论 -
vue3 router-view keep-alive Suspense transition 共同使用
vue3 解决 Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.router-view keep-alive Suspense transition原创 2022-07-27 17:57:31 · 1335 阅读 · 0 评论 -
解决 vue3 ts ‘defineProps‘ is not defined
vue3 'defineProps' is not defined原创 2022-07-13 10:24:58 · 1362 阅读 · 0 评论 -
Points three vue3 typescript 渐变色粒子点云
粒子渐变色 需要材质颜色 和 BufferGeometry.colors的配合使用设置颜色的时候 大概需要调整到图上这个颜色拾取器的位置上<template> <div> <div class="main" ref="box" style=" height: 100vh; display: flex; align-items: center; justify-content: center;原创 2022-05-19 17:51:50 · 605 阅读 · 2 评论 -
points three vue3 typescript 点云 粒子系统颜色控制
three 粒子系统自定义每个粒子的颜色 记得缩小了看<template> <div> <div class="main" ref="box" style=" height: 100vh; display: flex; align-items: center; justify-content: center; align-content: center; ">原创 2022-05-19 15:52:54 · 282 阅读 · 0 评论 -
vue3 three ts 全景图
three vue3 ts 全景图实现原创 2022-04-07 10:30:38 · 1418 阅读 · 0 评论 -
vue3 ts three 动画 骨骼动画 人物动画 模型动画
vue3 ts three 动画 骨骼动画 人物动画原创 2022-03-24 17:23:22 · 2187 阅读 · 0 评论 -
html 转 file 文件 vue 模块 图片水印
将html转换图片添加水印后成file文件上传需要装html2canvas npm install html2canvas -s新建一个文件 用来进行相关操作//@description: dom 转 canvas 转 file //引入dom转canvas 库import html2canvas from 'html2canvas';//定义 异步 方法const watermark = async (e) => { //获取传入或默认dom let dom= e||docu原创 2022-01-12 08:24:03 · 337 阅读 · 0 评论 -
uni uni.request() 无法发送 formData 表单数据 文件 解决办法
uni uni.request() 无法发送 formData 表单数据 文件 解决办法原创 2022-01-08 17:30:28 · 3854 阅读 · 0 评论 -
echarts uniapp 没有dom renderjs 解决uniapp无法获取Dom
在uni-app的app和h5端,引入完整的echarts,并且提供高性能的动画。注意事项仅支持 app-vue、h5 端要求 uni-app 2.5.5+以上版本app端要求使用v3编译器过去的问题H5端流行的echart报表因为涉及大量dom操作,无法跨端使用wx-chart在跨端和更新方面都不足插件市场提供了比wx-chart更好的、全端可用的uChart。但受限于小程序架构逻辑层和视图层分离,导致的通信折损,图表的动画性能不佳。并且uchart只实现了echart的常用功能,还有一些原创 2022-01-04 09:59:25 · 4138 阅读 · 0 评论 -
uniapp echarts 不渲染 或 部分事件无法使用
uniapp echarts 不渲染 或 部分事件无法使用 解决原创 2021-12-28 18:49:08 · 996 阅读 · 0 评论 -
echarts 树图 获取各节点位置
找到node_modules-echarts-lib-echarts.js写echartsProto.getMyPosition = function(finder) { var ecModel = this._model; finder = modelUtil.parseFinder(ecModel, finder, { defaultMainType: 'series' }); var seriesModel = finder.seriesModel; console.l原创 2021-12-28 16:07:20 · 2628 阅读 · 2 评论 -
uni 动态挂载组件 工程化开发 vue
很多是类似的文件目录uni中使用路由跳转就会将pages的路径名作为路由 因此监听此时路由变化 如果需要组件则注册相关部分组件const componentsList = {//存放组件批量引入 异步引入方法 //方法进行异步引入 引入文件为批量引入的文件地址 uninterrupted: () => import('../pages/uninterrupted/pages/components/index.js')}//匹配需要异步引入的组件目录名const list = requ原创 2021-12-26 15:16:46 · 1003 阅读 · 0 评论 -
前端 断点测试 debugger
debugger 语句用于停止执行 JavaScript,并调用 (如果可用) 调试函数。使用 debugger 语句类似于在代码中设置断点。通常,你可以通过按下 F12 开启调试工具, 并在调试菜单中选择 “Console” 。注意: 如果调试工具不可用,则调试语句将无法工作。console.log(1);debuggerconsole.log(2);...原创 2021-12-23 08:49:24 · 1515 阅读 · 0 评论 -
vue vuex 缓存 数据持久化 vuex-persistedstate
vuex 存储 持久化 vuex-persistedstate原创 2021-12-17 16:54:32 · 312 阅读 · 0 评论 -
节流 后触发 vue2 uniapp
节流 后触发 vue2 uniapp原创 2021-12-15 09:55:44 · 1005 阅读 · 0 评论 -
npm run build app内没有内容 不渲染解决
npm run build app内没有内容 不渲染router文件内const router = new VueRouter({ // mode: 'history',//要注释掉否则build不渲染1 // base: process.env.BASE_URL, routes})原创 2021-12-10 10:38:34 · 541 阅读 · 0 评论 -
vue 引入没有导出的外部js文件方法 cmd amd
vue 引入支持cmd amd 的外部js文件 全局声明原创 2021-12-08 16:26:58 · 1376 阅读 · 0 评论 -
vue全局注册过滤器 自动化引入 前端过滤敏感词 vue filter 脱敏
目录结构在filters下的index.js中写如下代码import Vue from 'vue'//引入vueconst directives = require.context('../filters', true, /(?<!index)\.js$/); //实现自动化导入 文件路径,是否遍历子目录,正则匹配directives.keys().map(item => {//在名字中遍历 const componentConfig = directives(item)//文件内原创 2021-11-16 10:12:28 · 1087 阅读 · 3 评论 -
vue 全局注册自定义指令 自动化引入 vue.directive 格式化文本
vue 全局注册自定义指令 自动化引入//注册文件directive/index.jsimport Vue from 'vue'//引入vueconst directives = require.context('../directive', true, /(?<!index)\.js$/); //实现自动化导入 文件路径,是否遍历子目录,正则匹配 (?<!index)//排除.js前跟着index的文件directives.keys().map(item => {//在关键字中遍原创 2021-11-15 11:58:46 · 930 阅读 · 0 评论 -
解决 ant 下拉框 日期选择框 跟随滚动
日期选择框:getCalendarContainer="(trigger) => trigger.parentNode"两种解决方式 不一样 不能通用选择器下拉框:getPopupContainer="(trigger) => trigger.parentNode"原创 2021-11-11 14:27:24 · 445 阅读 · 0 评论 -
vue webpack 打包配置 常用
const path = require("path");//引入path模块const resolve = dir => path.join(__dirname, dir);//path.join正确连接路径 _dirname用来动态获取当前文件所属目录的绝对路径 dir传入的路径const CompressionWebpackPlugin = require("compression-webpack-plugin");//引入gzip压缩const productionGzipExtensi原创 2021-11-09 12:12:17 · 785 阅读 · 0 评论 -
前端开发 首页超清大图缓存 避免每一次打开网页时加载图片卡顿 和出现白屏现象
一个项目 需求是用户想要首页放超清大图 但是每次打开都需要加载很久 所以第一次加载时将用户首页图片缓存起来 下一次在进入时就不会卡顿了js代码 if (localStorage.getItem(bgImg)) { this.bgImg = window.URL.createObjectURL(new Blob([res.data])); } else { this.bgImg = require("../assets/img/bgImg.jpg"); a原创 2021-11-09 10:11:21 · 1047 阅读 · 0 评论 -
vue 网页微信扫码登陆 前端 全
引入位置在public>index.html文件内 <script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script> <!-->api地址、部署地址、引入地址如果都用https则都用https 如果用http都用http<!--><div id="login_container">这里的id等会要用</div>原创 2021-10-28 12:02:39 · 491 阅读 · 0 评论 -
ant vue 树形结构被选中数据数量统计
需求 树形结构展示数据 且数据可被选中 在数据后显示选中数量测试数据[ { "title": "测试", "key": 6, "children": [ { "title": "测试测试", "key": "6-1", "children": [ {原创 2021-10-20 11:23:08 · 737 阅读 · 0 评论 -
二维 级联多选框 全 写的太乱 一塌糊涂 ant
实现二维数组的级联选择 选子节点 父节点也被选中 选父节点子节点全部被选中如果子节点是选中状态 点击父节点 则取消选择如果父节点是选中状态取消最后一个子节点将取消父节点选择<template> <div class="main"> <div class="main_right"> <!-- 选择器 --> <table border="1"> <tr v-for原创 2021-10-11 18:38:51 · 142 阅读 · 0 评论 -
ant 主题色
vue 官方地址 https://cli.vuejs.org/zh/guide/css.html#%E5%90%91%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8-loader-%E4%BC%A0%E9%80%92%E9%80%89%E9%A1%B9ant 地址https://www.antdv.com/docs/vue/customize-theme-cn/vue 的main.js 中更改 import ‘ant-design-vue/dist/antd.css’; 为原创 2021-10-11 11:32:58 · 190 阅读 · 0 评论 -
vue批量挂载
import Vue from 'vue'const requireComponent = require.context('../components', true, /\.vue$/);requireComponent.keys().forEach(fileName => { // 获取组件配置 const componentConfig = requireComponent(fileName); // 剥去文件名开头的 `./` 和`.vue`结尾的扩展名 c原创 2021-10-10 15:00:44 · 165 阅读 · 0 评论 -
vue.config.js css loaderOptions的用处
css: { loaderOptions: { less: { modifyVars: { "primary-color": "#6EBF89",//全局变量 可以快速更改样式 //直接在less文件中@primary-color使用 "border-color-base": "#dddddd", "border-radius-base": "5px" }, .原创 2021-10-10 14:25:50 · 4908 阅读 · 0 评论 -
前端 接收到文件,利用a标签下载
首先获取到文件export const convertRes2Blob = (data, name = '导出数据', suffix = 'xlsx') => { const filename = name + '.' + suffix //文件名加后缀名 let url = window.URL.createObjectURL(new Blob([data])) //将文件处理成url let link = document.createElement("a") //创建a标签 l原创 2021-08-02 17:47:19 · 241 阅读 · 0 评论 -
vue 页面缓存 keepAlive全步骤
keep-alive将页面缓存起来,在切换router时不进行销毁,首先找打router-view入口 用keep-alive将其包裹 include为白名单(即缓存白名单,需要被渲染的)这里传入的是数组,exclude:黑名单(不会被缓存),max缓存最大数量(缓存淘汰策略,见文:https://blog.csdn.net/fdl123456/article/details/97623208),传入都是数组,数组内容为每一个router-view页面的name不是路由的name,被缓存成功的会有两个原创 2021-08-06 18:06:55 · 232 阅读 · 0 评论 -
vant SwipeCell 不渲染
引入不止引入"van-swipe-cell": "@vant/weapp/swipe-cell/index" "van-cell-group": "@vant/weapp/cell-group/index", "van-cell": "@vant/weapp/cell/index"都需要引入没样式wxss写.van-swipe-cell__left,.van-swipe-cell__right { display: inline-block; width: 65rpx; hei原创 2021-08-10 17:36:41 · 426 阅读 · 0 评论 -
echarts宽度100% 却成了100px echarts大小不对
echarts宽度100% 却成了100px因为v-show 或者 父元素有display:none 属性导致 echarts 大小不对可以通过窗口监听 调用echarts的resize()方法或者将v-show换成v-if 或者将display:非none原创 2021-09-16 15:00:54 · 661 阅读 · 0 评论 -
接收后台传的图片验证码
接收后台传的图片验证码需要在接口里加responseType: ‘arraybuffer’ let url=window.URL.createObjectURL (new Blob([res.data]));此时就可以将url渲染到img的src上原创 2021-07-21 17:28:37 · 150 阅读 · 0 评论 -
oss文件上传 文件存储 vue
oss 文件存储 前端 根据后端返回字段进行文件存储原创 2021-09-24 16:23:16 · 388 阅读 · 0 评论 -
echarts 动态改变大小
echarts 动态改变大小//监听window大小改变 window.onresize = () => { this.echarts.resize(); //实例化的echarts对象调用resize方法 };原创 2021-09-23 10:14:14 · 455 阅读 · 0 评论 -
实现网页打印 print.js
引入printhttps://github.com/denghao123/Print.jsmain.js中import Print from './utils/print; Vue.use(Print)'也可以复制以下代码// 打印类属性、方法定义/* eslint-disable */const Print = function (dom, options) { if (!(this instanceof Print)) return new Print(dom, options);原创 2021-09-22 19:05:11 · 411 阅读 · 0 评论 -
ant 日历实现每一个日期不同格式的自定义渲染 且实现右键点击获取数据
需求 ant 自定义渲染表头 通过表头切换月份 同时保证年份正确//onTypeChange 暂时没有用到//$moment需要提前挂载原型链 main.js中 headerRender({ value, onChange, onTypeChange }) { const start = 0; const end = 12; const monthOptions = []; const current = value.clone();原创 2021-09-22 18:55:00 · 1460 阅读 · 0 评论