- 博客(83)
- 收藏
- 关注
RSS订阅原创 Vue3+Vite项目中安装SCSS
(需要自己新建一个存放共享的变量的文件如：mixin.scss)在项目的src/assets文件夹下新建style/mixin.scss文件。
2024-08-05 17:02:53
1522
原创 使用 Vue CLI 创建的 Vue 3 项目中配置@别名遇到了问题ERROR Invalid options in vue.config.js: “resolve“ is not allowed
在vueCLI中配置“@”文件引入别名
2024-07-29 10:24:08
621
原创 Echarts图表demo集合（各式各样的图表案例）
访问地址： http://www.isqqw.com访问地址： https://www.makeapie.cn/echarts访问地址： http://chart.majh.top访问地址： http://ppchart.com访问地址: https://madeapie.com访问地址： http://192.144.199.210/forum-2-1.html访问地址： http://chartlib.datains.cn/echarts有了这些网址，以后做可视化图表
2023-04-11 14:41:37
1431
原创 js如何调用浏览器方法获取经纬度数据？
其中，successCallback是获取位置信息成功后的回调函数，errorCallback是获取位置信息失败后的回调函数。这两个回调函数的参数都是一个。对象，包含了经纬度、精度等信息。
2023-04-04 16:03:58
2782
原创 解决js代码中加入alert就成功执行请求接口，不加就不执行的问题
**活动页面浏览量（PV）、浏览人数（UV）**/ function addpv(opttype) {url : '${ctx}/finedo/hallgift/addServiceRecord' , iswait : false , async : false , //默认开启true data : {} });关闭异步请求，async属性把默认的true 改为 false ，就可以请求数据。
2022-11-30 14:21:34
626
原创 clipboard剪贴板插件的使用教程
clipboard 是实现复制文本到剪贴板功能的 JavaScript插件，实现复制剪切功能非常方便实现效果图 <divstyle="padding-right: 30px; display: block; position: relative" > {{ authForm.license }} <img src="@/assets/copy.png" alt="" class="copy-img" :data-clipboar
2022-05-18 11:05:31
8026
原创 ElementUI之backtop组件的使用
官网给出的方案很有意思，直接copy没啥反应的，然后去找别人的代码看看，几乎也没人写能清楚，这个组件到底应该怎么使用。上代码<template> <div class="container"> <el-backtop target=".container" :visibility-height="300"> <div style=" { height: 100%;
2022-05-17 10:26:32
1915
2
原创 vscode终端运行脚本命令出现错误
报错内容解决方案1. 以管理员身份运行vs code2. 在终端执行：get-ExecutionPolicy，显示Restricted（表示状态是禁止的）3. 在终端执行：set-ExecutionPolicy RemoteSigned4. 在终端执行：get-ExecutionPolicy，显示RemoteSigned最后在测试脚本命令成功运行...
2022-04-15 09:18:55
1933
3
原创 echarts中把x轴文字标签太长，实现换行
实现效果图实现代码xAxis:{ axisLabel: { show: true, color: '#CBEDFF', interval: 0, // x轴文字标签换行 formatter: function(value) { return value.split(' ').join('\n\n') } },}...
2022-04-02 10:27:17
1564
原创 echarts图表给柱形图的每个柱子设置不同颜色（包括每个柱子设置渐变颜色）
配置效果配置每个柱子不同颜色的代码itemStyle: { normal: { // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，分别表示右,下,左,上。例如（0，0，0，1）表示从正上开始向下渐变；如果是（1，0，0，0），则是从正右开始向左渐变。 // 相当于在图形包围盒中的百分比，如果最后一个参数传 true，则该四个值是绝对的像素位置 color: new echarts.graphic.LinearG
2022-03-31 15:17:23
19668
原创 使用git clone或提交代码到github时报错OpenSSL SSL_read: Connection was reset, errno 10054
如果你在git clone github的仓库的时候报错了解决方法取消代理：git config --global --unset http.proxygit config --global --unset https.proxy
2022-03-18 09:21:46
418
原创 vue项目注册全局组件2.0和3.0版本使用的区别
1.首先得注册一个组件Demo.vue<template> <div> demo组件 </div></template><script>export default { name: "Demo" //一定要给组件命名};</script><style scoped lang="less"></style>2. vue2.0版本注册全局组件在main.js文件中i
2022-03-14 10:51:50
729
原创 在使用echarts绘制地图的时候必须要引入的文件
在安装完Echarts后使用echarts绘制地图的时候必须要引入的文件// 引入中国地图import "../node_modules/echarts/map/js/china"//引入世界地图import "../node_modules/echarts/map/js/world"// 引入各省的地图import "../node_modules/echarts/map/js/province/anhui"import "../node_modules/echarts/map/js/pr
2022-03-05 09:10:50
1260
原创 在vue项目中封装eharts插件使用
封装echarts插件1.首先在src下新建一个plugins文件夹，然后在这个文件夹下新建echarts.js文件在echarts.js中引入 import echarts from 'echarts' const install = function (Vue){ Object.defineProperties(Vue.prototype,{ $charts:{ get() { return {
2022-03-03 14:26:40
808
原创 lodop套打模板设计代码
lodop有人说她是Web打印控件，因为她能打印、在浏览器中以插件的形式出现，用简单一行语句就把整个网页打印出来； 有人说她是打印编程接口，因为她介于浏览器和打印设备之间，是个通道和桥梁，几乎能想到的打印控制事项都能做到； 有人说她是JavaScript的扩展，因为她所有功能就那么几个语句，和JS语法一样，一看就明白个究竟； 有人说她是报表打印工具，因为那个add_print_table语句把报表统计的那点事弄了个明明白白；1. 在使用lodop之前要安装lodop插件（官网地址：http://www
2022-03-03 11:42:30
2028
原创 切换npm下包镜像源，用以解决npm下包慢的问题
下包的镜像源，指的就是下包的服务器地址一般刚安装的npm的镜像源是国外的服务器，这样就会导致下包的速度很嘛为了解决下包速度的问题，推荐使用国内的服务器下包（一般使用npm淘宝镜像）切换镜像源的命令1 .查看当前的下包镜像源npm config get registry2 .将下包的镜像源切换为淘宝镜像源npm config set registry=https://registry.npm.taobao.org/3 .检查镜像源是否下载成功npm config get registr
2022-02-16 15:51:27
577
原创 2022年度全网最全Web前端学习路线
详细Web前端学习路线图此文涵盖尚硅谷前端学科all教程，这里有你需要掌握的所有前沿技术！史上最全前端学习路线，从基础到项目实战，还不冲冲冲！https://www.bilibili.com/read/cv5650633?spm_id_from=333.788.b_636f6d6d656e74.8...
2022-02-09 16:18:15
2623
原创 js实现放大镜的效果
实现效果上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>放大镜</title> <link href="bigimg.css" rel="stylesheet" /> <script src="bigimg.js"></script></head><body o
2022-01-21 14:00:44
143
原创 蕞新vue或react开发者调试工具安装（简洁版）
安装开发者调试工具后的效果展示如果打开的网页是react或vue框架搭建的图标颜色就会亮（调式工具具体怎么使用这里就不多说了）下载安装包https://gitee.com/zuo-bufan/react_dev_tools打开Google浏览器（找到扩展程序）打开扩展程序（打开开发者模式）——> 点击加载已解压的扩展程序选择文件夹Vue-Devtools–mastervue的开发者调试工具安装完成选择react_dev_toolsreact调试工具安装完成...
2022-01-07 14:57:35
634
原创 indexOf与includes的用法
判断数组中是否存在某一值，indexOf与includes的用法indexOf用来判断数组中是否含有某一值var arr = [1,2,3,4,5,6];console.log(arr.indexOf(6) ) // 输出 5console.log(arr.indexOf('7') ) // 输出 -1如果数组中含有判断值，则返回这个值在数组中的下标值。没有这个值，则返回-1includes判断数组中是否含有某一值var arr = [1,2,3,4,5,6]console.log
2021-12-30 17:03:59
458
原创 Vue项目中兄弟组件之间的值传递（$bus 全局事件总线使用详解）
$bus的使用首先要在原型上挂载Vue.prototype.$bus = new Vue()在main.js文件中new Vue({ beforeCreate() { Vue.prototype.$bus = this //挂载$bus }, router, store, render: h => h(App),}).$mount('#app')在组件中使用App.vue <template> <
2021-12-30 11:24:38
1369
原创 Vue项目的axios请求封装
创建实例模板 //创建一个请求实例 let instance = axios.create({}) //为请求实例添加请求拦截器 instance.interceptors.request.use( config =>{ return config },err =>{ //请求错误 一般http状态码以4开头，常见：401超时，404 not found 多为前端浏览器错误 return Promise.reject(err) } ) instanc
2021-12-28 13:56:59
528
原创 Vue项目中配置@/引入文件
在项目的根目录下新建一个jsconfig.json 文件名的新文件配置代码{ "compilerOptions": { "baseUrl": "./", "paths": { "@/*": ["src/*"] } }, "exclude": ["node_modules", "dist"]}
2021-12-28 13:27:45
827
原创 在vue项目中import引入外部文件什么时候用花括号什么时候不用
大家看案例就秒白了// validate.js// 过滤特殊字符export function stripscript(s) { var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）&;—|{}【】 ‘；：”“'。，、？]") var rs = ""; for (var i = 0; i < s.length; i++) { rs = rs + s.sub
2021-12-24 16:17:03
1800
原创 在webstorm编辑器中使用git提交代码
有些新手可能还不会使用微博storm提交代码接下来我会把详细教程记录下来，一看就会的那种首先用过webstorm的都会知道右侧有一个git的三个图标左边第一个向下的箭头的作用是更新代码（把远程仓库的代码与本地的代码同步）在什么情况下使用： 首先是多人协同的仓库，在别人提交代码后，这是就需要点击向下的箭头跟新代码，把别人提交的代码跟新到自己的本地，如果没有跟新，等你提交代码的时候会引起代码冲突。点击跟新按钮会有提示中间的打勾的图标就是commit提交代码的作用点击提交按钮会有弹框弹出
2021-12-23 16:28:26
9883
1
原创 在less中使用background-image时，url的设置问题（大坑详解）
对于在less样式中使用url报错应该是大家经常遇到的问题大家应该都百度到这样的解决代码对于第一次遇到这个问题看到这样的代码一脸懵逼，这里的@url是啥子意思，这里的路由该怎么写，好难啊 要泪崩了问题详解在类名前面一定要有（@url）这个参数，整个url(@/images/home/icons.png) 路径 要用 " " 包裹着在前面还要加个 ~ 符号 （相信大家用过这个波浪号，千万别写成—了）如果看到这里的url解释，相信大家都能轻松解决这个问题了...
2021-12-21 10:02:44
4579
4
原创 git如何clone不同分支的代码（clone分支代码的坑）
clone代码的时候被坑了，本来想要clone分支代码的，结果运行了才发现和之前的一样。原来clone默认是clone master分支的，选过了也一样。这样选择分支clone的代码还是master主分支的代码解决方法：在编译器的控制台里输入 git clone -b + 分支名 + 仓库地址，-b=-branch（分支）git clone -b 分支名称 https://gitee.com/项目(仓库地址).git在码云或在GitHub上clone分支都是这样操作的...
2021-12-16 15:37:34
7056
3
原创 微信小程序：实现可拖动悬浮图标（列表页添加按钮）
实现的效果截图主要代码.wxml <!-- 添加按钮 --> <!--可拖动按钮控件表--> <!--buttonStart和buttonEnd一定不能用catch事件，否则按钮点击事件会失效--> <view class="btn_Suspension" bindtap="openAddPage" catchtouchmove="buttonMove" bindtouchstart
2021-12-16 15:09:09
4979
6
原创 微信小程序一键回到顶部功能实现
做微信小程序的时候遇到了这个问题要求列表页要做一个实现上拉一定距离后显示一键返回顶部的点击可以一下子回到列表顶部，感觉好难啊，不会做搞个⛏哈哈哈 ，遇到问题不要慌面向百度编程 ----上代码.wxml文件代码 <!-- 返回顶部 --> <view class='goTop' hidden='{{!scrollTop}}' bindtap="goTop"> 返回顶部 //这里可以换成一个图标 </view>.wxss
2021-12-09 16:38:44
2185
3
原创 NProgress加载进度条安装使用教程
NProgress 使用官网地址：https://ricostacruz.com/nprogress/使用NProgress后的效果显示1. 安装npm install --save nprogerss2.使用（在请求接口的request.js文件引用）import Nprogress from 'nprogress'import 'nprogress/nprogress.css'3.在 request 请求拦截器中，展示进度条 NProgress.start() Nprogre
2021-12-07 13:59:14
588
2
原创 微信小程序push数据到data列表渲染到页面
push数据data 渲染到页面实现效果图点击上传图片，在页面会渲染多一个照片列表点击删除会减少一个图片列表渲染要实现的功能已经介绍完了，（就不说废话了，上代码）.wxml文件<view class="uploadPic-content"> <view class="uploadPic-info" wx:for="{{imgListArr}}" wx:key="{{index}}"> <view class="up
2021-12-07 11:45:12
1708
原创 微信小程序封装request请求数据
做项目离不开请求数据1.为什么要封装api去请求接口数据做微信小程序的时候请求数据的时候会多次用到wx.request请求，如果每次都去写一遍wx.request({ url: 'example.php', //仅为示例，并非真实的接口地址 data: { x: '', y: '' }, header: { 'content-type': 'application/json' // 默认值 }, success (res) { console.
2021-12-06 15:39:28
1960
2
原创 项目打包部署到github的GitHub Pages（静态网页）
1.在GitHub上建一个新仓库2.建立好仓库要拉去到本地git clone https://github.com/zuo-bufan/deploy-demo.git ( 这里放入自己仓库就可以了)3. 进入deploy-demo仓库创建 vue项目项目建立完成4.运行项目（配置vue.config.js文件）【上面讲了很多废话，我相信小伙伴上面的步骤都已经会的，接下来要讲重点了】在项目中建一个vue.config.js文件vue.config.js代码module.ex
2021-12-01 17:52:54
3976
3
原创 微信小程序实战之登录页面制作
登录页面的效果图目录结构：实现项目所需图片loginLog.jpgname.pngkey.pnglogin.wxml<view class="container"> <view class="login-icon"> <image class="login-img" src="../images/loginLog.jpg"></image> </view> <view class="logi
2021-11-29 13:36:21
15806
6
原创 2021版手机号验证最新正则表达式
下面就是手机号验证的最新正则表达式：/^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/在JavaScript中使用方法案例<script> var reg_user = /^[\u4e00-\u9fa5]{2,4}$/; //2-4个中文字符正则 var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0
2021-11-19 10:54:49
22157
原创 微信小程序实现电子签名并导出图片
实现效果图.wxml文件<canvas class="canvas" id="canvas" canvas-id="canvas" disable-scroll="true" bindtouchstart="canvasStart" bindtouchmove="canvasMove" bindtouchend="canvasEnd" touchcancel="canvasEnd" binderror="canvasIdErrorCallback"></canvas><
2021-11-11 11:29:23
1773
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人