- 博客(170)
- 资源 (20)
- 收藏
- 关注
RSS订阅原创 vue 引入字体图标显示方块
问题现象：使用element-ui，字体图表显示“方块”。项目加载后，看加载文件，并没有.woff或.woff2或.ttf等字体图标文件。也没有字体图表转换后的base64，文件。环境；webpack4，vue2有问题的代码：webpack.base.conf.js: module: { rules: [ { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, u
2021-11-26 10:29:07
1596
1
原创 Vue3 创建项目遇到的问题汇总
1.Uncaught SyntaxError:2. ` Uncaught Error: Catch all routes ("*") must now be defined using a param with a custom regexp.3 typeError: : Failed to fetch dynamically imported module;net::ERR_ABORTED 404;5JavaScript Uncaught RangeError: Maximum call stack
2021-09-01 08:44:33
17378
原创 Vue3 + vite + ts 项目搭建
Vue3 项目搭建1. 环境准备：vue 版本由2.9.6 升级到4.x使用npm update -g @vue/cli 没有用，未升级成功。npm install -g @vue/cli2. 创建項目（vite）：在网上看到有如下三种创建方式，任选其一即可：2.1 vite-app 方式：直接一键创建vue3项目（默认创建的是JavaScript）。npm init vite-app hello-vue3 # OR yarn create vite-app hello-vue
2021-08-31 10:38:04
913
1
原创 页面无限刷新问题，解决分析问题思路整理
问题背景描述：网站在放置很久没有打开，中间没有清过缓存、cookie，再次刷新打开页面，出现无限不断重新刷新页面的问题。而清除浏览器缓存后，问题会被解决。问题解决思路：由于大家遇到的问题是各不相同，所以记录下解决问题的思路，希望对同陷问题漩涡的伙伴们有所启发。排查一：先观察页面，确定了页面是在不同重新大刷新，由此猜测，很可能是代码中有一直调用window.location.reload()导致。由此在项目中全局搜索reload()关键字，逐个分析逻辑。排查二：在开发者工具中，看netw
2021-03-07 15:12:31
12771
原创 vue-router中params和query传参用法对比梳理
通过vue-router在路由组件中传参，可以使用params和query两种方式。下文将从普通路由跳转传参、获取Url地址参数两个方向梳理两种用法。1. 获取Url地址的参数：1.1 query方式query方式传递的参数，会显式的在浏览器url地址栏显示出来url 地址格式形如：www.**.com/getName?id=km，参数用?方式拼接。（参数是"km"）// router.js 路由配置{ name: 'testComponent', path: '/test
2021-03-07 15:11:09
714
原创 跨域 [前端Vue & 后端 & nginx]方法整理
前后端交互 跨域 解决浏览器的同源策略两个 URL 的 protocol、port (如果有指定的话)和 host 都相同的话，则这两个 URL 是同源。浏览器的同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。如何允许跨源访问可以使用 CORS 来允许跨源访问。CORS 是 HTTP 的一部分，它允许服务端来指定哪些主机可以从这个服务端加载资源。具体实现方法在前后端分离项目，具
2021-02-15 15:09:37
220
原创 axios data与params 对比及@RequestBody和@RequestParam混合入参写法
axios 配置官方文档axios 中传递参数的方式有两种属性：data，params// 发送 POST 请求axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' }, params: { ID: 12345 },});// params 是即将与请求一起发送的 URL 参数// 必须是一个无格式对象(plai
2021-01-13 18:00:24
2824
原创 webstorm 配置 less 自动编译
查了一些都有点偏差，找到方法后记录下~【windows环境下】1. 在有node环境下，安装lessnpm i less -g安装后，会出现一个安装路径：C:\Users\Administrator>npm i less -gC:\Users\Administrator\AppData\Roaming\npm\lessc -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\less\bin\lessc+ less@3
2020-10-28 09:45:22
515
1
原创 echarts 半环形图
配置干货：var option = { title: { text: '30%', left: 'center', top: 'middle', textStyle: { fontSize: 28 } }, tooltip: { trigger: 'item', formatter: '{b}: {c}%' }, series: .
2020-10-14 18:46:56
2054
2
原创 echarts 百分比进度条
echarts 百分比进度条如下图两种，下面代码是第二张图的，第一个的稍加修改label值即可<div id="main" style="width: 180px;height:30px;"></div><script>var myChart = echarts.init(document.getElementById('main'));var option = { grid: { top: 5, bottom: 5,
2020-10-14 18:36:36
6094
3
原创 踩坑 ES6箭头函数 this指向问题记录
之前看es6新特性时，有个印象关于 ES6箭头函数 this指向问题的特殊性。然而并没谨记在心o(╥﹏╥)o今儿帮忙解决问题，调入此坑将近两小时不能自拔????最开始的现象只是赋值无法成功，追查到时因为无法进入组件监听所以没有update，之后发现this.data 要赋值的对象是普通的js对象，而非vue对象。vue对象形式：普通js对象：而后追查到时this指向问题。之后追查到在发request请求then的回调结果中this的指向变成了Window对象，而非vue对象。然后又傻傻地追查了好几
2020-07-27 17:34:42
344
原创 postMessage 跨域通信 iframe
需求背景：iframe嵌套页面，需要进行参数传递，同时父与子是跨域（跨源）的。核心方法：window.postMessage() 方法可以安全地实现跨源通信。otherWindow.postMessage(message, targetOrigin, [transfer]);otherWindow其他窗口的一个引用，比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames。message将要发送到其他
2020-07-15 16:13:46
564
原创 vue 动态设置 echarts 画布大小 & 更新图表数据
在筛选条件修改后，echarts的图表需要动态修改图表。动态修改echarts 画布大小监听width，height的改变，在更新图表时，使用resize()方法更新图表画布的大小const chart = echarts.init(document.getElementById(this.id)) //获取实例chart.resize({ width: this.width, height: this.height}) //调用resize方法官方文档resize()方法
2020-06-29 14:25:28
3127
原创 vue引入多个UI框架
背景本身项目里使用antdv，由于需要选择日期区间的组件，想再引入Element。引入antdv：初始化antdv$ npm i --save ant-design-vue局部引入import 'ant-design-vue/dist/antd.css'import { Button, ... DatePicker} from 'ant-design-vue'Vue.use(Button)...Vue.use(DatePicker)或全局引用也可以。可参考 官方文
2020-06-23 13:19:02
3665
1
原创 echarts多次setOption没有覆盖（清除）上一条数据
问题现象：echarts多次setOption没有覆盖原数据。初始图表没有数据，显示一个空坐标轴；第二次setOption新数据时，图表正常绘制新图；第三次setOption时，y轴数据为空，但却绘制出第二次部分数据的图表。现象依次如下面三图：解决方法：echartsInstance. clear官方文档echartsInstance. clearany清空当前实例，会移除实例中所有的组件和图表。在setOption前，先清空图表chart.clear() ，便可以解决此问题。
2020-06-15 13:18:50
6495
2
原创 vue 表格固定列，表格另一侧滑动
实现表格固定列，右半部分依旧可以互动效果，如下图：解决思路：写两个<table>：一个是整体的table，table外侧的div保持宽度固定和overflow:scroll，内部的table宽度大于外部才能滚动起来；一个是固定再左侧的table，固定的这个table内容只有固定显示的这部分，同时，position:absolute在左侧，相当于就是给那个表格盖一层；实际效...
2020-04-29 13:49:59
3803
1
原创 微信小程序WXML使用substr方法截取字符串
开发中，使用substr去截取页面数据，但是：在WXML上，直接使用{{data.substr(0, 10)}} 并没有任何作用。解决方法：创建.wxs文件，专门写对应的处理格式的方法。WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。...
2020-04-26 16:52:49
11833
2
原创 微信小程序npm引入
官方文档1. 先在工具上，勾选“npm模块”在详情–本地设置–使用npm模块同时，检查调试基础库，要使用 2.2.1 或以上npm 支持从小程序基础库版本 2.2.1 或以上、及开发者工具 1.02.1808300 或以上开始勾选后，project.config.json文件会多一行代码： "setting": { ... "nodeModules": true },...
2020-04-21 14:41:12
1512
原创 cookie的get、set方法封装 & domain、path 属性
设置cookie方法：原理：document.cookie='name=wk'注：cookie在静态页面中是空的，无法使用；必须在web服务器部署下才可以使用。/** * 设置cookie * @param name 键 * @param val 值 * @param exday 有效期（天） */function setCookie (name, val, exday) {...
2020-04-01 15:46:01
3130
原创 微信小程序换行 br 无效解决方法
在微信小程序中，不识别<br/>等标签。如果文字中想要折行显示，可以使用\n替代<br/>。注意：使用\n的时候，一定是在<text>标签内，如果在<view>标签中，\n并没有折行左右，只是显示一个空格。eg：<text class="title">欢迎\n使用</text>...
2020-02-27 11:44:47
15635
2
原创 微信小程序引入字体图标（阿里iconfont）简便方法
用阿里iconfont官方文档的unicode引用方式引入，并没有用，依旧显示的是编码。如下图右侧↓：<i class="iconfont"></i><i > </i>在小程序中，unicode码无法自动转码，所以不能使用此方式使用字体图标。微信小程序引入阿里字体图标，简便方法：在阿里ic...
2020-01-14 18:12:08
957
转载 vue和微信小程序的区别、比较
【转】vue和微信小程序的区别、比较https://segmentfault.com/a/1190000015684864写了vue项目和小程序，发现二者有许多相同之处，在此想总结一下二者的共同点和区别。一、生命周期先贴两张图：vue生命周期小程序生命周期相比之下，小程序的钩子函数要简单得多。vue的钩子函数在跳转新页面时，钩子函数都会触发，但是小程序的钩子...
2020-01-14 18:11:46
290
原创 vue axios发送post请求 network中链接有参数拼接
axios.create() 的主要参数： params: {userName:'test', password: '123'}, method: 'post'此时network中的情况如下：链接上会拼接参数：http://localhost:8888/login/login?userName=test&password=123分析原因：在使用axios.request(...
2020-01-10 17:53:44
5058
原创 html css js 大小写敏感问题
以下均在非严格模式下测试总结的：html标签(如img)、属性名(如class) 均会自动在浏览器转化为小写，对大小写不敏感。<IMg Class="Ab" src="A.png">属性值区分大小写，对大小敏感。如 Class="Ab" ，若在css中写ab{ } 的样式，并不会匹配生效。属性src的值，浏览器不会自动转换，但读取文件时对大小写不敏感。...
2020-01-10 14:14:55
2509
1
原创 小程序 request 报错，不在以下 request 合法域名列表中
报错：VM26:1 http://*** 不在以下 request 合法域名列表中，请参考文档：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html解决：【开发环境】若此时只是在开发环境，也并没有一个ICP备案的域名。此时，解决方案是对微信开发者工具进行设置。设置路径：【设置 -...
2020-01-10 09:17:35
1601
原创 CSS 滚动条样式【兼容chrome、Firefox、IE】
css滚动条样式，windows系统下，滚动条比较丑，以下分别是chrome、Firefox、IE5.5+三大浏览器的改写方法。Chrome：原理：通过-webkit相关属性直接可以灵活控制滚动条样式。::-webkit-scrollbar { /* 滚动条宽 */ width: 6px; height: 4px;}::-webkit-scrollbar-thumb { /* 滚...
2019-11-18 16:57:23
6236
2
原创 vue2项目IE11无法打开问题
问题1： vue2项目在ie11上打开，一片空白。`npm install --save babel-polyfill`问题2：引入babel-polyfill后，页面显示，但无法跳转页面。也看不到报错。增加`, resolve('node_modules/ant-design-vue')`
2019-11-18 15:55:10
1160
原创 vue 多个路由对应同一组件多次调用，页面未刷新问题
问题现象：有三个菜单，只是参数不同，但使用的同一个组件页面，配置路由时指向了不同三个路由。但切换菜单时，页面不再刷新。查了些资料，整理解决方案如下，欢迎纠错补充~页面不刷新的原因：响应路由参数的变化提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组...
2019-10-31 17:37:11
6796
1
原创 echarts常用总结
无横纵坐标xAxis: { // show: false // 此方式，在区域小时，图就不显示了 axisTick:{show: false}, axisLine:{show: false}, axisLabel:{show: false}, splitLine:{show: false},},yAxis: { // show: false...
2019-09-23 18:49:04
201
原创 element dialog 打开关闭弹窗组件的方式（父子组件传值）
背景：将弹窗写在另一个的组件，打开弹窗，关闭时会报错。报错原因：因为打开弹框的状态值isShowCompleteApprova 是父组件传递给子组件的，而vue规定子组件不能直接修改子组件的值，所以报错如上。附报错源代码：父组件：// 父组件<template> <div @click="handleCompleteApprova" >finish&l...
2019-09-22 17:19:29
6418
4
原创 vue 使用echarts
1. 安装npm install echarts --save2. 使用2.1 全局引入在main.js中引入：import echarts from 'echarts'Vue.prototype.$echarts = echarts在具体业务vue中使用：<template> <div style="width: 500px;height: 1000px" ...
2019-09-22 14:54:09
199
原创 elementUI vue 遇到的问题
使用<el-table> 遇到报错：Invalid prop: type check failed for prop "data". Expected Array, got Function解决方法：在声明data()，中给数组一个默认值。<template> <el-table :data="approvalList"...
2019-09-20 11:12:56
295
原创 vue onerror 用法
在img标签上使用:onerror后面跟着onerror的图片路径变量defaultImg；在data中，定义图片路径，写法为：defaultImg: 'this.src="' + require('../../assets/img/default.jpg') + '"'完整代码如下：<template> <img :src="picUrl(commentItem.ph...
2019-09-12 09:43:12
3426
原创 CSS常用函数整理
1. 计算 calc()这个感觉是最常用也最实用的的一个方法。这个函数，可用在如，左右布局，一边宽度固定，另一边撑开左右宽的情景。calc() 函数用于动态计算长度值。calc(数学表达式)如：width:calc(100% - 20px);<style> .calc{ font-size: 10vw; overflow: hidden; ...
2019-09-11 13:39:25
867
原创 vue引入外部js（cdn）文件
需求背景：在项目中，希望引入阿里播放器插件。实现：index.html: <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.8.1/aliplayer-min.js"></script>main.js:const Alipla...
2019-08-30 14:26:51
4864
1
原创 Html5调手机拍照 & 相册
使用input标签的capture属性即可实现：调手机拍照：<input type="file" accept="image/*" capture="camera">调手机摄像：<input type="file" accept="video/*" capture="camcorder">调手机录音：<input type="file" accept="...
2019-08-26 16:05:38
520
原创 git push报错 emote: error: GH007
报错信息：Pushing to https://github.com/***.git POST git-receive-pack (1288 bytes) remote: error: GH007: Your push would publish a private email address. remote: You can make your email public or disable ...
2019-08-12 15:55:03
1447
原创 Vue学习笔记_新手报错整理
报错：vue.js:634 [Vue warn]: Property or method "w" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based ...
2019-08-12 14:11:36
2448
jQuery插件-下拉选择输入框.zip
2019-07-23
art-template 常用功能
2019-04-18
idea的mybatis插件（MAC通用）
2018-06-26
IE8 placeholder 兼容使用插件（可兼容password类型input）
2017-10-11
使用bootstrap和jQuery制作下拉输入框
2016-12-21
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人