前端
唯心所现,唯识所变
这个作者很懒,什么都没留下…
展开
-
git 常用命令行
git 常用命令原创 2022-06-15 13:48:48 · 99 阅读 · 0 评论 -
js 安卓和ios的一些奇奇怪怪的注意点
奇奇怪怪,不可可爱爱转换时间戳,ios报错转换时间戳,ios报错bug:2022-5-30 转为10位或者13位的时间戳,在windows和安卓机上都没问题的,但是ios中会报错,没法识别2022-5-30里面的横杠解决方法:let date = '' let dateData = date.replace(/-/g, '/'); console.log(dateData, 'dates'); time.value = Date.parse(dateData) / 1000; co原创 2022-06-06 14:31:51 · 148 阅读 · 0 评论 -
js 数据处理(二)
js 数据处理(二)为什么又要开一篇js 数据处理(二)呢,原因有两个,上一个数据处理已经写了很多内容了,导致看起来有点儿疲惫,其次是这篇更多记得的可能是es6 或者 vue3方面的,到时候也可能会开个ts的命名为 ts 数据处理(3), 哈哈哈1、es6 解构赋值,使只过滤出一个数组中............原创 2022-05-05 11:20:37 · 961 阅读 · 0 评论 -
解决props绑定数据,不可篡改 (.sync修饰符)
子组件不能直接对父组件prop进行重新赋值,但是注意了父组件是引用类型的时候,子组件可以修改父组件的props里的属性。好了进入主题:当我们使用prop的时候,不想数据是单向流的,想子组件改变的时候父组件也改变,那么我们有两种方法来解决这个问题:1. 比较复杂子组件<template> <div> <input @input="onInput" :value="value"/> </div></template转载 2021-12-16 16:43:48 · 1225 阅读 · 0 评论 -
vue2 修饰符
浏览文章的时候,忽然看见了 v-model.trim 这个写法,忽感兴趣,特意去查了下,然后发现还有些别的修饰符,都是日常中挺实用的,特来记录下 官方链接.trim自动过滤用户输入的首尾空白字符,可以给 v-model 添加 trim 修饰符:<input v-model.trim="msg">.lazy在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。添加 lazy 修饰符,从而转为在 change 事件之后进行同步。上述句子转为大白话就是原创 2021-12-08 10:27:12 · 446 阅读 · 0 评论 -
element ui的分页+前端全权手动处理分页数据
一般来说,都是前端发送页码给后端,后端返回相对应的页面的数据给前端。但是也有额外的原因,导致后端无法分页来拉给前端,必须得一次性全部发给前端,需要前端自己来处理分页。话不多说,上代码:html中: <el-pagination class="pageSty" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="pa原创 2021-10-28 13:32:51 · 501 阅读 · 0 评论 -
vue websocket 实现客服聊天功能(基础实现)
本文章主要介绍如何实现一个基本的聊天,后续会添加表情包,传照片等功能其实刚开始接触的时候,我最大的疑惑是聊天功能的前期是否需要搭建什么框架,下载一些什么之类的,结果就是其实websocket可以直接使用,然后前后端搭配,也是免费的,没发现需要收费功能的东西。实现效果图~首先封装一个websocket.js文件(大家可以直接复制,然后把接收数据之类的格式改成自己的就可以啦)import store from '@/store'var webSocket = null;var globalCall原创 2021-10-06 16:54:24 · 8158 阅读 · 14 评论 -
vue 获取浏览器唯一标识符
官方宣称准确度高达99.5%,但我也看到有人说是94%。。。但总的来说也够用了下载npm i fingerprintjs2 -S局部引入import Fingerprint2 from 'fingerprintjs2'使用的具体代码 // 获取浏览器的唯一标识符 createFingerprint() { // 浏览器指纹 const fingerprint = Fingerprint2.get((components) => { //原创 2021-09-16 11:01:46 · 3561 阅读 · 0 评论 -
vue 点击空白处,关闭指定的div弹框
在需要隐藏的页面中加入@click.stop来阻止点击事件继续传播<div @click.stop> <div v-if="dialogSelected"> <p>啦啦啦</p> <p>啦啦啦</p> </div></div>监听点击事件,并调用函数 mounted() { document.addEventListener('click', this.bodyCloseSelect原创 2021-08-30 14:32:24 · 2546 阅读 · 0 评论 -
img 带请求头token
框架: vue刚收到这个需求的时候整个人都是懵的,然后开始比较深入了解图片的生成原理。一般开发中,后端会直接传一个图片的尾部路径过来,然后我们直接通过拼接去获取。其实这个过程中和我们请求api一样的原理,都是后端返回一个东西,只不过获取图片的话,后端是直接返回‘图片’,我们通过src直接渲染成图片。那我们现在,要在调用的时候,给予一个token请求头。那么直接在src中拼接肯定就不行的啦。看了下网上的方法,几乎用的都是很原始的那种请求方式,以下我将讲解的是我们日常使用的axios请求方式。在我们ap原创 2021-08-23 15:14:46 · 4931 阅读 · 0 评论 -
vue ref 的理解和使用
我们经常使用到ref,但是当别人问你 ref 是什么的时候,是否发现自己竟然说不出来,接下来一起来了解了解下吧~用意:可以通过 ref 为所有的子组件赋予一个 ID 引用。这句话何解呢?看以下两个例子你就明白了:标注单个标签上<div> <p ref="test">你好呀</p> <span>哎呀,你好坏呀</span></div><el-button @click="testBtn">点击</el原创 2021-08-20 11:45:07 · 242 阅读 · 0 评论 -
全局设置loading
文章转自:https://editor.csdn.net/md?not_checkout=1&articleId=119725371在request拦截器中添加loading的配置import { Loading } from 'element-ui'let loadinginstace;// request拦截器service.interceptors.request.use( config => { loadinginstace = Loading.service({转载 2021-08-16 09:19:49 · 1083 阅读 · 0 评论 -
vue-element-admin 导出excel表格
前言基于vue-element-admin作为二次开发后端传回的是文件,再由前端转为链接、下载开始 go~1、vue-element-admin中,做了一个请求拦截,当数据返回文件的时候,会被当做错误拦截住。那么我们此刻要做的是,对于此请求不拦截(请原谅我朴素(其实是不知道专业术语)的语言)。2、接着我们打开谷歌开发者查看下后端穿回来的数据类型:一般传回来的类型都是这样的:但是传回来的文档类型应该是这样的,如果不是的话,你需要找下后端大佬了:3、好的,看到上面两者的区别,那么我们可以原创 2021-08-12 13:47:53 · 854 阅读 · 0 评论 -
JS优化if...else
最近公司要求优化之前项目的代码,去掉if…else…之类的。情况一: if (this.devstate == 1) { this.functionTag = "AA"; this.strValue = 1; } else if (this.devstate == 2) { this.functionTag = "AA"; this.strValue = 0; } else if (this.devstate =原创 2021-07-07 10:18:54 · 1183 阅读 · 0 评论 -
如何将拿到的数据和相对应的数据相匹配
假设后端返回的 "0"为女生,"1"为男生,前端拿到后渲染,如果不用if来渲染 判断,那么应该如何去匹配呢?以下问题则是解决此类问题,尤其是当遇到非常多数字要匹配时,这种方法就比较适合 合理了。data(){ return:{ lala:[ {"sex":0}, {"sex":1}, {"sex":1} ] }}methods:{ let sexObj = { "0":"女生", "1":"男生" } this.lala.foreach(elem =>原创 2021-05-21 16:57:09 · 432 阅读 · 0 评论 -
CSS动态选择展示的样式
需求:当不同状态的时候,显示的颜色不同VUE在html中:// 盒子 根本原理:通过true和false来决定是否显示<div :class="{'showStyle': show, 'unshowStyle':unshow, tt}">{{text}}</div>在script中:data(){ return { text: '你好呀', show: null, unshow: null } },method:{ test(){原创 2021-05-21 15:59:01 · 512 阅读 · 0 评论 -
vue 命名发现------警告图片命名相同
今天在静态文件中放入了两个图片,分别为 HA-99和HAS-99,并且引入。结果发现有警告提示说 在文件夹中已有相同命名的图片。然后我把HA-99改为HA-99L就好了。所以 Vue是只识别 -尾部的那个名称的吗?...原创 2021-05-13 08:57:31 · 269 阅读 · 0 评论 -
echarts+百度地图,单页面中使用百度地图
作为一名已经工作几个月的工程师,已经不能只考虑是否可以实现的问题啦,也得考虑打包后文件大小的问题了。我司实现一个后台管理系统,其中只有一个页面中需要引入高德地图,但是在公共页面中直接加载script的话,会使打包后的文件变大,这是不太妥当的一件事。那么解决途径如下:原方案(在index.html中引入):<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=x6osLar5zHovWUf66slR原创 2021-05-04 10:04:02 · 385 阅读 · 0 评论 -
路由动态重定向
项目是基于vue-element-admin来写的。具体的动态路由实现请参考,上一篇文章,此文章主要介绍动态重定向。代码src/promission.jssrc/login/userloginsrc/promission.jsimport router from './router'import store from './store'// import { Message } from 'element-ui'import { getAccessToken } from '@/utils/a原创 2021-04-19 16:22:04 · 507 阅读 · 1 评论 -
element ui图标使用方法
越简单的东西往往越容易忽略,今天忽然要使用到element ui的图标,忽然发现自己只使用过svg\图片\直接引入和把element ui中的图标放在按钮里使用,如果单纯使用图片还真的有点懵。现记录下使用element ui图标的两种方法。<el-button icon="el-icon-back"></el-button> //此处使用 icon 引入<i class="el-icon-back"></i> //此处使用 class 引入..原创 2021-04-15 08:42:46 · 4909 阅读 · 2 评论 -
vue-admin-template动态路由的实现(超级详细及解决的一些bug)
项目背景:登录的时候,后端在返回token的同时还一并返回用户的登录权限,且我司返回的是一串数组,里面的内容对应每个要显示的路由,没有admin之类的权限。实现流程(具体看代码,超级详细):改变路由结构,分为constantRoutes(静态路由) 和 asyncRoutes(动态路由)给每个路由赋予角色开始实现动态加载啦你好实现过程遇到的bug:登录后刷新,页面变成空白。(已解决,将拿到的角色存储在本地,在使用的时候也从本地拿,即可解决)切换用户,左侧路由权限不变,要刷新一下才可以(原创 2021-04-12 09:34:41 · 6015 阅读 · 4 评论 -
解决vue-element-admin保存数据在localStorage,刷新后被清空的问题
项目需求:登录的时候后台除了返回token,还返回了一个角色列表。除了要存储token,还需要把角色列表保存到localStorage中。出现问题:使用正常操作把角色列表保存到localStorage中,但是一刷新,角色列表就被清空了。解决方法:一、在登录的时候保存角色列表,在此目录下操作:以下直接贴出此文件的代码:注意:主要的逻辑是写了注释的代码const getDefaultState = () => { return { token: getToken(), /原创 2021-03-31 16:43:18 · 1913 阅读 · 0 评论 -
移动鼠标(动态)改变svg图标的颜色
动态改变svg图标的颜色一共三个步骤:删除svg中的颜色属性;在页面引入时给予一个初始颜色;在css中设置变动后的颜色;一、在阿里巴巴矢量图中下载svg格式的图片,然后直接拖动到自己的项目中,保存,然后查看svg代码,然后把设置颜色的 fill元素 删除。goBack-icon.svg<svg t="1616980614484" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www原创 2021-03-29 11:01:36 · 5468 阅读 · 0 评论 -
app扫码登录(前端-vue)
app扫码登录一、实现思路二、效果三、具体实现代码3.1 下载依赖3.2 将qrcodejs2引入二维码登录页面3.3 代码一、实现思路下载二维码生成器(qrcodejs2)的依赖从后端获取到唯一的key值,来生成二维码。有些公司是获取到key值后就直接生成,而有些是要求拼接成链接后再生成,都 没问题的 (下面代码将展示第二种)前端不断轮询,查询二维码登录状态,如(我司是通过返回0-4之间的数字来判断登录状态的)返回的数字为登录成功状态,则登录二、效果三、具体实现代码3.1 下载原创 2021-03-17 11:41:07 · 1519 阅读 · 0 评论 -
vue动态组件的使用
目录1、前言2、项目效果3、目录结构4、具体代码(方法一:不同页面传参)5、具体代码(方法二:同一页面传参)1、前言动态组件:点击按钮切换页面(组件)。动态组件的使用在vue.js文档中也有介绍,但是不是特别的详细,但是新手的话还是建议先看看,点击查看。2、项目效果点击登录方式,如:使用账户/手机/二维码登录,然后点击来回切换登录的页面。3、目录结构在根页面 login/index.js中写页面的公共部分。如登录的标题和切换组件的按钮(在这里,因为form表单不知道怎么提取,所以是写在页面原创 2021-03-09 13:32:12 · 1546 阅读 · 5 评论 -
Object.keys()方法、vue组件间传值
分享文章转载 2021-01-23 16:08:09 · 1885 阅读 · 0 评论 -
element-ui 合并表格,选不同页的时候,格式混乱 爬坑
问题:合并表格,刚打开默认页数的时候,格式没有问题,但是点击另外一页,格式就出现了问题解决:在选择分页和页显示数字中,把spanArr和position重置一、合并表格代码:template中:在table中增加 :span-method=“objectSpanMethod”。script中: getSpanArr (data) { data.forEach((item, index) => { if (index === 0) { this.原创 2021-01-21 14:10:04 · 997 阅读 · 0 评论 -
前端--检查后端返回的信息是否包含某字符串
检查后端返回的信息是否包含某字符串起因:登录到主页面的时候,没有token,并报错 “token无效”。解决:捕捉后端是否返回 “token” 字符串,如果有则强制跳回到登录界面。 // 如果返回的信息包含token字样,则返回登录界面 if ((res.message).includes("token")) { store.dispatch('user/resetToken').then(() => { router.push("/login")原创 2021-01-21 09:29:01 · 632 阅读 · 0 评论 -
消息推送的几种方法
消息推送的几种方法添加链接描述转载 2021-01-19 13:15:11 · 649 阅读 · 0 评论 -
vue和uniapp---设置前置地址
设置前置地址(vue和uniapp)一、vue(这里是在vue脚手架中写的)[这里只是简单的设置前置地址,如需要设置代理地址,则请查阅之前的文章]1、下载axios的依赖:npm install axios2、在main.js中引入:import axios from 'axios'// 配置请求的跟路径axios.defaults.baseURL = 'https://www.kdhindkdj.cn/'//挂载到原型上Vue.prototype.$http = axios3、原创 2021-01-13 15:58:10 · 1565 阅读 · 0 评论 -
css问题汇总
1、外层盒子背景色为灰色,内层盒子背景色为白色,要求:使白色盒子外边露出点灰色。margin失效: 在内层盒子加个margin,来显示出白边,但是失效了。在外层盒子中使用 overflow:hidden 显示出来。<template> <view> <view class="bg"> <view class="bg2">背景色为白色</view> </view> </view></tem原创 2021-01-12 11:34:14 · 273 阅读 · 0 评论 -
以FormData的形式传参
以FormData的形式传参1、普通传参2、传参-数组1、普通传参1.1 data中的数据为数组,且只拿其中的一个 const mNI = new FormData() mNI.append('id', this.upload.fileList[newIndex].banner) //id直接从data中一个个拿 mNI.append('order', this.upload.fileList[newIndex].order) const { data: newRes } = await t原创 2020-12-23 11:30:42 · 13509 阅读 · 0 评论 -
echarts饼图
基本饼图原创 2020-12-23 08:37:15 · 159 阅读 · 0 评论 -
v-region 选择联级框地名,在对应的表格中同时自动填入行政码以及使用注意事项
v-region 选择联级框地名,在对应的表格中同时自动填入行政码下面代码可直接使用,但是请提前下载好 v-region和element ui的依赖v-region需要在main.js中引入:import vRegion from 'v-region'Vue.use(vRegion)element的引入就不多说啦~网上一堆go~帮到你的话,记得点个赞哦~<template > <div class="bg"> <el-form ref=原创 2020-12-22 09:37:28 · 1224 阅读 · 1 评论 -
vue脚手架-上传图片 图片拖拽(draggable)、更新(四)
目录:一、拖拽二、更新先来看下效果,是不是你想要的吧~现在把第四张,拖拽到第二张的位置,是以插入的形式进行的哦开始的时候,预备着就是做个上传、删除的功能,到了后面公司又新增了需求,要求拖拽来改变排序。于是我就想着像这种拖拽的应该会有个插件,然后就找到了这个插件 Vue.Draggable ,我是通过这个来了解draggable的。然后在网上也看了别人的例子,然后很多人的都是把显示图片 添加 删除那些都暴露了出来,意味着我之前写的代码都可能得重写,加上我实现得这个不是就是个上传功能的图片墙,当然原创 2020-12-22 08:29:49 · 1613 阅读 · 1 评论 -
vue脚手架-上传图片 编辑修改图片(三)
需求,点击编辑图案的时候,需要弹出框,里面除了能修改图片信息之外,还得能够更换图片。此篇文章主要讲述如何更换图片,,因为时更改单张图片的,所以特别想更换头像 有没有,因此我使用了element ui中的更换头像的插件来写的。H5中更换图片的部分 <el-upload :http-request="upLoad" :action="upload.action" :show-file-list="false"原创 2020-12-21 16:59:54 · 1197 阅读 · 0 评论 -
vue脚手架-上传图片 点击按钮再上传 (二)
需求:打开文件夹,弹出框(填写内容),然后点击上传按钮 再进行上传上传照片的时候,弹出这个框,然后点击按钮才能实现上传。实现这个的话,那么必须要自定义上传,把功能暴露出来 <template> <div class="bg"> <!-- 上传 --> <el-upload ref="upload" list-type="picture-card" :action="upload.action"原创 2020-12-21 14:28:33 · 884 阅读 · 1 评论 -
element-ui 表单重置 resetField爬坑
注意事项:1、在el-form中必须有 ref=" "2、在el-form-item中必须写prop=“xx” 且xx必须和el-input中的v-model的终值属性名一样3、调用该方法的时候,是resetFields,而不是resetField <el-dialog :visible.sync="dialogVisible" width="30%" @close="dialogClosed" //监控弹框关闭事件 > <el-fo原创 2020-12-14 16:54:56 · 1706 阅读 · 4 评论 -
vue脚手架-上传图片 根据下拉框选择到的不同,显示不一样的图片内容(一)
根据下拉框选择到的内容不同,展示出不一样的图片内容效果:此文章分为三部分来梳理:1、下拉框2、上传图片3、两者如何连接起来该功能使用了element-ui插件来实现,看文章前推荐先去看看官网 ==》 下拉框 、上传图片go~前言:后端传了1-6的数字用来表示不同的数据类型,然后每个类型都有个接口。我的下拉框需要显示这六个图片类型供选择。然后根据下拉框选择的不同来展示对应的图片类型。思路:下拉框:根据图片类型,把六个类型都显示出来1、下拉框 <el-form>g原创 2020-12-11 10:06:52 · 2429 阅读 · 0 评论 -
vue 粒子动态背景vue-particles
粒子动态背景官网,官网的功能那些说的很详细了,推荐大家直接看官网下载依赖:npm install vue-particles --save-dev引入:import Vue from 'vue'import VueParticles from 'vue-particles'Vue.use(VueParticles)实例:<vue-particles color="#ff9b04" :particleOpacity="0.8" :particlesN原创 2020-12-10 16:31:46 · 417 阅读 · 0 评论