对于wx小程序自己提供的showToast,当遇到提示的信息字数较多时,小程序中showToast默认只能显示7个字体长度,因此多余的字数会隐藏,所以我们就自己定义一个弹出框解决这个问题。
toast组件:
<template>
<view class="container" v-if="Flag">
<view class="content">
{{ content }}
</view>
</view>
</template>
<script>
//定时器标识timer
var timer = null;
export default {
name: "mytoast",
data() {
return {
Flag: false,
content: "",
};
},
methods: {
showtoast(val) {
this.content = val;
// 每次清除上一次timer,若无也没影响
clearTimeout(timer);
this.Flag = true;
// 添加定时器,3秒后消失
timer = setTimeout(() => {
this.Flag = false;
}, 3000);
},
},
};
</script>
<style scoped>
.container {
color: #ffffff;
padding: 20rpx 20rpx;
background: rgba(0, 0, 0, 0.6);
border-radius: 4px;
position: absolute;
left: 50%;
top: 75%;
transform: translate(-50%, -50%);
}
.content {
text-align: center;
font-size: 28rpx;
width: 100%;
height: 100%;
}
</style>
如何使用:
在父组件中需要使用组件的地方加入:
使用:<toast ref="mytoast"></toast>
引入:import toast from "./toast";
注册:components: { toast },
btnClick() {
// 绑定toast组件,调用toast组件内的方法
this.$refs.mytoast.showtoast( '成功' )
}