[Vue-rx] Disable Buttons While Data is Loading with RxJS and Vue.js
2023-09-14 08:59:17 时间
Streams give you the power to handle a "pending" state where you've made a request for data, but the data hasn't yet returned. You can leverage this pending stream to update your template as well which is often displayed as a "loader" or disabling some part of the UI.
<template> <section class="section"> <button class="button" :disabled="disabled$" v-stream:click="click$">{{buttonText$}}</button> <h2> {{name$}} </h2> <img v-stream:error="imageError$" :src="image$" alt=""> </section> </template> <script> import { from, of, merge, throwError } from 'rxjs'; import { switchMap, pluck, map, mapTo, catchError, shareReplay, share, startWith } from 'rxjs/operators'; export default { name: 'app', domStreams: ['click$', 'imageError$'], subscriptions() { const createLoader = url => from(this.$http.get(url)).pipe(pluck('data')); const luke$ = this.click$.pipe( mapTo('https://starwars.egghead.training/people/1'), switchMap(createLoader), catchError(() => of({name: 'Failed.. :('})), share() ); const name$ = luke$.pipe(pluck('name')); const loadImage$ = luke$.pipe( pluck('image'), map(src => `https://starwars.egghead.training/${src}`) ); const failImage$ = this.imageError$.pipe( mapTo(`http://via.placeholder.com/400x400`) ); const image$ = merge( loadImage$, failImage$ ) const disabled$ = merge( this.click$.pipe(mapTo(true)), luke$.pipe(mapTo(false)), ).pipe(startWith(false)); const buttonText$ = disabled$.pipe(map(b => (b ? 'Loading...' : 'Load'))); return { name$, image$, failImage$, disabled$, buttonText$ }; } }; </script>
相关文章
- Vue笔记:vue-router
- VUE - vue.runtime.esm.js?6e6d:619 [Vue warn]: Do not use built-in or reserved HTML elements as component i
- [Vue-rx] Handle Image Loading Errors in Vue.js with RxJS and domStreams
- [Nuxt] Add Arrays of Data to the Vuex Store and Display Them in Vue.js Templates
- [Vue] Preload Data using Promises with Vue.js and Nuxt.js
- [Vue] Create Vue.js Layout and Navigation with Nuxt.js
- Vue.js3: 页面打开前实现图片全部预加载(vue@3.2.33)
- vue.js3: 使用js-md5 (js-md5@0.7.3 / vue@3.2.26)
- [Vue-rx] Switch to a Function which Creates Observables with Vue.js and Rxjs
- [Vue-rx] Pass Template Data Through domStreams in Vue.js and RxJS
- [Nuxt] Add Arrays of Data to the Vuex Store and Display Them in Vue.js Templates
- [Vue] Use Vue.js Component Computed Properties
- [Vue] Create Vue.js Layout and Navigation with Nuxt.js
- vue.js 3.0.5:用vue-i18n开发i18n国际化功能(vue-i18n@9.2.0)
- vue项目,axios请求后端的图片文件流
- Atitit 常用技能点体系树 os win linux android 前后端 gui h5 vue js jquery bootstrap cocos2d Jafavx wpf
- html使用vue模板、html引入vue.js-测试demo
- vue - 通过JS屏蔽自带右键菜单
- vue - chunk-vendors.js文件太大,实现拆分打包的具体配置
- vue.js项目打包报错Error: You appear to be using a native ECMAScript module configuration file
- vue或uniapp中文本框输入数字固定几位小数或只能输入整数的方法
- 前端必备技能知识:JS导出Blob流文件为Excel表格、Vue.js使用Blob的方式实现excel表格的下载(流文件下载)
- vue-ant design示例大全——按钮本地css/js资源
- 2023前端面试重点知识点总结【详细】css+js+vue+react+小程序+性能优化等等