$("button").button("loading") 无效

本文描述了在使用Bootstrap 4.1.3版本时遇到的加载按钮显示问题,并分享了解决方案:通过自定义CSS和JavaScript实现加载效果,包括禁用按钮、更改按钮文本和光标样式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

bootstrap 4.1.3 版本好像不行

换成3.3.7又行了。。。

然后就只能自己写个loading效果

点击等待
.noclick{
	cursor:wait;
}

<script>
  $(function () {
       $("#button").click(function () {
           // $(this).button("loading");
           $(this).attr("disabled",true);
           $(this).val("loading");
           $(this).addClass("noclick");
       })
   })
</script>
<template> <view class="content"> <!-- <image class="logo" src="/static/logo.png"></image> --> <!-- view class="text-area"> <text class="title">{{title}}</text> </view> <view class="text-area"> <text class="title">{{title}}</text> </view> <view class="text-area"> <button @click="handleclick">呼叫服务器</button> </view> --> <unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" collection="datalist"> <view v-if="error">{{error.message}}</view> <view v-else> <uni-list> <uni-list-item v-for="item in data" :key="item._id" :title="item.name" :note="item.phone" @click="rmItem(item._id)" link></uni-list-item> </uni-list> </view> </unicloud-db> </view> </template> <script setup> // import { ref } from 'vue' // const udb = ref("") const rmItem = ()=>{ rmItem(id){ this.$refs.udb.remove(id) } } // export default { // data(){ // return{ // } // }, // methods:{ // rmItem(id){ // this.$refs.udb.remove(id) // } // } // } // import { // reactive, // ref // } from 'vue'; // const title = ref("hello-mycloud") // const handleclick = async () => { // const myfunction = uniCloud.importObject("myfunction") // const res = await myfunction.say("你好,我是前端") // uni.showModal({ // content: JSON.stringify((res) // ) // }) // } </script> <style> /* .content { display: flex; flex-direction: column; align-items: center; justify-content: center; } .logo { height: 200rpx; width: 200rpx; margin-top: 200rpx; margin-left: auto; margin-right: auto; margin-bottom: 50rpx; } .text-area { display: flex; justify-content: center; } .title { font-size: 36rpx; color: #8f8f94; } */ </style>这段代码是vue3组合式风格,需要实现点击当前项进行删除操作,但是点击后没响应,为什么
最新发布
03-11
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值