hover-stay-time="hoverStayTime"
@click="clickButton"
<text>{{text}}</text>
</button>
</template>
<script>
export default {
name: "LsButton",
props: {
text:{//按钮里的文字,必传
type: String,
default: ''
},
time:{//防二次点击的默认时间,默认单位是毫秒。
type: Number,
default: ''
},
clickBtn:Function,//接收外面的方法,因为存在异步的要求,所以不用this.$emit('clickBtn')来传递值
size: {//按钮的大小:default:默认大小; mini:小尺寸
type: String,
default: 'default'
},
type: {//按钮的样式类型:default:白色; warn:红色; primary:微信小程序为绿色,App、H5、百度小程序、支付宝小程序为蓝色,头条小程序为红色,QQ小程序为浅蓝色
type: String,
default: 'default'
},
plain: {//按钮是否镂空,背景色透明。
type: Boolean,
default: false
},
disabled: {//是否禁用
type: Boolean,
default: false
},
loading: {//名称前是否带 loading 图标
type: Boolean,
default: false
},
formType: {//用于 <form> 组件,点击分别会触发 <form> 组件的 submit/reset 事件
type: String,
default: ''
},
openType: {//开放能力。contact:打开客服会话,share:触发用户转发,getUserInfo:获取用户信息(手机号、头像、昵称等),getPhoneNumber:获取用户手机号,launchApp:打开APP,openSetting:打开授权设置页
type: String,
default: ''
},
hoverClass: {//指定按钮按下去的样式类。当 hover-class="none" 时,没有点击态效果
type: String,
default: 'button-hover'
},
hoverStartTime: {//按住后多久出现点击态,单位毫秒
type: Number,
default: 20
},
hoverStayTime: {//手指松开后点击态保留时间,单位毫秒
type: Number,
default: 70
},
},
data() {
return {
allowClick:true,//记录是否允许点击按钮(防二次点击用)
disabledData:this.disabled,//点击后,异步请求完后,才允许点击
loadingData:this.loading,//
};
},
computed: {
},
watch: { },
created() {
},
mounted() {
},
methods: {
async clickButton(){
this.disabledData=true
this.loadingData = true
if(this.time){
await this.clickBtn()
setTimeout(()=>{
this.disabledData=false
this.loadingData = false
},this.time)
}
if(!this.time){
await this.clickBtn()
this.disabledData=false
this.loadingData = false
}
},
}
};
</script>
辉笑流 (作者)
试过了,不行的。只要是该方法里的this,微信小程序上,都是指向子组件(但H5和APP端是指向父组件)
2020-05-28 13:34
8***@qq.com
回复 辉笑流: 我解决了,在export default {}外面定义一个_this,onLoad的时候,_this = this,父组件方法里面用_this
2020-12-29 15:55
qkang
回复 8***@qq.com: 可是这样_this就是个单例了,如果一个组件要渲染很多次会导致_this只指向最新的那个
2021-02-01 10:33