- 博客(49)
- 收藏
- 关注
RSS订阅原创 vue3.x + elementplus 设置el-tree指定节点展开
vue3.x + elementplus 设置el-tree指定节点展开
2022-07-27 14:55:28
4178
7
原创 vue2.x-echarts公共组件封装--简易篇（3d柱状图，炫酷仪表盘，折线，曲线图）
vue2.x-echarts公共组件封装--简易篇（3d柱状图，炫酷仪表盘，折线，曲线图）
2022-07-21 16:56:41
3057
3
原创 vue+tinymce富文本插件的使用
强大的富文本插件tinymce，集成在vue2.x项目里，用起来还是很简单的，下面先提供一下官方文档地址：tinymce官方文档地址http://tinymce.ax-z.cn/general/upload-images.php接下来简单说一下如何使用，其实官方文档已经给我们列出来了使用方法，但是鄙人就更直接的提供给需要使用的小伙伴们。。。下面是vue-tinymce的文档地址：vue-tinymce文档地址https://packy-tang.gitee.io/vue-tinymce/#/?id=
2022-05-19 17:51:59
3026
原创 localStorage设置过期时间
最近在项目中遇到一个很棘手的问题，业务需求是用户登录完成后，关闭浏览器自动清除用户信息，于是我把登录之后获取的用户信息放到sessionStorage存储，我以为这样就很完美。。。于是乎，pc端进入详情需要新开页面，那么问题来了：新开的页面是不能共享sessionStorage存储的数据此外话有一种方式就是放在cookie里面，因为cookie不设置过期时间关闭浏览器会自动清除，之前使用的js-cookie插件在模拟ie浏览器时遇到保存同名cookie数据没有更新于是采用了localStorag
2022-03-29 15:28:51
1791
1
原创 前端上传文件或图片比较大，采用oss直传的方式解决
最近再vue开发的h5项目遇到一个上传图片缓慢的问题，于是采用oss直传的方式解决上传大文件或图片慢的问题，废话不多说，请看代码：/** * oss 直传 * @param {文件流：我使用的是vant上传组件拿到的file文件流} file * @param {oss文件夹的名字} fileType * @returns /** @type {*} *///oss服务器的配置--在控制台可以获取到的（由于正式和测试的参数是不一样的，所以我统一放到环境变量管理起来）const hea
2022-02-11 21:32:22
3015
原创 element 验证出现英文以及自动验证问题
最近在项目开发中用到了element-ui框架，写了一套很长的表单提交，用到了el-form整这个组件，用这个组件的好处就是我们不用单独去做表单的校验，也省了一堆if条件判断，下面请看官方示例：<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="密码" prop="pa
2021-12-15 10:36:37
2233
2
原创 van-list immediate-check设置为false无效的问题
最近在使用van-list组件开发带有tab切换的项目，需求是tab是后端返回的数据，所以获取列表数据要在tab返回之后调用，所以进入页面时默认不触发van-list的load事件，官方文档说明：如下图所示：组件配置如图所示：但是我们这样设置完成之后，刚刚进入页面是没问题的，当我们切换tab时还是会触发load事件多次，因此我的解决方案是：根据有无数据使用v-if来控制van-list是否展示，因为有时候页面初始化没有数据时vant-list也会触发一次完美解决多次触发load事..
2021-08-31 14:56:30
928
5
原创 使用npm包管理构建微信小程序步骤
微信小程序使用npm包步骤这里以npm引入小程序官方UI组件库vant-weapp为例1.在小程序根目录内，初始化npm（官方文档上是没写出这一步，这里做个补充）npm init2.在小程序中执行命令安装 npm 包（这里使用了vant-weapp）：npm i @vant/weapp -S --production3.在微信开发者工具中的菜单栏：工具 --> 构建 npm （这里记得先安装 npm 包，即步骤2）：4.在微信开发者工具中的菜单栏：工具 --&.
2021-08-23 17:39:16
436
原创 微信小程序控制台警告：[Component] slot ““ is not found.
近期在开发微信小程序的项目使用了vant-weapp这个ui框架，在进行一系列的配置后，一切都可以正常显示，但是控制台出现了这样的一条警告，顿时心里感觉有点不舒服了。。。如图所示：于是我查看了安装的vant-weapp包确实没有slot这个组件，但是功能没什么影响，可能是强迫症在作祟把，于是我突然想到会不会是小程序的基础库导致的呢。。。经过我的测试，发现只要是微信小程序的基础库不高于2.18.0就不会出现这个警告。。。...
2021-08-23 17:23:29
15922
8
原创 element table type=“expand“ 设置成按钮展开
最近在工作中遇到一个需求，有关element-ui table表格每一行展开并调用后端接口显示表格数据，看了一下官网api，关于展开是静态的，也就是说要把展开的数据拼在接口返回的data中，但是我们是要动态获取数据。。。对于这方面的需求开始研究了一下，看到有个大佬有关这方面的需求的博客，但是在实际开发中又遇到了一个很棘手的bug，于是。。。我解决了这个问题。。。废话不多说请看代码。。。下面是需求相关：接下来就是代码实现：<template> <div> <
2021-08-23 16:41:51
3103
原创 vue单页面背景颜色修改
最近在做项目中，使用vue开发移动端项目，遇到一个小问题，路由跳转同时修改当前页面的背景色。下面简单说一下vue单页面应用，由于vue的单页面应用导致我们的项目只有一个index.html文件，然而我们若想改变页面的背景色美酒必须动态改变body的背景色才是最直观最有效的解决方案。废话不多说直接上代码，亲测百分之百有效：<template> <div> </div></template><script>exp
2021-07-29 11:14:33
3665
2
原创 vue3.0获取虚拟dom方法
最近使用vue3.0+vue-router4.x+element-plus ui框架联合开发了一个小的商城项目，首先简单说一下element-plus ui框架。官网上介绍了element-plus ui框架适用于vue3.0开发pc端，使用时发现只是框架部分代码可以拿来直接使用，但是其余的代码还没有更新下面总结vue3.0遇到的一些问题，老生长谈的就是虚拟dom的获取相对于vue2.x来说很是有点麻烦的，在vue2.x里面，我们只需在标签行内添加ref属性并赋值，那么我们就可以拿到这个dom节点，
2021-07-12 18:41:00
3445
3
原创 vue-cli4.x项目启动本地出现 invalid host header的原因
近段时间有个项目是单点登录的，项目里需要获取用户token，故本地配置host文件来访问线上项目，拿到cookie存储的用户token，所以配置了hosts文件。之前用过vue-cli2.x,我们只需要配饰hosts文件就可以了。因为webpack是默认设置可配置host，但是新版的vue-cli4.x将这项配置独立出来，需要我们手动配置，其实也很简单，只需在vue.config.js文件中添加一个属性并设置值为true,module.exports ={ devServer: {
2021-07-05 09:42:55
534
原创 iphoneX等移动端设备底部安全区域适配-简述
前言iPhoneX 取消了物理按键，改成底部小黑条，这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言，顶部（刘海部位）的适配问题浏览器已经做了处理，所以我们只需要关注底部与小黑条的适配问题即可（即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素）请看下面的示例：以上就是我们要解决的问题，其实解决起来还是很简单的，先说一下解决方案，然后再阐述一下为什么要这样做:第一步：在我们的index.html页面的meta标签 viewport添加一个属性viewport-
2021-06-28 11:31:30
6346
原创 关于小程序中富文本标签识别空格符 ；的问题
今天解决了一个显示的问题，在后台富文本输入框设置了这样的一个格式的文本：如下图所示：在前端页面调用接口后，数据给我们返回得是如下所示：content:"<p style="white-space: normal;">主办单位：平安银行杭州支行</p><p style="white-space: normal;">时 间：11月24日 14:00-17:00</p>
2021-04-27 16:41:28
4273
1
原创 js获取在线时间并展示，精确到秒
js获取本地时间并展示在页面上：请看代码 <div class="curentTime" id="date"> <div class="hour">{{curTime.hour}}</div> <div class="point">:</div> <div class="minute">{{curTime.minute}}</div> <d
2021-04-15 16:13:28
693
原创 vue项目中使用echarts完成图表类的开发之柱状堆叠图
柱状堆叠图，其实跟柱状图是一样的，本质上就是数据复杂一点：如何才能实现堆叠呢，就是一个属性：stack:"total",该属性在数据列表中也就是series数组中，针对每一个数据对象指定stack:"total"，stack的值要一致，下面我们看一个简单的例子：子组件：请看代码<template> <div class="histogram" :style="{ 'width': histogramLevelData.width }"> <div ..
2021-04-12 18:06:05
1161
原创 vue项目中使用echarts完成图表类的开发之折线图
下面是折线图的简单介绍：请看代码：折线图：子组件<template> <div class="histogram" :style="{ width: lineEchartsData.width }"> <div class="histogramBar" :id="id" :style="{ width: '100%', height: lineEchartsData.lineEchartsHeight }"
2021-04-12 17:55:26
665
原创 vue项目中使用echarts完成图表类的开发之柱状图
所有的图表配置基本上大同小异，下面就列举一下有关柱状图的配置项：废话不多说，请看代码：子组件：水平柱状图（也就是图一）<template> <div class="histogram" :style="{ 'width': histogramLevelData.width }"> <div class="histogramBar" :id="id" :style="{'width':'100%','height': histogramLevelDa
2021-04-12 17:49:17
1409
原创 vue结合echarts开发柱状图+折线图合并的图表
接上一篇文章，接下来写的是有关于柱状图+折线图的图表，此图表分为左右两个坐标轴：请看下图相关配置请看第一篇文章：echarts之饼图配置以及echarts官网链接：echarts官网废话不多说请看代码：这是子组件：<template> //这是子组件 <div class="mixture_wap"> <div class="mixture" id="mixtureId"></div> </div>&
2021-04-12 17:10:36
1947
原创 vue项目中使用echarts完成图表类的开发之饼图，环形图
最近在vue项目中使用echarts.js完成诸如饼图，环形图，折线图，折线图加柱状图，和柱状图（水平柱状图和垂直柱状图），以及柱状图堆叠，下面请看图片展示：如上图所示基本上echarts的简单图表都是涉及到了，那么接下来主要详细介绍一下图表的相关配置项，其实这些东西echarts官方文档都是有的，但是想要快速构建跟我们设计图一样的样式还是需要点时间的，根据以上的例子，详细介绍一下开发中所需的配置项。。。声明一下：我项目中使用的是echarts,而不是vue-echarts插件。首先，介绍的
2021-04-12 16:37:57
8924
原创 taro-vue 使用第三方插件【miniprogram-barrage】开发微信小程序【直播弹幕】
近日使用taro-vue开发微信小程序端的视频直播，并且用户可以发送弹幕。该功能基于微信小程序第三方插件miniprogram-barrage，接下来主要以此插件为例说一下使用taro跨端开发框架如何正确的使用第三方插件：首先【miniprogram-barrage】这个插件我们要使用npm安装到我们的node_modules依赖包里面npm install --save miniprogram-barrage其次，我们要在项目的node_modules依赖包里面找到我们安装的插件：如下图所示
2021-03-15 19:32:03
2423
3
转载 微信小程序填坑之路（一）：text空格符号以及省略号
1、text的空格符首先需要设置<text>控件的decode值 decode可以解析的有 < > & '     值 说明 ensp 中文字符空格一半大小 emsp 中文字符空格大小 nbsp 根据字体设置的空格大小 例如：<text decode="emsp">提 交&l..
2021-03-11 09:43:14
804
原创 vue 项目在index.html页面直接引入jq库，报错$ is not defined解决方案
近日在vue项目开发中遇到一个问题：vue 项目在index.html页面直接引入jq库，报错$ is not defined解决方案。。。首先说一下为什么会出现这个错误，其实项目发布到线上是不会出现这个问题的，但是我们本地开发时由于代码的规范插件，导致这哥报错的出现，其实我们只需一个小的配置略过这个编辑器的解析就好了。。。废话不多说直接看代码：首先在我们项目的根目录创建一个文件：如下图所示：文件名为(.eslintrc.js，不要忘记前面有个点)接下来就是内部代码：module.
2021-03-03 19:15:10
3294
8
原创 taro-vue2.x跨端开发之swiper（二）
持续taro-vue框架的踩坑之路，今天说一下taro---swiper内置组件的小问题吧，首先看一下文档：(官方文档看起来有点不舒服，手动整理一下)参数 类型 默认值 必填 说明 indicatorDots boolean false 否 是否显示面板指示点 indicatorColor string "rgba(0, 0, 0, .3)" 否 指示点颜色 indicatorActiveColor str
2021-02-20 11:43:33
1098
1
原创 taro-vue2.x框架跨端开发（一）
最近使用taro-vue2.x版本开发微信小程序，taro框架是京东凹凸团队研发的开源框架，但是taro开始默认使用的是react语法，对于vue还是后面补充的，关于taro-vue官网也是没有相关详细文档说明的，使用vue2.x版本开发小程序只能一点一点的采坑了，虽说taro基本上使用跟微信小程序原生语法差不多，但是。。。先记录一下踩得坑：（后面会慢慢补充完整）首先是微信小程序获取手机号的一个小坑：微信小程序原生是使用button标签并实现微信获取手机号方法，下面先列一下微信小程序原生的获取手
2021-02-08 18:51:57
2019
转载 H5 img标签图片无法显示 -- 解决方案
如果你也曾复制过一些类似腾讯、百度等各大网站的文章，你会发现黏贴下来发表之后经常出现图片无法显示，这是怎么出现的呢？举个栗子：<body> <img src="http://upload.techweb.com.cn/2017/0106/1483690985396.jpg" /></body>解决方案使用Referer Meta标签控制referer，在H5 的 header加入meta<meta name="referrer"
2021-01-28 16:04:55
1987
原创 vue-cli4.x配置打包命令
最近在接手一个项目中发现每次打包的时候都要去修改接口请求地址，如果是发测试我们打包的时候就要把axios.defaults.baseURL赋值为测试地址，手动改太不方便了，不如配置打包命令，改变手动频繁操作首先我们先看下vue-cli官网对于环境变量的解释和说明：vue-cli官网接下来开始我的配置流程：第一步：我们在项目根目录创建四个文件，如下图所示：简单说明一下为什么要创建者四个文件：首先我们创建的文件名必须是 .env.xxxx，.env.xxxx文件的xxxx是必须和pack
2021-01-27 16:06:58
1188
3
原创 谷歌浏览器跨域配置
最近在vue项目中遇到一个问题：前端请求后端接口，状态码是302,状态码302表示重定向，也就是接口会重定向到一个地址，并且发送http请求。针对于状态码为302，不做详细解释了，简单看一下：请看图片上响应头里面框选的location:http://xxxxx，location的值就是一个重定向的url，正常的接口是不会出现这个location的，所以在后端不配置跨域的情况下，我们这个接口就会报跨域的错误，这是vue-cli跨域代理不能解决的问题，所以不得不配置浏览器苦于来解决这个问题。。。下面
2021-01-22 14:44:56
1359
原创 vue项目引入vue-scrollTo
vue项目引入vue-scrollTo插件的完整步骤：使用npm安装则如下：1、安装vue-scrolltonpm install --save vue-scrollto2、项目根目录src文件夹下创建scroll文件夹（文件夹名字自定义，我习惯创建名为scroll），并在scroll文件夹内部创建scrollTo.js（该js文件名自定义，我习惯创建名为scrollTo.js，方便理解），将下面的js复制并粘贴到scrollTo.js中import BezierEasing from
2021-01-15 12:51:46
2801
4
原创 axios请求封装
分享我的vue项目axios请求接口统一封装接下来是目录结构图片展示接下来是http.js封装的是接口请求拦截和响应拦截（http.js是核心文件）import axios from 'axios';import { Message, MessageBox } from 'element-ui'import store from '../../store'import { getToken } from '@/utils/auth'import qs from 'qs'co
2020-12-21 17:51:54
737
2
原创 vue 组件之element-ui table封装
做了这么久的后台管理系统，主要技术栈是vue，因此今天就分享一个二次封装element-ui的table(表格)组件，废话不多说了请看代码。。。。该组件的封装使用render方法进行渲染。。。<template> <div class="table-management"> <el-table border style="width: 100%" :data="tblData" v-loading="tbLo
2020-11-10 17:10:35
2973
5
转载 正则表达式-匹配中英文、字母和数字
最近需要用到正则匹配，上网找了一下，发现这个博客写的不错，想着保留了下载，日后用时就省事了。转载来自：https://blog.csdn.net/jinruoyanxu/article/details/79385815匹配中文:[\u4e00-\u9fa5]英文字母:[a-zA-Z]数字:[0-9]匹配中文，英文字母和数字及_:^[\u4e00-\u9fa5_a-zA-Z0-9]+$同时判断输入长度：[\u4e00-\u9fa5_a-zA-Z0-9_]{4,10}^[\w\u4E00-
2020-10-10 10:38:54
10708
原创 nvm安装nodejs方法
前端开发之前的环境配置虽然不多，但是我认为还是很重要的，打个比方：安装nodejs吧，有时候我们在开发过程中真的会因为nodejs版本过高或者过低导致插件安装失败，但是这要消耗我们很多宝贵时间。。。此时的你肯定是要卸载node，然后安装一个适合的版本，这样做无疑是浪费时间的。。。而且一旦卸载完有残留的话就会导致第二次的安装失败。。。再此我向小伙伴们推荐一款自由，任性的切换node的工具，当。当。当——它就是nvm，它是node版本管理，切换工具，我们可以安装多个node版本，在这些版本间随意切换，如果遇
2020-09-09 14:46:15
2223
原创 vue-scroller上拉加载更多，下拉刷新插件（综合百家之谈）
今天做了一个项目，想更完美一点所以增加了一个下拉刷新的方法那就是vue-scroller插件，下面直接上代码介绍一下具体的使用方法：首先我们需要安装一下这个方法：npm i vue-scroller -S安装完成，随即在main.js导入并注册在Vue上// 引入下拉刷新import VueScroller from 'vue-scroller'Vue.use(VueScroller)接下来就是放在代码中使用<template><div> <
2020-08-27 12:52:04
2277
转载 vue 使用vant-ui结合vw适配移动端
1.安装vue-cli2.x脚手架 npm intatll -g vue-cli 安装完毕之后 可以检查安装版本即 vue -V2.创建一个项目vue init webpack YourProjectName3.接下来安装vw布局需要的插件我们需要安装7个插件（1）postcss-px-to-viewport（2）postcss-write-svg（3）postcss-cssnext（4）postcss-viewport-units（5）cssnano（6）postc...
2020-08-19 13:53:06
1608
3
原创 vue父组件动态传递数据给子组件，子组件钩子函数monted获取不到数据的问题
最近在使用vue开发原生app内嵌webview（h5）遇到一个小问题，于是百度了一下，也未曾发现很有效的解决方案，在此整理一篇博客给有需要的小伙伴浏览首先讲述一下我的应用场景，我的应用场景是home页面有个轮播图，这个轮播图我抽成了一个组件—banner组件，在banner组件使用swiper插件进行开发的轮播图。从父组件异步调用app方法并请求后端接口，拿到数据userData并传递给子组件。由于我要动态展示当前的用户等级，比如说当前用户等级时2，那么swiper的参数initialSlide赋值为
2020-08-18 17:44:36
1037
原创 解决git pull等操作需要输入密码问题
最近在拉取gitlab项目代码时，配置ssh key不小心输入了密码，导致后面的git相关操作都需要输入密码，很是头疼。。。于是网上搜了很多相关问题，也都尝试了一遍，依然不可取。。。下面我总结一下我的调试经验：首先打开Git Bash Here，并输入命令：$ ssh-keygen -p如图所示：下面针对这几行命令简单解释一下：Enter file in which the key is (/c/Users/EDZ/.ssh/id_rsa): 设置的密码，（这句话的意思是请输入你
2020-08-06 13:51:26
2981
原创 vue项目下拉加载自定义指令实现
最近接触到一个需求——pc端下拉加载的功能，在弹窗内部实现下拉加载分页，主要就是通过判断滚动条的距离底部的距离改变pageNum值加载新的数据。本章是通过自定义vue指令完成这一需求效果图是一个分两栏显示的弹窗，在一个弹窗内部实现下拉加载，又想法的小伙伴可以在下拉加载过程中添加相关loading动画展示。。。操作比较简单，废话不多说了，简单粗暴直接贴代码。。。。。。<template> <div class="left-content" v-loadmore="loa
2020-07-23 17:02:10
512
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人