el-button 添加loading效果，并且显示不同的文字

最新推荐文章于 2024-03-12 16:50:41 发布
最新推荐文章于 2024-03-12 16:50:41 发布
阅读量9.7k 收藏 2
点赞数 2
分类专栏： vue+elementui相关知识点和难点
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44171757/article/details/102838265
版权 
<el-button 
	type="primary" 
	size="mini" 
	icon="iconfont icon-filedone"  
	:loading="loadingBtn">
		{{loadingBtn?'搜索中':'搜索'}}
</el-button>
String佳佳
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 给el-button添加加载效果
且听风吟的博客
10-31 7485
需求：给子组件对话框“确定”按钮添加加载动画效果： （1）给按钮绑定： :loading="ConfirmLoading" （2）在data中初始化 ConfirmLoading： data() { return { ConfirmLoading: false } } （3）提交表单时设置： this.ConfirmLoading = true （4）对话框绑...
在element-ui的el-tree组件中用render函数生成el-button的实例代码
10-17
主要介绍了在element-ui的el-tree组件中用render函数生成el-button 的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
element-ui 的el-button组件中添加自定义颜色和图标的实现方法.docx
01-13
element-ui 的el-button组件中添加自定义颜色和图标的实现方法.docx
el-table中给每行添加loading效果案例
最新发布
码农桃子的博客
03-12 1213
在el-table表格中，使用el-switch组件，想让每个组件都有一个loading效果，如何实现呢？请看
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
10-17
主要介绍了element-ui 的el-button组件中添加自定义颜色和图标的实现方法，目前的解决方案是：添加一个自定义全局指令，同时在element-ui源码中，加入对应的组件。需要的朋友跟随小编一起看看吧
el-loading可以看到loading效果，但可以被点击
qq_45327886的博客
04-09 6143
可以看到loading效果，但是仍然可以被点击
给el-table里面的按钮添加独立的loading效果
string佳佳的博客
11-18 6423
如图所示，需要在点击某一条数据的“查看”后，对应的状态变为loading。 一开始我直接在button标签添加 :loading=‘btnLoading’ 点击之后把变量btnLoading变为true，发现这个方法有问题，会把其他行的“查看”全部变成loading。 解决思路：重新处理一下数据，为每条数据添加btnLoading属性，默认值为false（属性名可以自定义，不一定非要是btnL...
Element-ui 给table里的每个按钮设置loading
放弃不难，但坚持一定很酷！
09-30 3477
在table中，点击不同行的重新升级按钮，只有点击的按钮进行加载，请求后台成功后停止加载。
element-ui根据状态显示不同内容与点击按钮赋值
weixin_70027586的博客
11-14 800
element-ui根据状态显示不同内容与点击按钮赋值
vue el-table的每行操作el-button添加单独的loading效果实现
weixin_39277183的博客
07-07 2371
你的压力来源于无法自律，只是假装努力，现状跟不上内心的欲望，所以你焦虑又恐惧。
【Elementui】组件库使用Table 表格组件为每一行的按钮添加loading效果
m0_63762148的博客
06-05 5129
button按钮单独设置loading状态
vue el-button 封装及使用
weixin_46328739的博客
12-01 1080
使用了 Element UI 中的 el-button 组件，并对其进行了封装和定制。
UIButton 文字在左，icon在右的办法
superweiyan的博客
05-05 1069
在开发中，经常会碰到按钮到文字和icon 时左时右的情况。默认的情况是icon左，文字右。如果想反过来，有下面几个办法。 方法一： 在 stackover 上看到的一个答案。通过写一个分类的办法。 button.transform = CGAffineTransformMakeScale(-1.0, 1.0); button.titleLabel.transform = CG
vue-动态生成的按钮单独添加loading效果
Keep on moving!
05-29 1475
项目中动态生成了多个按钮，但是v-loading设置了同一个属性，导致提交的时候，多个按钮都一起加载loading效果。
element-ui 表格中带有按钮的loading详细解决方案
热门推荐
Superman_peng的博客
09-19 1万+
最近写项目遇到一个问题就是表格里的按钮加载状态设置，就是表格里的按钮在进行操作时，显示相应的加载状态，操作完成后，恢复正常状态。 解决思路 在找到解决方案前，还进行了其它方案尝试： 方案一：data中设置一个对象，里面放很多个btnloading{ btnLoading1: false, btnLoading2: false,... } 缺点：不知道会列表里会有多少条数据（鸡肋，不建议采用，本篇文章不再介绍） 方案二：按钮直接设置 v-loading="scope.row.MarkUpPirceLoad
vue页面按钮呈现loading加载状态，与avue-form中loading使用问题
httpmc2018的博客
03-04 8947
按钮点击时呈现加载状态，防止其他误操作。 1.效果图 2.代码实现 （1）按钮添加：:loading="loading.listLoading" <el-button type="primary" style="margin-top: 12px;" :loading="loading.listloading" @click="expScorePacks()">导出 （2）定义 loading.listLoading（true：为开启加载状态，false：关闭加载状态） .
el-button入门学习
qq_40765784的博客
05-12 6168
el-button中的各种按钮
封装按钮loading功能（非最终版）
bobiii的博客
08-08 344
新建一个waitHandleStore.ts文件，state里有loadingUrlObj，用于储存url和相对应loading的一一对应关系，声明两个方法，一个用于在请求拦截器和响应拦截器修改loading的值，一个用于往loadingUrlObj添加数据。在store文件里，fn(url)的实现写在这里。在axios二次封装文件里，识别url，在请求拦截器里把相对应的loading值改为true，因为要包括错误处理，所以在请求的finally()里把loading改为false。
给整个所有的el-button添加loading事件
06-09
你可以使用 Element UI 提供的全局配置来为所有的 `<el-button>` 组件添加 loading 事件。具体实现步骤如下： 1. 在 `main.js` 中导入 Element UI： ```js import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); ``` 2. 在 `main.js` 中配置全局 loading 样式： ```js import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI, { // 全局 loading 样式配置 loading: { text: 'Loading...', // loading 文字 background: 'rgba(0, 0, 0, 0.7)', // 背景色 spinner: 'el-icon-loading', // loading 图标 fullscreen: true // 是否全屏显示 } }); ``` 在上面的代码中，我们使用了 `Vue.use(ElementUI, options)` 方法来配置全局 loading 样式。其中，`options` 对象中的 `loading` 属性用于配置全局 loading 样式。这里我们配置了 loading 文字、背景色、loading 图标、是否全屏显示等参数。 3. 在组件中使用 `<el-button>` 组件： ```html <template> <el-button @click="fetchData">加载数据</el-button> </template> ``` 在上面的代码中，我们在组件中使用了 `<el-button>` 组件，并且添加了 `@click` 事件，当点击按钮时会触发 `fetchData` 方法。 4. 在 `fetchData` 方法中使用 `this.$loading` 显示 loading 样式： ```js export default { methods: { fetchData() { const loadingInstance = this.$loading({ text: 'Loading...', // loading 文字 background: 'rgba(0, 0, 0, 0.7)', // 背景色 spinner: 'el-icon-loading', // loading 图标 fullscreen: true // 是否全屏显示 }); // 发送请求获取数据 // ... loadingInstance.close(); // 数据加载完成后关闭 loading 样式 } } } ``` 在上面的代码中，我们在 `fetchData` 方法中使用 `this.$loading` 方法显示 loading 样式，并且传入了 loading 文字、背景色、loading 图标、是否全屏显示等参数。在数据加载完成后，我们调用 `loadingInstance.close()` 方法关闭 loading 样式。 通过上面的步骤，我们就为所有的 `<el-button>` 组件添加了 loading 样式。当点击按钮时，会触发 `fetchData` 方法，该方法中会显示 loading 样式，直到数据加载完成后关闭 loading 样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值