- 首页
- 前端开发
- 如何在搜索时添加加载图标?(Vue.js 2)
如何在搜索时添加加载图标?(Vue.js 2)
[英] How to add a loading icon while searching? (Vue.js 2)
本文介绍了如何在搜索时添加加载图标?(Vue.js 2)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的组件是这样的:
...<input type="text" class="form-control" v-model="rawFilter" placeholder="Search" @keyup="getPlayers">...<脚本>从'lodash'导入_...导出默认{...数据() {返回{msg:'你好 vue',原始过滤器:'',加载:假}},...方法: {getPlayers: _.debounce(function(e) {const text = e.target.value.trim()this.$store.dispatch('getPlayers', {问:文字})},1000),...}}
当我搜索时，在显示数据之前，我想添加一个加载图标
如何在 vue.js 2 中实现?
解决方案
出于可用性的考虑，我建议使用具有自己 vuex 状态的加载器.
- 这将允许您从任何组件控制它.
- 您可以通过简单的函数调用轻松使用它.
- 自然避免道具和事件.
<小时>
首先定义您需要这个特定加载器的位置:
- 是否要用于所有 api 调用?
- 一些浏览器密集型任务(例如处理加载的文件).
- 或者更具体的东西(可能只在用户尝试登录时显示加载器)
如果你的加载器没有像案例 1 那样与任何组件紧密耦合.那么将你的加载器保存在你的主 vue 文件中会更有意义(如果你使用的是 vue-cli 然后是 App.vue)
像这样:
<div id="应用程序"><loader></loader><路由器视图></路由器视图>
<脚本>从./components/shared/loader/Loader"导入加载器导出默认{名称:'应用'，组件: {装载机}}
有了这个，你就不必在每个其他组件文件中添加 loader.vue.但首先，我将向您展示我正在使用的加载程序组件和存储.
<div class='loader-container' :class='{"show": show, "hidden": !show}'><div class="curved-div"><div class="color-magic"><i class='fa fa-circle-o-notchrotate'></i>
<div class="加载">{{加载}}
<脚本>从 'vuex' 导入 { mapGetters }import * as NameSpace from '../../../store/NameSpace'导出默认{数据 () {返回 {加载:'加载...'}},计算:{...mapGetters({显示:NameSpace.GET_LOADER_STATE})}}<样式范围>.loader-容器{位置:固定；宽度:100%；高度:100%；背景:RGBA(0,0,0,0.8)；}.curved-div {位置:绝对；顶部:50%；左:50%；变换:translateX(-50%);边界半径:.3rem；宽度:20rem；填充:1rem;背景:白色；框阴影:0 0 .1rem #fefefe；}.curved-div >* {显示:内联块；}.旋转{边界半径:50%；填充:.5rem；动画名称:旋转；动画持续时间:.7s；动画迭代次数:无限；动画延迟:0s；}.loading {文本对齐:居中；宽度:12rem；字体大小:1.8rem；}.展示 {可见性:可见；不透明度:1；z-索引:1；过渡:不透明度 0.5s 缓出，可见性 0.5s 缓出，z-index 0.5s 缓出；}.隐藏{不透明度:0；可见性:隐藏；z-索引:0；过渡:不透明度 0.5s 缓出，可见性 0.5s 缓出，z-index 0.5s 缓出；}@关键帧旋转{0% {变换:旋转Z(0度)；}100% {变换:旋转Z(360度)；}}.color-magic {动画名称:colorMagic；动画持续时间:20s；动画迭代次数:无限；动画延迟:0s；}@keyframes colorMagic {0% { 颜色:RGB(179,10,10);}10% { 颜色:rgb(227,132,22);}20% { 颜色:rgb(164,153,7);}30% { 颜色:rgb(26,171,19);}40% { 颜色:rgb(19,144,177);}50% { 颜色:rgb(14,16,221);}60% { 颜色:rgb(27,9,98);}70% { 颜色:rgb(58,11,111);}80% { 颜色:rgb(126,14,129);}90% { 颜色:rgb(208,19,121);}100% { 颜色:rgb(198,18,18);}}</风格>
请注意，我在加载器中使用了 font-awesome.
这里是商店:
import * as NameSpace from '../NameSpace'//您也可以在您的商店中使用 namespace: true 并消除对 NameSpace.js 的需要常量状态 = {[NameSpace.LOADER_STATE]:假}const 吸气剂 = {[NameSpace.GET_LOADER_STATE]:状态 =>{返回状态[NameSpace.LOADER_STATE]}}常量突变 = {[NameSpace.MUTATE_LOADER_STATE]:(状态，有效载荷)=>{状态[NameSpace.LOADER_STATE] = 有效载荷}}常量动作 = {[NameSpace.LOADER_SHOW_ACTION]: ({ commit }, payload) =>{提交(NameSpace.MUTATE_LOADER_STATE，有效载荷)}}导出默认{状态，吸气剂，突变，行动}
用法示例:
//这不是 .vue 文件，而是 .js 文件，因此是使用商店的不同方式.从'vue'导入Vueimport * as NameSpace from 'src/store/NameSpace'从 'src/store/modules/loader' 导入 loaderState/*** 通过mutation函数减少文本长度* 现在可以在 api 调用中使用此函数来启动/停止加载程序* 作为 api 开始和结束.*/让 loaderSwitch = loaderState.mutations[NameSpace.MUTATE_LOADER_STATE].bind(null, loaderState.state)登录(用户名，密码){loaderSwitch(真)返回新的承诺((解决，拒绝)=> {SomeEndpoint.logIn(用户名，密码，{成功(用户){loaderSwitch(false)解决(用户.属性)},错误(用户，错误){loaderSwitch(false)拒绝(错误助手(错误代码))}})})
现在，无论使用哪个组件登录，加载器组件都不需要保留在那里.
My component is like this :
<template>
...
<input type="text" class="form-control" v-model="rawFilter" placeholder="Search" @keyup="getPlayers">
...
</template>
<script>
import _ from 'lodash'
...
export default {
...
data() {
return{
msg:'hello vue',
rawFilter:'',
loading:false
}
},
...
methods: {
getPlayers: _.debounce(function(e) {
const text = e.target.value.trim()
this.$store.dispatch('getPlayers', {
q: text
})
},1000),
...
}
}
</script>
When I searching, before display the data, I want add a loading icon
How can I do it in vue.js 2?
解决方案
For usability's sake, I'll suggest using a loader which has its own vuex state.
- This will allow you to have control over it from any component.
- You can use it easily by means of simple function calls.
- Naturally avoid props and events.
First define where you would need this particular loader:
- Is it to be used for all api calls?
- Some browser intensive task (like processing an loaded file).
- Or something more specific in nature (maybe show the loader only when the user is trying to login)
If your loader is not tightly coupled to any component like in case 1. Then it would make more sens to keep your loader in your main vue file (if you are using vue-cli then App.vue)
Something like so:
<template>
<div id="app">
<loader></loader>
<router-view></router-view>
</div>
</template>
<script>
import Loader from './components/shared/loader/Loader'
export default {
name: 'app',
components: {
Loader
}
}
</script>
With this, you don't have to add loader.vue in every other component file.
But first, I'll show you the loader component and store I am using.
<template>
<div class='loader-container' :class='{"show": show, "hidden": !show}'>
<div class="curved-div">
<div class="colour-magic">
<i class='fa fa-circle-o-notch rotate'></i>
</div>
<div class="loading">
{{ loading }}
</div>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import * as NameSpace from '../../../store/NameSpace'
export default {
data () {
return {
loading: 'Loading...'
}
},
computed: {
...mapGetters({
show: NameSpace.GET_LOADER_STATE
})
}
}
</script>
<style scoped>
.loader-container {
position: fixed;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
}
.curved-div {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%);
border-radius: .3rem;
width: 20rem;
padding:1rem;
background: white;
box-shadow: 0 0 .1rem #fefefe;
}
.curved-div > * {
display: inline-block;
}
.rotate {
border-radius: 50%;
padding: .5rem;
animation-name: rotate;
animation-duration: .7s;
animation-iteration-count: infinite;
animation-delay: 0s;
}
.loading {
text-align: center;
width: 12rem;
font-size: 1.8rem;
}
.show {
visibility: visible;
opacity: 1;
z-index: 1;
transition: opacity 0.5s ease-out, visibility 0.5s ease-out, z-index 0.5s ease-out;
}
.hidden {
opacity: 0;
visibility: hidden;
z-index: 0;
transition: opacity 0.5s ease-out, visibility 0.5s ease-out, z-index 0.5s ease-out;
}
@keyframes rotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
.colour-magic {
animation-name: colorMagic;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-delay: 0s;
}
@keyframes colorMagic {
0% { color: rgb(179,10,10); }
10% { color: rgb(227,132,22); }
20% { color: rgb(164,153,7); }
30% { color: rgb(26,171,19); }
40% { color: rgb(19,144,177); }
50% { color: rgb(14,16,221); }
60% { color: rgb(27,9,98); }
70% { color: rgb(58,11,111); }
80% { color: rgb(126,14,129); }
90% { color: rgb(208,19,121); }
100% { color: rgb(198,18,18); }
}
</style>
Please note that I am using font-awesome for the loader.
and here is the store:
import * as NameSpace from '../NameSpace'
// you can also use the namespace: true in your store and eliminate the need of NameSpace.js
const state = {
[NameSpace.LOADER_STATE]: false
}
const getters = {
[NameSpace.GET_LOADER_STATE]: state => {
return state[NameSpace.LOADER_STATE]
}
}
const mutations = {
[NameSpace.MUTATE_LOADER_STATE]: (state, payload) => {
state[NameSpace.LOADER_STATE] = payload
}
}
const actions = {
[NameSpace.LOADER_SHOW_ACTION]: ({ commit }, payload) => {
commit(NameSpace.MUTATE_LOADER_STATE, payload)
}
}
export default {
state,
getters,
mutations,
actions
}
A usage example:
// This is not a .vue file it is a .js file, therefore a different way of using the store.
import Vue from 'vue'
import * as NameSpace from 'src/store/NameSpace'
import loaderState from 'src/store/modules/loader'
/**
* Pass the mutation function to reduce the text length
* This function can now be used in the api calls to start/stop the loader
* as the api starts and finishes.
*/
let loaderSwitch = loaderState.mutations[NameSpace.MUTATE_LOADER_STATE].bind(null, loaderState.state)
login (username, password) {
loaderSwitch(true)
return new Promise((resolve, reject) => {
SomeEndpoint.logIn(username, password, {
success (user) {
loaderSwitch(false)
resolve(user.attributes)
},
error (user, error) {
loaderSwitch(false)
reject(errorHelper(error.code))
}
})
})
Now, irrespective of the component where login is used, the loader component need not be kept there.
这篇关于如何在搜索时添加加载图标?(Vue.js 2)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
