Vue.js
文章平均质量分 58
使用vue框架开发项目中遇到的问题及解决方式积累
Microbabyshine
这个作者很懒,什么都没留下…
展开
-
vue中使用scrollIntoView()让选中的下拉列表项定位在视野中
问题出现需求需要实现一个单选下拉列表,选项在一屏显示不完,做了滚动条overflow:auto, 设置了height高度。那就出现了一个问题,当我点击某一个item选项时,如果这个item选项不在第一屏,而在滚动后才能看到的区域,那么再次点开这个下拉菜单时无法重新定位到被选中的item所在的这一屏,所以我们需要让下拉单选菜单再次打开时自己定位到这一屏。查阅资料问了一下同组的有经验的姐姐,说我可以使用window.scroll这些方法,详见https://developer.mozilla.org/原创 2021-07-10 12:49:58 · 1384 阅读 · 0 评论 -
Vue实现底部对话框
效果手机上的效果:电脑上的效果:代码App.vue<template> <div id="app"> <button @click="showDialog">展示Dialog</button> <my-dialog title="Hello" message="我是弹窗内容" :showDialog="isShowDialog" @closeDialog="isShowDialog=false"><转载 2021-06-28 10:33:19 · 1355 阅读 · 0 评论 -
vue实现Dropdown下拉菜单
1、需求点击按钮出现下拉菜单2、思路为按钮绑定点击事件showPicker()在按钮下另起一个div标签,用v-show绑定一个属性值isShowDropdown在methods里定义showPicker这个方法,来控制isShowDropdown的值为true或者false,来控制下拉菜单是否展示3、主要代码<div> <button @click="showPicker"/> <div id="myDropdown" v-show="isShow原创 2021-06-27 14:07:39 · 3600 阅读 · 0 评论 -
vue实现点击其他区域关闭自定义div
一、解决方案1、暴躁老哥的博客暴躁老哥的博客第一步:vue模块中的内容<template> <div class="hello" v-on:click="hidePanel"> <div id="myPanel" v-if="panelShow"></div> </div></template>第一步,我们在自己的vue模块中整体添加了一个hidePanel事件,准备整体区域进行点击,然后id为myPa原创 2021-06-25 18:28:10 · 3257 阅读 · 5 评论 -
vue通过路由跳转页面并传递参数
1、传递页——inputForm.vue代码<template> <div> <div> <input class="cardBox" v-model='username' placeholder="请输入您的名字" style="width:50%" /> </div> <Button type="primary" @click="login()" class="but">登录</Bu原创 2021-01-07 14:40:39 · 634 阅读 · 2 评论 -
vue项目中监听页面刷新和关闭
在实际开发项目中,有时候我们需要在刷新和关闭时,触发一些功能,那么如何监听到页面的刷新和关闭呢?1. 在methods中定义事件方法:methods: { beforeunloadFn(e) { console.log('刷新或关闭') // ... }}2. 在created 或者 mounted 生命周期钩子中绑定事件created() { window.addEventListener('beforeunload', e => this.beforeunl转载 2021-01-07 14:25:07 · 4017 阅读 · 3 评论 -
vue项目中使用iframe嵌套外部链接页面的实现与应用
一. 应用需求在vue开发项目的过程中,需要在自己的页面框架中,引用别人做的页面功能,但又不想直接跳转,失去整个系统的统一性,只想在这个子页面(子路由里跳转),那么如何实现呢?很简单!iframe就可以帮我们完成! 本文将以嵌入哔哩哔哩为例二、实现过程1、侧边栏的实现以下代码都是在sideMenu.vue侧边栏组件中实现1.1 template页面显示部分——为侧边栏绑定单击事件<template> <div> <Menu :active-name="原创 2021-01-06 14:29:35 · 27547 阅读 · 13 评论 -
Vue实现倒计时
完整代码如下:<template> <div> <div class="cardBox"> <div > <img class="erweiPhoto" src="../assets/img/微信图片_20201222170418.jpg"> </div> <div style="margin:5px 0 5px 0"> {{"二维码剩余有效时原创 2021-01-02 21:19:24 · 8821 阅读 · 0 评论 -
Vue定时器轮询+终止轮询
轮询最近项目中需要实现轮询,每隔5s请求一次数据。 window.timer = setInterval(()=>{ this.promiseFun() },5000)在其他博客中看到,一般都会使用setInterval,但要注意单纯使用它可能导致页面卡死。原因是setInterval不会清除定时器队列,每重复执行1次都会导致定时器叠加,卡死。但是setTimeout是自带清除定时器的所以可以叠加使用。window.timer = setInterval(() => {原创 2020-10-22 09:11:05 · 6153 阅读 · 0 评论 -
Vue + iview Spin 实现loading加载环
场景当页面加载时,假如数据没有加载完成,此时为了防止用户进行操作,会显示一个遮罩并显示一个loading环,提示用户加载中…实现html:<Spin fix v-show="this.$store.state.isSpinShow"> <div class="demo-spin-icon-load"> <!-- 这里用的是阿里图标库 --> <i class="iconfont icon-loader--line">&l原创 2020-09-03 20:34:49 · 4175 阅读 · 3 评论 -
Vue中实现避免按钮多次点击造成发送多次重复请求
store文件中设置一个变量,全局管理按钮的禁用和解除禁用,方便组件之间的通信select.vue发送表单组件,表单没有填写完整时也要将按钮禁用解除<Button type="primary" :disabled="this.$store.state.isDisable" @click="filterBtn('form')" icon="ios-search">筛选</Button>methods: { filterBtn (name) { this.原创 2020-09-03 19:52:17 · 2702 阅读 · 0 评论