Vue
文章平均质量分 51
卡洛背心
前端攻城狮,记录工作的点点滴滴。
展开
-
Vue3+Element Plue+Ts实现表单的基础搜索、重置等功能
从Vue2的写法转变为Vue3的格式之后,会有一些写法和代码结构的改变,这里对一些重点进行介绍。代码结构:写法一(推荐):<script setup lang="ts">import { ref, reactive } from 'vue'import type { ElForm } from 'element-plus'const myform = ref<InstanceType<typeof ElForm>>()const formData = .原创 2021-12-20 19:28:13 · 3235 阅读 · 1 评论 -
Vue3后台项目实现一键全屏缩放功能
今天分享使用screenfull实现全屏功能!效果图全屏前全屏后第一步安装 screenfull$ npm install screenfull第二步封装screenfull,用户体验更好<!-- * @Author: your name * @Date: 2021-10-28 19:31:51 * @LastEditTime: 2021-10-28 19:56:25 * @LastEditors: Please set LastEditors * @Descri.原创 2021-10-28 20:04:30 · 624 阅读 · 0 评论 -
使用el-upload上传图片,改造预览功能
今天给大家介绍一下在使用Element的el-upload上传图片的过程中,改造原有的预览功能。官网预览效果图:改造之后的预览效果:区别如下官网的预览效果,只能单纯预览当前图片改造之后,可以对预览图片进行放大、缩小、旋转、下一张等操作实现代码<el-upload action="#" multiple list-type="picture-card" :class="{'is-not-allow-access':picIDListCount>原创 2021-10-24 18:18:25 · 5091 阅读 · 3 评论 -
Vue事件修饰符和按键修饰符用法总结
今天给大家介绍Vue的事件修饰符、按键修饰符 、 鼠标修饰符!事件修饰符stop 阻止事件继续传播 <div @click.stop="handleClick">hello word</div>prevent 阻止标签默认行为 <div @click.prevent="handleClick">hello word</div>capture 使用事件捕获模式,即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理原创 2021-10-20 17:46:34 · 466 阅读 · 0 评论 -
借助axios的拦截器实现Vue.js中登陆状态校验的思路
在做Vue中的登陆校验时,思路应该是这样的:先确定一个路由页面是否需要登陆才能访问,如果需要,就需要用户登陆,如果不需要,用户直接可以访问。那么,首先来说,后台系统中,不一定每一个页面都要进行登陆权限,所以我们要通过路由的meta标签对需要做校验的路由页面做好标记,在配置路由时,我们可以在meta属性中,加入是否需要登陆的字段,如果requireAuth是true,就说明这条路由需要登陆才能访问:{ path: '/userInfo', name: 'userInfo', meta: ..原创 2021-07-19 18:43:30 · 311 阅读 · 2 评论 -
为什么Vue中的slot不能应用v-show指令
今天偶然发现,在Vue中使用插槽slot,是无法通过v-show控制slot的显示的,来看代码Vue.component('fade', { props: ['show'], template: ` <transition @before-enter="handleBeforeEnter" @enter="handleEnter"> <slot v-show="show"></slot> <原创 2021-07-19 18:39:05 · 914 阅读 · 0 评论 -
Vue中如何使用null去避免空的class
使用Vue时候, 给class动态绑定类名的时候,如果传入了一个 ’ ’ (空的字符串),可能导致DOM输出一个空的class。通过三元表达式,用null代替 ’ ’ ,将不会生成一个空的class。<!-- 不建议 --><div :class="isBold ? 'bold' : ''"></div><!-- <div class> --><!-- 推荐写法 --><div:class ="isBold?..原创 2021-07-19 14:36:17 · 310 阅读 · 1 评论 -
Vue使用自定义指令实现页面图片懒加载功能
Vue使用自定义指令实现页面图片懒加载功能项目场景实现思路实现效果实现代码项目场景当我们向下滚动的时候图片资源才被请求到,这也就是我们本次要实现的效果,进入页面的时候,只请求可视区域的图片资源这也就是懒加载。比如我们加载一个页面,这个页面很长很长,长到我们的浏览器可视区域装不下,那么懒加载就是优先加载可视区域的内容,其他部分等进入了可视区域在加载。这个功能非常常见,你打开淘宝的首页,向下滚动,就会看到会有图片不断的加载;你在百度中搜索图片,结果肯定成千上万条,不可能所有的都一下子加载出来的,很重要.原创 2021-06-03 15:41:04 · 708 阅读 · 1 评论 -
Vue使用自定义指令实现按钮在区域内任意拖拽移动
Vue使用自定义指令实现按钮在区域内任意拖拽移动项目场景实现思路实现效果实现代码项目场景实现一个按钮,然后这个按钮可以在页面范围内,被拖拽到任意位置。实现思路实现父子两个div,并且设置需要拖拽的子元素为相对定位,其父元素为绝对定位当鼠标按下(onmousedown)时,记录此时目标元素当前的 left 和 top 值在鼠标移动(onmousemove)的过程中,计算每次移动的横向距离和纵向距离的变化值,然后实时并改变元素的 left 和 top 值最后,鼠标松开(onmouseup)时.原创 2021-06-02 18:41:48 · 2111 阅读 · 3 评论 -
Vue使用自定义指令实现页面底部加水印功能
Vue使用自定义指令实现页面底部加水印功能项目场景实现思路实现效果实现代码项目场景给项目的整个背景加上自定义水印,可以改变水印的文案和字体颜色等实现思路这里使用的技术主要是canvas,在实现水印的过程中,通过canvas 特性生成 base64 格式的图片文件使用 canvas 特性生成 base64 格式的图片文件,然后设置其字体大小,颜色等最后将其设置为背景图片,这就实现了页面的水印效果实现效果实现代码<template> <div> &l.原创 2021-06-02 17:54:38 · 524 阅读 · 1 评论 -
Vue使用自定义指令实现按钮防抖功能,防止多次调接口
Vue使用自定义指令实现按钮长按提示功能,超简单!项目场景实现思路实现效果实现代码项目场景需求:实现长按,用户需要按下并按住按钮几秒钟,触发相应的事件实现思路创建一个计时器,2 秒后执行函数 当用户按下按钮时触发 mousedown 事件,启动计时器;用户松开按钮时调用 mouseout事件如果 mouseup 事件 2 秒内被触发,就清除计时器,当作一个普通的点击事件如果计时器没有在 2 秒内清除,则判定为一次长按,可以执行关联的函数。在移动端要考虑 touchstart,touche.原创 2021-06-02 17:36:09 · 1373 阅读 · 1 评论 -
Vue使用自定义指令实现按钮长按提示功能,超简单!
Vue使用自定义指令实现按钮长按提示功能,超简单!项目场景实现思路实现效果实现代码项目场景需求:实现长按,用户需要按下并按住按钮几秒钟,触发相应的事件实现思路创建一个计时器,2 秒后执行函数 当用户按下按钮时触发 mousedown 事件,启动计时器;用户松开按钮时调用 mouseout事件如果 mouseup 事件 2 秒内被触发,就清除计时器,当作一个普通的点击事件如果计时器没有在 2 秒内清除,则判定为一次长按,可以执行关联的函数。在移动端要考虑 touchstart,touche.原创 2021-06-02 16:07:42 · 1336 阅读 · 5 评论 -
Vue使用自定义指令实现点击复制功能,超简单!
Vue使用自定义指令实现点击复制功能,超简单!项目场景实现思路实现效果实现代码项目场景需求:实现一键复制文本内容,用于鼠标右键粘贴。实现思路动态创建 textarea 标签,并设置 readOnly 属性及移出可视区域将要复制的值赋给 textarea 标签的 value 属性,并插入到 body选中值 textarea 并复制将 body 中插入的 textarea 移除在第一次调用时绑定事件,在解绑时移除事件实现效果实现代码<template> <di.原创 2021-06-02 15:54:15 · 688 阅读 · 0 评论 -
前后端如何解决跨域问题
解决跨域问题什么情况下会跨域前端解决跨域后端解决跨域什么情况下会跨域同源策略同源策略是浏览器的行为,是为了保护本地数据不被JavaScript代码获取回来的数据污染,因此拦截的是客户端发出的请求回来的数据接收,即请求发送了,服务器响应了,但是无法被浏览器接收。参数原因:由 Netscape 公司 1995 年引入浏览器,它是浏览器最核心也最基本的安全功能,现在所有支持 JavaScript 的浏览器都会使用这个策略。如果缺少了同源策略,浏览器很容易受到 XSS、 CSFR 等攻击。跨域跨域就是原创 2021-05-17 11:09:04 · 1516 阅读 · 0 评论 -
Vue.js实现动态修改页面的标题
业务需求,进入页面的时候,网页有个默认标题,加载的网页内容不同时,标题需要变更. 例:首页,详情页,个人中心等。Vue下有很多的方式去修改网页标题,这里总结下解决此问题的两种方案:方案一(不推荐)结合业务直接在Vue生命周期函数 created 中,给 document.title赋值。<script>import axios from 'axios'export default { created () { document.title = '功能授权' }}.原创 2021-05-08 11:36:29 · 1036 阅读 · 0 评论 -
Vue.js的Object.defineProperty对比Proxy,究竟差在哪里?
Vue.js 区别于 React 的一大特色是它的数据是响应式的,这个特性从 Vue.js 1.x 版本就一直伴随着,这也是 Vue.js 粉喜欢 Vue.js 的原因之一,DOM 是数据的一种映射,数据发生变化后可以自动更新 DOM,用户只需要专注于数据的修改,没有其余的心智负担。在 Vue.js 内部,想实现这个功能是要付出一定代价的,那就是必须劫持数据的访问和更新。其实这点很好理解,当数据改变后,为了自动更新 DOM,那么就必须劫持数据的更新,也就是说当数据发生改变后能自动执行一些代码去更新 DOM原创 2021-05-07 14:39:49 · 368 阅读 · 2 评论 -
Vue子组件调用父组件的方法及传值
//父组件<template> <div class="home"> <HelloWorld ref="mychild"></HelloWorld> <div @click="clickParent">click me</div> </div></template><script> import HelloWorld from '@/components/HelloW原创 2021-04-14 18:11:42 · 1001 阅读 · 0 评论 -
Vue.js前端开发规范
readme的使用因为一个项目往往需要很多人一起协助开发,还有可能会不断有新手接手项目,所以readme里面一定要仅可能多的信息项目启动命令代码规范组件规范目录结构常遇到的问题及解决方案代码规范Commit Message 编写规范编写Commit Message需要遵循一定的范式,内容应该清晰明了,指明本次提交的目的,便于日后追踪问题。feat: 新功能fix: 修补bugdocs: 文档style: 格式(不影响代码运行的变动)refactor: 重构test: 添加测原创 2021-04-12 17:25:27 · 196 阅读 · 0 评论 -
Vue实现点击按钮复制文本内容(不需要引入插件)
Vue实现点击按钮复制文本内容原创 2021-01-08 19:05:22 · 640 阅读 · 0 评论 -
Vue中data的一个值关联到this.$router.query,解决路由变化, data中的值不变
问题描述:想根据不同用户的id请求到不同用户的信息。但是始终只能请求到第一个。在上个页面中使用this.$router.push()进行页面跳转使用this.$router.query在路由中传递需要的值handleClickEdit (row) { this.$router.push({ path: '/refundManagement/singleDetail', query: { orderId: row.id .原创 2020-12-24 10:44:53 · 1337 阅读 · 0 评论 -
Vue.js使用ElementUI实现自定义表单
效果如下:预览效果如图:废话少说,直接上代码:<template> <div> <div> <el-card class="box-card" style=" width: 80%; margin-left: 10%; min-height: 150px; margin-top: 10px; "原创 2020-12-18 10:47:47 · 1589 阅读 · 2 评论 -
Vue使用faker.js创建多类型的基础假数据,不需要使用node
https://github.com/BrockReece/vue-faker/原创 2020-12-16 14:36:07 · 2467 阅读 · 0 评论 -
Vue中实现页面上滑加载更多,用@scroll监听滚动事件,解决@scroll无效问题
在处理移动端的业务中,遇到需要页面滑动到底部加载更多数据的需求。下面就是个人实现加载更多功能的具体思路和踩坑详解。第一步:先给div内容添加滚动事件<template> <div class="content" @scroll="scrollCon"> <ul> <li></li> …… <li></li> </ul> </div><template>原创 2020-12-08 11:59:39 · 1995 阅读 · 0 评论 -
Vue.js中使用过滤器(filters)详解,附案例
screeningSet: { grades: { title: '年级', list: [] }, // 年级列表 subjects: { title: '学科', list: [] }, // 学科 terms: { title: '', list: [] }, // 学期 difficulties: { title: '', list: [] }, // 难度 timeTypes: { title: '', list: [原创 2020-12-07 17:57:24 · 1172 阅读 · 0 评论 -
Vue.js之this.$route.params和this.$route.query的区别(附代码)
this.$route.query的使用1、在router/index.js文件进行编辑{ path:'/index', component: index, //添加路由 children:[ { path:':shopid', component:detail } ] },2、传参数this.$router.push({ path: '/index/detail', query:{shopid: item.id}原创 2020-11-30 21:11:44 · 603 阅读 · 0 评论 -
Vue.js实现自定义Dialog标签,自定义标签内容及按钮
废话不说,直接上代码:提示弹窗代码如下: const dialogContent = '本课程为特惠课,仅限新用户购买,请于购买渠道进行退费' Dialog.alert({ message: dialogContent, className: 'confirmBtn', confirmButtonText: '好的', confirmButtonColor: '#FF5E50' }).then(() => { locatio原创 2020-11-27 14:47:14 · 1300 阅读 · 0 评论 -
Vue.js接口返回不同的状态值,动态展示不同的状态文案
在业务场景中,接口返回的状态值是不确定的,但是是在一定的范围内,将不同状态值对应的不同状态文案展示出来。接口数据如下:{ show_status:1}不同的状态值,对应不同的状态文案1:已上线2:已下线3:已成功4:已停售5:已购买 <div class="class_status_check_text"> {{ getTextByStatus(item.show_status) }} </div>methods:{ getTextBySta原创 2020-11-27 12:23:46 · 1999 阅读 · 0 评论 -
Vue.js页面跳转后返回上一页面记录上一页面select选定的值
在当前页面中,选中了某个标签中的问题,然后跳转到问题页面,按返回按钮返回到当前页面,继续选中之前的选中标签实现效果如下图:实现逻辑如下:进入当前页面的时候,页面路由为http://localhost:8080/#/problem点击某个标签,页面路径修改为http://localhost:8080/#/problem?index=3index的值为选中的标签下标,这样就用当前路由记录了当前的标签选中项进入详情页后,路由为http://localhost:8080/#/detail/?id=5原创 2020-11-17 17:39:58 · 2862 阅读 · 14 评论 -
Vue.js实现录音播放组件,带播放时间和播放动画
录音播放组件的效果图,如下:代码如下:<div class="newAudio"> <div class="voice-container"> <div class="play-button" id="play-button" :class="{ 'play-button-pause': isPlay }"原创 2020-11-17 16:12:42 · 2201 阅读 · 8 评论 -
Vue.js实现手风琴组件,前端手写组件逻辑及动画(看完秒懂)
个人在开发中,使用较多的H5组件库是Vant,之前对于手风琴这种业务场景,直接引入手风琴组件进行开发了。这次由于设计图要求较高,所以使用vant组件库继续开发,需要修改较多的样式,索性自己手动实现一下。官方文档的实例如下:通过 accordion 可以设置为手风琴模式,最多展开一个面板,此时 activeName 为字符串格式。<van-collapse v-model="activeName" accordion> <van-collapse-item title="标题1原创 2020-11-16 11:55:48 · 2262 阅读 · 1 评论 -
Vue实现移动端的Tab标签页组件
移动端H5页面开发中,我们一般采用Vant组件库进行开发。有时候因为业务要求比较个性化,需要实现有自己产品风格的组件功能,这个时候在组件库的基础上进行修改是比较费时间的,反而自己动手实现组件功能,写样式比较快一些。下面是Vant组件库的内容:标签栏滚动标签数量超过 5 个时,标签栏可以在水平方向上滚动,切换时会自动将当前标签居中。<van-tabs> <van-tab v-for="index in 8" :title="'标签 ' + index"> 内容 {{原创 2020-11-09 18:36:47 · 2584 阅读 · 0 评论 -
Vue组件间传参之EventBus传参(事件总线)
如果咱们的应用程序不需要类似Vuex这样的库来处理组件之间的数据通信,就可以考虑Vue中的 事件总线 ,即 EventBus来通信。首先在main.js种挂载全局EventBus// 事件总线Vue.prototype.$EventBus = new Vue()在组件A里面:<template> <div class="wrap"> <div>我是组件A</div> <button @click="s原创 2020-10-28 11:24:04 · 2313 阅读 · 0 评论