vue

最新推荐文章于 2023-02-14 10:41:51 发布

Nlovely

最新推荐文章于 2023-02-14 10:41:51 发布

阅读量692

点赞数 1

本文链接：https://blog.csdn.net/Nlovely/article/details/106188591

版权

提交以后禁用按钮一段时间，防止重复提交

// 全局 main.js
Vue.directive('noMoreClick', {
  inserted(el, binding) {
    el.addEventListener('click', e => {
      el.classList.add('is-disabled');
      el.disabled = true;
      setTimeout(() => {
        el.disabled = false;
        el.classList.remove('is-disabled');
      }, 3000)
    })
  }
});

// 页面需要用到的按钮添加   v-no-more-click
<button @click="submit" v-no-more-click>搜索</button>

Vue 页面跳转到新页面时, 默认在页面其他部分,不是顶部的问题

router.afterEach((to, from, next) => {
  window.scrollTo(0, 0)
});

刷新当前页

1. App.vue
	<template>
	  <div id="app">
	    <router-view v-if="isRouterAlive"></router-view>
	  </div>
	</template>
	
	<script>
	export default {
	  name: 'App',
	  data(){
	    return {
	       isRouterAlive:true
	    }
	  },
	  provide (){
	     return {
	       reload:this.reload
	     }
	  },
	  methods:{
	    reload (){
	       this.isRouterAlive = false
	       this.$nextTick(function(){
	          this.isRouterAlive = true
	       })
	    }
	  }
	}
	</script>

2. 在需要用到的组件添加
	export default {
	    inject:['reload'],
	}
	
	// 刷新当前页
	this.reload()