vue
文章平均质量分 53
推开世界的门
掘金地址:https://juejin.cn/user/2963939081585479/posts
展开
-
vue3 根据点击位置,实现一个用户头像弹框定位
最近在做直播后台,涉及到对用户的一些操作,比如关注/取关/禁言/踢出直播间。多个地方都要用,需要封装一个弹框组件。原创 2024-01-26 12:06:15 · 812 阅读 · 0 评论 -
rrweb入门
rrweb是,是当下很流行的一个录制屏幕的开源库。与我们传统认知的录屏方式(如 WebRTC)不同的是,rrweb 录制的不是真正的视频流,而是一个记录页面 DOM 变化的 JSON 数组,因此不能录制整个显示器的屏幕,只能录制浏览器的一个页签(录屏)。原创 2023-09-07 18:05:56 · 1652 阅读 · 1 评论 -
Vue中构造数组数据-map和forEach方法梳理
数组操作是前端最重要的数据操作,构造数组数据,又是数组操作中很常见的。本文将梳理下map和forEach方法在Vue项目中的使用。想要深入理解这两个方法,一定要手写几次简易的实现,理解其中的要义。这里只考虑核心部分,一些边界问题就忽略了。一、手写实现简易map方法:Array.prototype.myMap = function(callback) {const res = [];for (let i = 0; i < this.length; i++) {// 这里将回调函数的执行结果原创 2022-01-27 14:44:05 · 3333 阅读 · 0 评论 -
一次敏感词检测开发记录
需求用户上传execl,前端解析excel ,解析之后,将excel的json数据,传给后端,后端通过关键字检测算法,返回你之前传的数据,并且附件敏感字。然后前端渲染数据只table。并且用户以到excel形式下载table表格数据。没看错,全程后端就是对敏感词检测,excel 解析 ,下载,都是前端来做。我们一步一步来分析步骤一 界面编写界面编写 就是element一梭子 <!-- 上传文件按钮界面 --> <div class="buttonBox">原创 2021-12-10 19:35:02 · 1389 阅读 · 0 评论 -
js根据时间多少,计算该显示年月日
getTime() { getTime( '', (res) => { console.log('系统时间', res.data.data.time_now) this.nowTime = res.data.data.time_now this.orderData.forEach((val, index) => { let newTime = (val.expire_.原创 2021-08-27 17:10:43 · 214 阅读 · 0 评论 -
vue系列
MVVM的理解响应式数据的原理vue中如何检测数组的变化更改了数组的原型对数组新增的每一项进行监控,如果是新增的对象,则继续监控(Observer)vue为什么需要虚拟domvirtual DOM 就是用js对象来描述真是的DOM,是真是dom的抽象由于直接操作DOM的性能低,但是js层的效率高,可以将dom转化为对象操作,最终通过diff算法比对差异进行更新dom(减少对真实dom的操作)虚拟dom不依赖真实平台环境,从而可是实现跨平台...原创 2021-08-18 15:08:33 · 105 阅读 · 0 评论 -
2021前端查漏补缺和进阶实操
vuevue响应式原理原创 2021-08-11 16:46:55 · 132 阅读 · 0 评论 -
2021-08-11
Vue2的数据响应式原理1、什么是defineProperty?defineProperty是设置对象属性,利用属性里的set和get实现了响应式双向绑定;语法:Object.defineProperty(要设置的对象,要修改的对象的属性,属性描述)属性描述:1、configurable - 表示此属性能否被delete,默认false;2、enumerable - 表示此属性能否被枚举,默认为false;3、value - 设置此属性对应的值,默认为undefined;4、writable原创 2021-08-11 16:43:32 · 111 阅读 · 0 评论 -
vue2.x响应式原理
vue2.x响应式原理前言响应式也就是我们平常说的MVVM架构具体体现的一种形式。通过数据驱动视图,告别jq时代的dom操作。vue直接操作数据,就可以更新视图,这就是响应式。vue2.x的响应式原理,主要是利用了Object.defineProperty的get和set来实现数据的修改和劫持。但是仅仅依赖这一个API是远远不够的,所以就有了VUE官网的这一张图。不懂也没关系,这毕竟是尤大大的思想精髓之处,我们慢慢理解今天让我们用对话的方式来一步一步实现这个响应式原理x: vue的响应式原理原创 2021-08-09 15:17:14 · 115 阅读 · 0 评论 -
vue中keepalive的使用
App.vue写2个 router-view 出口<keep-alive> <!-- 需要缓存的视图组件 --> <router-view v-if="$route.meta.keepAlive"> </router-view></keep-alive><!-- 不需要缓存的视图组件 --><router-view v-if="!$route.meta.keepAlive"></router原创 2021-07-27 11:26:46 · 279 阅读 · 0 评论 -
vue中进行浏览器的赋值功能
getCopy() { let oInput = document.createElement('input'); // 创建一个input oInput.value = this.address;// 进行数据赋值this.address是要赋值的数据 document.body.appendChild(oInput); oInput.select(); // 选择对象; console.log(oInput.value) .原创 2021-07-27 10:45:12 · 471 阅读 · 0 评论 -
vue中关于src,class,style的三元表达式的使用
src,class中三元表达式的使用说明根据不同的路由,进行选中态的切换。并且进行图片的替换代码 <div :class="[ $route.path == '/home' ? 'header-main-li header-newclass' : 'header-main-li', ]" @click="getRoute('/home')" >原创 2021-07-27 10:39:07 · 3085 阅读 · 0 评论 -
vue项目中使用 Echarts的一些总结,包括饼图,折现图,折柱混图,年月日切换
先奉上官网地址,一切以官网为主Echrts官网Echarts的基本使用安装cnpm i echarts -S全局使用在main.js中引入,然后用变量,将其挂载到vue的原型上import echarts from 'echarts'Vue.prototype.$echarts = echarts在组件中,就可以直接使用this.$echarts.init()稍后会说按需引入下面来说一个我在项目中的总结先看这个图 折柱混合首先是对数据的处理我们首先是要在页面画原创 2021-07-23 17:49:51 · 2754 阅读 · 10 评论 -
vue 求上一周,周一,周日的日期
需求请求接口,但是必须是上一周,周一到周日的日期,比如今天是2021.7.23 ,周五。因为是周五,所以我请求接口要用上一周,周一到周日的日期。那经过计算,上周周一对应的日期是 2021.7.12。上周周日对应的日期是2021.7.18.那这两个日期就是要求的日期下面开始代码实现created() { this.getDays(); }, methods:{ getDays() { var day1 = new Date(); var day2 = new原创 2021-07-23 18:45:18 · 715 阅读 · 0 评论 -
vue 项目里的基本操作
一 样式class,styletab切换样式 <div class="buy-ways cursor marginRight" :class="{ activeSty: activeWay === 1 }" @click="getWay(1)"> <img src="../../assets/image/zhifubao-3.png" alt="" /> <span>支付宝</span> </div&原创 2021-02-25 19:50:31 · 253 阅读 · 1 评论 -
vue 多环境打包
package.json默认配置"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" },改为"scripts": { "serve": "vue-cli-service serve --mode development", "build": "vue-cli-service build原创 2021-02-25 11:15:07 · 199 阅读 · 0 评论 -
vue 封装button组件
<template> <div> <div class="login-btn cursor" :class="myClass" :style="{ opacity: opacity }" @click="debounce"> <span :class="['s']">{{ text }}</span> </div> </div></template><script&原创 2021-02-24 14:33:03 · 268 阅读 · 0 评论 -
sessionStorage,localStorie,cookie的使用选择
sessionStorage,localStorage,cookie 虽然用的多,但是我现在也遇到一些问题如果登录状态,同一标签下共享数据,把网址复制粘贴到新打开的标签页里,依旧可以打开(sessionStorage不满足)如果登录的时候选了十天免登陆,那我十天之后,怎么清除账号密码,(localStorage永久有效的,除非手动改清除,但是api并没有提供时间记录)sessionStorage只能在同一标签下共享,把网址复制粘贴到新打开的标签页里面,你会惊喜的发现,what?居然不共享。原创 2021-02-06 16:55:45 · 303 阅读 · 1 评论 -
el-checkbox 三级联动实现,有图有数据
el-checkbox 三级联动实现,一层数据结构和两层数据结构的同步选中取消效果图点击获取数据,即可获取当前选中所有的id代码<template> <div style="display: flex"> <div> <el-checkbox v-model="AllChecked" @change="allHandle">全选</el-checkbox> <div v-for="(item, i原创 2021-01-14 19:11:20 · 1151 阅读 · 0 评论 -
vue element ui 弹框组件里的el-input如何自动聚焦
vue element ui中 弹框组件里的el-input如何自动聚打开弹窗时,跟上如下代码。 this.$nextTick(function(){ this.$refs['siteInput'].focus(); })this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。...原创 2020-12-28 16:04:19 · 2208 阅读 · 0 评论 -
vue element 搜索,分页 ,优化,其他一些技巧
涉及到单个查询,联合查询,分页等功能。出一个接口,后面坠不同参数,只需要监听url参数的变化,或者本身传递的参数。将url参数的变化,作为查询的条件。出发点:通过beforeRouteUpdate,对路由变化进行监控 beforeRouteUpdate(to, from, next) { // 如果路径一样,说明才是进行搜索,或者分页的数据 if (to.path === from.path) { // 对参数对象,进行拷贝 const newQu原创 2020-12-05 15:23:10 · 573 阅读 · 0 评论 -
小程序 uniapp 实现pdf 电子合同签名 并导出功能
小程序 uniapp 实现pdf 电子合同签名 并导出功能需求流程:用户只允许上传pdf后端将上传后的pdf以base64图片的形式返回用户设置签名的位置位置设置完成,将电子签名放到设定的位置处利用canvas将两张图片合成一张图片,保存至相册实操代码实现:...原创 2020-12-04 17:16:00 · 24851 阅读 · 109 评论 -
vue基于element-ui二次封装分页组件和一些优化
先来看一下整体的需求分析有表格的地方,就有分页,怎么做到表格样式统一多个分页,代码重复,如何减少代码重复地址栏输入页码,如何去通知当前分页状态的改变刷新之后,如何保持当前页面分页数据(不回到最初)怎样更少的将数据监听,不会都挂载到data上(抽取成方法)beforeRouteUpdate ,computed, watch 的使用,提高代码的质量element-ui的分组组件提供的四个事件1.组件封装 把需要的属性提取出来<template> <div class原创 2020-11-19 20:02:44 · 533 阅读 · 0 评论 -
慕课小慕读书后台总结
登录输入框,如果没有数据自动聚焦mounted() { if (this.loginForm.username === "") { this.$refs.username.focus(); } else if (this.loginForm.password === "") { this.$refs.password.focus(); } },密码框的显示影藏切换 :icon-class="passwordType === 'passwor.原创 2020-11-17 16:09:45 · 669 阅读 · 0 评论 -
存证小程序--开发记录
1:原创 2020-11-06 19:53:49 · 824 阅读 · 0 评论 -
慕课从零开发电商总结
1: vuex的使用原创 2020-11-03 09:17:35 · 779 阅读 · 0 评论 -
项目中常用的element样式修改,功能实现 --持续更新
10.17记录el-timeline专区实现功能:大环节嵌套小环节。若小环节只有一条数据,则不竖线显示。小环节最后一条数据,也不显示竖线 <el-timeline> <el-timeline-item v-for="(activity, index) in outWrapList" :key="index" :timestamp="activity.Name" placement="top"> <!-- {{outWrapLis原创 2020-10-17 16:01:41 · 1295 阅读 · 2 评论 -
项目中常用的js技巧--持续更新
10.17记录数据的截取给定一个字符串,将字符串根据指定的符号进行分割,并且取出分割后的结果let str ='b90812ad;117'let pre = str.substr(0, str.indexOf(';'))console.log(pre) // b90812adlet next = str.substr(str.indexOf(';') + 1, str.length)console.log(next) // 117数据的修改后端返回的base64图片数据,没有带 'dat原创 2020-10-17 15:26:51 · 254 阅读 · 0 评论 -
uniapp 实现图片预览 单图预览和多图预览
uniapp 实现图片预览 单图预览和多图预览关键点就是调用uni.previewImage({ current: index, urls: photoList });如果是单图预览,current对应就是0,urls:必须是单个某一条传入。因为现在预览一张图片,你的current传死就是0.所以urls也必须是字符串形式如果是多图预览,current,对应就是在循环图片数据的索引,urls: 是数组形式传入。因为uni.previewImage 要根据 current的索引,来原创 2020-10-17 14:46:50 · 7100 阅读 · 0 评论 -
uniapp 收藏功能实现及组件封装
文章目录前言一、uniapp小程序收藏功能思路分析:1 父组件向子组件传值2 子组件接收到值,将数据初始化子组件利用属性绑定,根据当前的type值来显示已收藏还是未收藏点击收藏,切换状态,并且调用更新数据接口使用步骤引入uniapp中的icons前言一、uniapp小程序收藏功能思路分析:父组件引入子组件.并且父组件通过属性绑定向子组件传递数据子组件利用props来接收父组件传来的值,并且进行数据数据初始化赋值子组件利用属性绑定,根据当前的type值来显示已收藏还是未收藏点击收藏,切换状态原创 2020-10-12 14:57:28 · 5250 阅读 · 3 评论 -
uniapp
顶部导航1: 外部100%, flex2:scroll-view 部分 flex: 1 overflow: hidden 高度 padding3: 右侧固定宽度4: 伪元素 : 给top bottom 不用给height<view class="tab"> <scroll-view class="tab-scroll" scroll-x> <view class="tab-scroll__box"> <view v-for="(item,原创 2020-10-07 08:13:13 · 535 阅读 · 0 评论 -
vue 实现排他效果的折叠 最简单的方法
实现排他效果的折叠提示:本文通过最简单的方式实现最常用的折叠效果文章目录实现排他效果的折叠前言一、实现流程总结前言提示:一、实现流程示例:数据条件 :第一次进入,都是处于折叠效果。所以当前点击索引在初始化的时候,就初始化成空串,如果想默认展开第一项,那你把当前点击索引初始化成0 即可2: 判断展开折叠条件基本的 v-if 即可2. 写到这,大家基本都能实现一个基本的展开折叠,如图你会发现,是可以折叠了,因为判断的依据是当前点击的索引=== 循环的索引。但是会存在一原创 2020-09-18 20:59:30 · 691 阅读 · 0 评论 -
vue关掉.eslintrc格式校验
在项目中,新建vue.config.js添加如下代码module.exports = { lintOnSave: false // 关掉代码校验};原创 2020-09-15 10:33:13 · 1307 阅读 · 0 评论 -
前端获取 时间戳
new Date().getTime() 获取到的是数字后端传值,这个地方要字符串直接 + ''new Date().getTime() + '原创 2020-09-12 14:42:05 · 5316 阅读 · 0 评论 -
element 数据分页,后端什么也不管的分页
系列文章目录提示:例如:第一章 Python 机器学习入门之pandas的使用提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录系列文章目录前言一、pandas是什么?二、使用步骤1.引入库2.读入数据总结前言提示:这里可以添加本文要记录的大概内容:例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。提示:以下是本篇文章正文内容,下面案例可供参考一、pandas是什么?示例:pandas 是原创 2020-09-12 14:31:52 · 421 阅读 · 0 评论 -
vue-axios中拦截器加了token 和其他字段,但是有的接口请求的时候不需要带token和其他字段,怎么操作?
项目场景:vue-axios中加了拦截器token ,和其他字段,但是有的接口请求的时候不需要带token和其他字段,怎么操作?问题描述:提示:我做的是两套系统,一套系统目前做了鉴权处理,一套不带鉴权处理。现在要在带鉴权处理的系统,用不带鉴权处理系统的一个接口例如:APP 中接收数据代码:import axios from 'axios'axios.interceptors.request.use( config => { // 这里的config包含每次请求的内容 c原创 2020-09-12 10:49:19 · 2734 阅读 · 0 评论 -
element 的 el-table中 超出就隐藏并且显示省略号,不要弹框提示
项目场景: 就是一个超出隐藏,只不过是在element的表格中而已解决方案:首先超出隐藏,无非就是几行代码而已overflow:hidden; //超出的文本隐藏text-overflow:ellipsis; //溢出用省略号显示white-space:nowrap; //溢出不换行但是他的前提是,你得设定宽度下面开始说正题这个地方为什么换行,应为他设置的是默认值white-space: normal; // 换行我们给他设置成 nowrap 不就不换行了可以在全局css原创 2020-09-11 16:47:35 · 8146 阅读 · 3 评论 -
element el-select 两个选择框存在所属关系(二级下拉)
需求有A,B两个品牌,A品牌下面,是A的商品。B品牌下面,是B的商品。选了品牌之后,才可以选商品数据结构效果图分析只有选了品牌商,才知道这个品牌商下面要放什么商品的数据品牌商被选中这个时机是怎么触发的根据什么条件,去做品牌商的商品的一个匹配实现触发品牌商被选中的时机,是一个@change=""事件。这个事件里面的方法默认会带一个参数,就是你所选中品牌的code(这个值也是你要传给后端的)然后去循环你的数据,通过code找出,当前点击的是哪个品牌然后将当前品牌里的商品,进行赋值原创 2020-09-09 07:02:19 · 1452 阅读 · 0 评论 -
Echarts动态加载折线图 x轴,y轴数据,阴影部分
需求制作折线图x轴动态显示最近14天的日期y轴根据x轴日期所对应的数据,动态显示数据所在区间。鼠标移入,显示日期对应的数据。所有有数据的地方,用折线连接,并且用阴影覆盖效果图具体实现安装echartsnpm install echarts -S引入echarts为了节省空间,这里采用按需引用const echarts = require('echarts/lib/echarts')require('echarts/lib/chart/line')require('ech原创 2020-08-07 11:36:25 · 2916 阅读 · 0 评论 -
vue 前几位显示数据,中间用 *** ,后几位显示数据
需求一行数据太长,但是想要显示起来美观一些,那就前面,后面,显示固定位数。中间用***显示之前现在具体实现代码利用fliter过滤器{{item.BlockHash | testfile}}第一个参数是显示的字段数据参数,第二个是过滤器函数的名字过滤函数filter,是与mounted,created平级位置// 数字中间加*号 value是传的参数值(后端返回的,需要你处理的数据) filters: { testfile (value) { const sta原创 2020-07-31 16:09:16 · 1955 阅读 · 0 评论