- 博客(261)
- 资源 (3)
- 问答 (1)
- 收藏
- 关注
RSS订阅
原创 便捷网站或者工具（前端）
目录一.集合众多工具的网站二.渐变色三.轮播图制作四.图片资源五.图片设计编辑六.网页设计七.Cancas学习网站八.echarts实例一.集合众多工具的网站nicetoolToolfk在线工具箱集众多实用工具为一身的网站，图片视频音频处理，各种程序辅助工具，功能很多，种类也多，也不好举例子，有兴趣自己去看，说不定有意外收获。二.渐变色...
2019-09-29 09:43:26
769
1
原创 nuxt使用keep-alive
业务场景：列表页进入详情页返回，列表页数据缓存还是进入详情页之前的样子仅有部分页面需要缓存，对需要缓存的页面进行操作大致实现过程：1.nuxt设置keep-alive，需要缓存的页面添加name属性2.通过vuex管理需要缓存的页面/组件3.需要缓存的页面在进入时判断是否刷新数据，离开进行判断是否需要缓存（滚动位置恢复看情况是否需要）....
2022-02-14 16:58:49
2017
7
原创 nuxt中使用mailchimp
mailchimp，免费电子邮件营销工具我制作的需求仅仅是在我们网站提供一个邮件订阅的功能官方文档创建账号，建立一个表单，连接自己的网站，生成代码插入到自己的网站中在vue或者其他框架中当做一个第三方插件script引入就行，nuxt默认因为没有引用的地方需要自己创建一个app.html,实际上这个代码对于我接下来的操作没有影响，不写的话也可以实现，可能在制作其他需求的地方用得到，我还是按照文档加上了<!DOCTYPE html><html {{ HTML_ATTR
2022-01-06 14:27:55
527
原创 nuxt中全局引入样式文件
使用@nuxtjs/style-resources配置nuxt.config.jsstyleResources: { scss: ['~/assets/style/main.scss'], hoistUseStatements: true,},buildModules: [ '@nuxtjs/style-resources'],
2021-12-31 16:38:07
1134
原创 nuxtjs-i18n + element 国际化
nuxtjs-18n新版可以通过在nuxt.config.js设定国际化，并不需要我们自己添加i18n.js文件进行处理只需要建立lang文件夹，添加语言包即可lang/en.jslang/zh.js通常我们是在这两个文件中添加自己定义的语言包当我们需要引入第三方插件的语言包时（比如element），我们是通过vue-i18n去进行配置现在的话直接把语言包合并在lang文件夹下对应的文件中即可import enLocale from 'element-ui/lib/locale
2021-11-24 18:20:16
708
原创 nuxt中引入vue-echarts6
nuxt是vue2.x版本根据文档下载引入，文档地址$ npm install echarts vue-echarts需要注意几点，也就是让我安装了两个小时的问题1.在vue2.x版本需要安装@vue/composition-apinpm i -D @vue/composition-api如果你用的是nuxt，执行那个下面得代码npm i -D @vue/composition-api2.node与python版本本来我node是12.x版本，使用vue-ech..
2021-11-18 21:54:50
1719
原创 nuxt 路由重定向错误
Error: Redirected when going from "/xxx" to "/xxx" via a navigation guard.我在nuxt的middleware中使用redirect重定向导致该错误我本意是想判断token是否存在，不存在就重定向到登录页面如果我点击退出页面按钮，清除token，并切换到登录页面，但是这时候meddleware的redirect重定向仍会触发，导致从登录页面重定向到登录页面把token的验证发到别的地方，比如项目初始化的时候，从缓存获取存
2021-10-28 19:59:55
1102
1
原创 数组扁平化处理
let data=[1,[2,[3,4]]]将上述数组变成[1,2,3,4]1.flatdata = data.flat(Infinity);2.es6扩展运算符data = [].concat(...data)这样只能去掉一重数组，[1,2,[3,4]]本来我是用循环递归去做的，后来看到有人使用了some这个方法，简化了很多while (data.some(Array.isArray)) {data = [].concat(...data);}...
2021-07-08 17:57:13
175
原创 nuxt开发遇到的问题
本地项目运行，初始默认是能在电脑运行的ip上打开，地址为localhost:3000,如果想要在内网其他电脑访问配置nuxt.config.jsserver:{ port: 8000,//端口 host: '0.0.0.0' // default: localhost }
2021-07-05 18:39:38
346
原创 Cannot read property ‘getBoundingClientRect‘ of undefined
在vue中使用滚动监听，当切换页面时会报错解决方法：在监听滚动页面关闭的时候清除滚动监听beforeDestroy () { window.removeEventListener('scroll', this.handleScrollx,true); },起始我没有在清除函数中添加true参数，在一个帖子中找到了解释（https://segmentfault.com/q/1010000010117564）...
2021-06-25 16:41:20
2628
原创 uniapp 开发app问题记录
1.iphone全面屏手机底部有横杠（安卓和非全面屏iphone没有）manifest.json 文件 app-plus 节点下配下 safearea，自适应颜色，也可以设置固定颜色 ，参考https://ask.dcloud.net.cn/article/35564"safearea": { "bottom": { "offset": "none" } },2.“App平台 v3 模式暂不支持在 js 文件中引用‘xxx.css’请改在 style ..
2021-05-14 17:50:14
1060
原创 svg菜单图标和关闭图标动态切换
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <style type="text/css"> bo...
2021-05-08 12:01:33
831
原创 js中保留小数
js保留小数有两种 1.四舍五入 2.直接截取比如1.255保留两位小数 四舍五入1.26 直接截取1.25不用的场景用不同的方法,比如涉及到金钱余额这种，如果位数较多保留两位小数显示，用直接截取是比较恰当的1.四舍五入比较好实现，js有toFixed函数可直接使用，注意要是数字类型Number(1.255).toFixed(position)2.直接截取可以自己写一个函数实现，split+slicefixed(value,position) { let v...
2021-04-30 11:01:22
2538
原创 animate动画懒加载
制作css动画可以使用animate动画库，也有在animate的基础上改进的动画库，例如aos.js wow.js动画如果一开始加载页面就全部播放完毕就没有了做动画的意义懒加载也就是当页面视图滑动到元素的时候才会执行元素的动画，主要很两种情况一、动画只执行一次，窗口移走再次移回，动画不会再次执行wow.js以animate为基础的动画，可以实现这种效果<divclass="card_text comeInLeftwow"data-wow-duration="1.5s"...
2021-04-02 17:28:09
846
原创 vue中使用scss全局变量
插件版本"node-sass": "^4.14.1","sass-loader": "^7.3.1","sass-resources-loader": "^2.1.1",node-sass和sass-loader默认最新版本，使用时会有各种版本报错上面的版本可用vue,config,js配置module.exports = { css: { loaderOptions: { sass: { data:
2021-03-29 18:57:53
3518
3
原创 git报错 error: invalid path
今天用git拉取同事代码报错原因是文件命名错误mac系统文件可以使用 * 字符命名，windows不行注意不同系统字符
2021-03-18 16:04:49
4175
原创 js中小数取整
以前我习惯性使用parseInt做取整，后来发现一个问题，对科学计数法不适用js取整的方法1.parseIntparseInt把小数转化成整数是从要取整数据的左边读取，遇到非数字结束，保留前面已读到的数字。当我们遇到科学计数法，使用parse取值可能是错误的（大部分来说是错误的）2.Math向上取整Math.ceil()四舍五入 Math.round()向下取整 Math.floor()这种对于科学计数法也适用，也是最方便的，三种取值方向3.其他...
2021-01-05 11:39:01
770
1
原创 vue中css使用data中的变量
封装一个ui组件，组件的样式一般是多种多样的我们可以通过组件传值的方式将ui属性传递给组件，但是我们属性是在js中可以拿到，vue3之前css是无法直接获取的(vue3中已经可以直接获取，可以去学习一下) 通过vars那么在vue2中，我们要借助setProperty函数写一个简单的例子<template> <div class="home" ref="UI"> <div class="header">hello world.
2020-12-04 17:02:01
8340
9
原创 document.body.clientHeight高度问题
移动端滚屏一次滚动一屏，document.body.clientHeight本来是为了获取屏幕高度，可项目发现获取到的值非常大经排查，应先设置body高度100%，或者使用document.documentElement.clientHeight
2020-09-14 18:00:16
1616
原创 在vue中使用d3做一个动态加载的树形图
树形图数据量可能会很大，一次性全部加载可能会有延迟，所以一开始只加载一层节点的数据，当我们点击节点去展开的子节点的时候，再通过请求去加载子节点的数据，并更新到树上本demo中还添加了放大缩小、点击节点居中的功能，参考链接http://www.jq22.com/yanshi21370注意：本demo用的d3版本是v3，用最新版有些功能无法使用 <script src="https://d3js.org/d3.v3.min.js"></script>效果图
2020-08-12 09:58:44
2261
原创 ios系统从外部返回app，页面变量被销毁
项目中需要使用第三方支付，用第三方平台接入支付的时候跳转到订单支付页面，开始的时候使用路由传值把订单号传过去，页面调用支付宝支付，并且开始对订单结果进行监听从app拉起支付宝支付，完成之后返回app后，订单号丢失，输出发现是underfined，说明变量不存在了，变量页面初始化定义了的，我想到的是ios系统在跳出这个app的时候把这个页面的变量都销毁了解决办法：使用缓存存放订单号，订单生成的时候放入缓存，在支付页面需要的函数中取出（不是页面初始化的时候取出）...
2020-08-05 19:39:05
325
原创 微信小程序input标签高度设置不生效
只设置height不生效加上min-heightmin-height:30rpx; height: 30rpx;
2020-06-20 09:19:51
1436
原创 vant weapp 按钮格式修改不生效
我用npm引入的所有的组件按钮样式都无法自己修改，自己写的按钮也不能修改原因：在你的app.json中有一行代码，是引入组件库后加上的，删掉即可
2020-06-17 09:19:30
2662
2
原创 vue cdn引入一段时间后 在某些浏览器报错
之前为了缩小打包体积，一些东西使用cdn引入，过了一段时间项目在某些浏览器打不开，打开控制台，发现cdn资源错误原因：cdn引入版本与项目版本不符项目中的版本应该是自己更新的，我自己没手动更新过，也可能是领导更的之前用的vue版本是2.5.10版本，cdn引入的也是，现在项目里vue是2.6.11（在package.json查看项目中的版本）更新cdn的版本即可...
2020-06-09 16:04:54
480
原创 jquery实现滚屏展示数据
之前写大屏写过一个滚屏，整理了代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js" type="text/javascript" charset="utf-8"><
2020-05-11 10:30:51
746
原创 css实现滚屏展示效果
我这里是20条数据循环展示，页面同时能展示四条数据，一次循环20s实现无缝滑动需要把前四条数据加到最后，否则会出现数据瞬变（因为循环结束会瞬间拉回，原来位置重新向下滑动），也就是有24条数据不说废话，直接上代码实现滑动功能的主要代码@keyframes myMove { 0% { transform: translateY(0); } 100% { transform: translateY(-500%);//我是按百分比设定高度，所以下滑的距离是5*
2020-05-09 14:58:20
1428
1
原创 vue 单个页面中引用多个echarts实现自适应
在vue某个数据展示页面，使用了多个echarts图表，使用onresize方法只能够让最后一个图表随着窗口大小自适应在解决问题的过程中发现的一些问题一、第一种开始我在每个图表组件的方法里面定义myChart，如下methods:{ setchart(){ const option{ } let myChart ...
2020-05-08 14:18:37
2766
原创 vue中使用echarts首次加载超出画布
画布大小使用百分比布局，首次加载页面发现echarts图表超出画布范围网上查找了半天资料，其中一种是在图表建立之后使用mychart.resize()方法调整，但我写了没有效果，然后我找了其他几种方法，不知利弊，知道的还请指教1.使用settimeoutmounted() { setTimeout(()=>{ this.hadleGetFilesList...
2020-05-07 11:24:24
1305
原创 在vue单页中重复引入同一子组件
如果一个功能服用率比较高，我们一般写成一个公共组件，需要的时候就引入今天遇到一个问题，写了一个城市级联选择器的公共子组件，我在一个页面引入了三个该组件，发现只有一个能够使用，拿代码说事下面代码是我城市选择器的一部分，我将getProvince方法在created中执行，因此只要打开引入该组件的页面，方法中的请求就会发送，结果是三个组件中的其中两个console.log(res) 输出为un......
2020-04-23 17:22:10
5523
原创 vue项目打包文件过大优化
有些我是在打包前就做了的，但为了全面一点还是写一写，我用的是vue-cli3 配置文件vue.config.js一、路由懒加载每次进入一个新页面才加载该页面所需要的资源component: () => import('@/view/setting/setting.vue')二、把不常改变的库放到index.html中，通过cdn引入最好引入指定版本，避免更新...
2020-04-03 14:28:53
1245
原创 用cdn引入报错 Uncaught ReferenceError:XXX is not defined
今天在压缩打包文件时，采用cdn方式引入vue和vuerouter等在引入vue-router时出现了报错愣是查找了半天，最后发现是变量名字的问题，很无厘头,只能写VueRouter，报错的配置正确的配置 而且下面配置里写不写都可以使用...
2020-04-02 15:11:20
2143
原创 vue后台管理页面权限管理
一般后台管理页面会有不同的权限，每个角色拥有不同的查看页面的权限权限实现：用户信息中携带权限页面标识先用账号密码获取到token，token获取用户信息，用户信息中包含了网页需要的内容，一般有姓名、身份、手机号、邮箱，现在多了一个权限页面的数组首先设置路由守卫,跳转页面的时候，首先判断是否有token（身份信息），有token还要判断是否有用户信息，没有就调用函数去获取。rout...
2020-03-30 17:19:15
678
原创 vue项目打包上传到服务器具体操作
这几天为了测试一个项目，自己尝试将前端项目打包放置到自己的服务器上，我用的是阿里云，下面也是以阿里云为例使用的工具是xshell6+FileZillaxshell6想免费试用就去下载家庭免费版 >官网下载1.服务器上传服务器，你首先得有个服务器吧，买一个也不贵，或者用公司的2.安装好软件xshell6FileZilla打开xshell左上角新建，先输入...
2020-03-27 15:29:30
2638
原创 vue项目在ie浏览器中，数据更改后页面数据没有变化
在项目里对表单数据使用增删改查之后，我们通常会重新请求数据更新视图，ie浏览器中，如果请求相同的URL，默认会使用之前请求来的缓存数据，而不会去请求接口获取最新数据，解决方法：在每个请求发送前，拦截请求并给请求接口的URL后加一个时间戳,这样就保证了每一次请求的URL都不同，ie就会不断的请求接口而不使用缓存数据。也可以在封装axios的时候添加if (config.method...
2020-03-26 15:26:58
987
4
原创 vue 报错 Module bulid failed (from ./node module/babel-loader/lib/index.js)
类似这样的报错，下载最新版node.js试试
2020-01-20 14:55:42
397
原创 echart 3D柱状图
3d柱状图展示数据，下图1为初始加载，可拖动转换方向，如图2在官方例子上去掉了坐标轴、网格线、指示线首先看一下官网的例子我们所需要做的就是，去掉多余的线，以y轴为例 yAxis3D: { name: 'y', show: false, axisLine: { show: true, //...
2020-01-09 14:24:07
2511
原创 echarts 修改折线图legend中的文字颜色
想要图中三个地方的颜色一致，如下图设置，如果只是想要图标颜色与折线颜色一致，所有legend文字颜色一致，可使用注释掉的代码，data数组就不必写了data数组就是为了设置多个样式的时候，每个样式的legend文字有自己的颜色...
2019-12-20 16:10:33
3347
scroll.zip
2020-05-11
支付宝小程序生成二维码
2019-08-27
web应用 使用 sign in with apple报错，如何解决？
2022-12-01
IPFS上传svg文件，返回如何展示
2022-03-08
TA创建的收藏夹 TA关注的收藏夹
TA关注的人