![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
项目
文章平均质量分 62
酌白楼
这个作者很懒,什么都没留下…
展开
-
前端开发中,实现动态改变css样式的几种方式
动态展示css样式原创 2022-08-10 17:58:54 · 3643 阅读 · 0 评论 -
使用aggird组件实现下滑请求分页从而实现无限滚动的效果
我们弄清楚了getRow里面的逻辑,现在我们来实现滚动分页,代码太多,大家的场景也可能不同,我就说一下思路。设定pagesize=1,pageindex=100,startRow=0,endRow=10,截取的范围是10条,然后在getRow里面让this.startRow+=10,this.endRow+=10,this.pagesize++通过vue的双向绑定原理实现startRow,endRow,pagesize动态变化,重点来了,当我们的endRow为100时,就触发了判断。...原创 2022-08-04 18:10:34 · 2021 阅读 · 0 评论 -
vue中在mounted中v _this=this作用及案例解析
v_this只是一个变量名,this代表父函数,如果在子函数还用this,this的指向就变成子函数了,v_this就是用来存储指向的。普通函数中的this表示调用此函数时的对象,箭头函数里面的this会继承自外部的this,普通函数中的this并不会向上继续找对象,箭头函数中会往上寻找this,直到找到所代表的this为止箭头函数的this永远指向其父作用域,任何方法都改变不了,包括call,apply,bind普通函数的this指向调用它的那个对象举个例子在开发中遇到了这样的问题,需要点击原创 2022-04-20 09:19:52 · 1008 阅读 · 0 评论 -
解决iframe标签嵌入一个现有的网站无法登录的问题
以iframe标签嵌入一个现有的网站到项目中,嵌入的网站无法正常登录,直接在浏览器地址栏输入url并登录是正常的。于是开始探索…问题分析由于后续接口提示401,判断是登录接口鉴权失败导致的,于是观察登录接口的请求响应,发现了端倪:翻译为大白话就是:写入Cookie失败。原因是没有显式设置cookie的samesite属性,导致被默认为Lax,又因为响应的接口属于非顶层导航的跨站请求,浏览器将其屏蔽了!这个提示包含了两个信息:设置cookie时有个连带的SameSite属性top-level-na转载 2022-01-25 10:38:13 · 6166 阅读 · 0 评论 -
vue项目中商品规格判断是否可以选取
★规格组件-SKU&SPU概念官方话术:SPU(Standard Product Unit):标准化产品单元。是商品信息聚合的最小单位,是一组可复用、易检索的标准化信息的集合,该集合描述了一个产品的特性。通俗点讲,属性值、特性相同的商品就可以称为一个SPU。SKU(Stock Keeping Unit)库存量单位,即库存进出计量的单位, 可以是以件、盒、托盘等为单位。SKU是物理上不可分割的最小存货单元。在使用时要根据不同业态,不同管理模式来处理。总结一下:spu代表一种商品,拥有很原创 2021-09-24 16:16:28 · 578 阅读 · 0 评论 -
vue3写省市镇三级联动组件
<template> <div class="xtx-city" ref="target"> <div class="select" @click="toggle" :class="{active:isShow}"> <span v-if='!fullLocation' class="placeholder">请选择配送地址</span> <span v-else class="value">{{fu原创 2021-09-22 22:52:06 · 1010 阅读 · 0 评论 -
vue3面包屑组件
顶级类目-面包屑组件终极版,使用render函数自己进行拼接创建。createElement render render选项与h函数指定组件显示的内容:new Vue({选项})el 选项,通过一个选择器找到容器,容器内容就是组件内容template 选项,<div>组件内容</div> 作为组件内容render选项,它是一个函数,函数回默认传人createElement的函数(h),这个函数用来创建结构,再render函数返回渲染为组件内容。它的优先级更高。原创 2021-09-18 22:48:33 · 663 阅读 · 0 评论 -
vue3实现图片的懒加载
实现数据懒加载在前面文章有写。实现图片懒加载,思路是监听图片进入视口区域时给图片src添加图片地址,注册vue3的自定义属性来传递图片地址的值。现在开始写敲代码。// 图片加载不出来时显示的图片import defaultImg from '@/assets/images/200.png'const defineDirective = (app) => { // 扩展自定义指令 app.directive('lazyload', { // Vue2规则 :vue.direct原创 2021-09-16 20:13:08 · 1695 阅读 · 1 评论 -
在vue3中用原生js写一个轮播图组件
<template> <div class='xtx-carousel' @mouseenter="stop()" @mouseleave="start()"> <ul class="carousel-body"> <li class="carousel-item" v-for="(item,i) in sliders" :key="i" :class="{fade:index===i}"> <RouterLink原创 2021-09-15 23:48:04 · 481 阅读 · 0 评论 -
做vue3项目中如何实现数据的懒加载
写在前面目标:现在vue3的使用越来越普遍了,vue3这方面的学习我们要赶上,今天说一下我们做vue3时如何实现数据的懒加载我们可以使用 @vueuse/core 中的 useIntersectionObserver 来实现监听进入可视区域行为,但是必须配合vue3.0的组合API的方式才能实现。大致步骤:理解 useIntersectionObserver 的使用,各个参数的含义改造 home-new 组件成为数据懒加载,掌握 useIntersectionObserver 函数的用法原创 2021-09-15 23:12:27 · 984 阅读 · 0 评论 -
this.$listeners在vue项目中的使用
写在前面在我们写项目的过程中,经常碰到要做增删改查的功能,这些其中像添加,修改,预览这些功能弹出的界面简单就直接写,但一般情况下我们都需要单独封装一个子组件,并将其引入主页面也就是父组件中使用。我发现这些功能最后在提交确认时都需要有关闭弹窗并且重新渲染数据的过程,一般我们会使用子传父this.$emit(‘xxxx’,xxxx)来调用父组件中的关闭弹窗和重新渲染页面的功能,就很麻烦,所以我们来看看this.$listeners在vue项目中的使用this.$listeners: 自动会收集所有加在这原创 2021-09-09 00:34:57 · 3201 阅读 · 0 评论 -
Vue 使用 video 标签实现视频播放
写在前面我们在做项目时常常会碰到要做在页面播放视频的功能,该功能我们可以用video.js来做关于video.jsvideo.js是一个拥有h5背景的网络视频播放器,同时支持h5以及Flash视频播放(可加载本地静态资源视频以及网络链接视频安装npm install video.js复制代码在main.js中引入import Video from 'video.js'import 'video.js/dist/video-js.css'Vue.prototype.$video = V原创 2021-09-04 18:36:01 · 14974 阅读 · 1 评论 -
前端做页面登录功能的一般思路、登录请求如何发出
一般都用vue写,可以从vant组件或者element-ui组件找个登录的from表单,写完css样式,设置校验规则,一种是非空的校验,一种是判断用户输入是否合法的校验,然后就是铺数据,这里一般用ajax发,一般都是用的模块化的思想来单独封装请求,发送后获取到token的数据,token除了登录页面别的页面想实现数据请求一般都要带,所以我们把token放到vuex中的state里,用mutations里定义的方法来修改state中的数据,因为vuex中存贮的数据是存在内存里刷新后就没有了所以我们要把toke原创 2021-08-07 21:35:27 · 3043 阅读 · 0 评论