自定义 showToast 组件,可直接使用，附源代码和使用说明
在我们使用 uniapp开发或者各种小程序开发时，经常会使用到showToast 组件，但是它有很多限制，比如细节的样式和个性化需求无法满足，为了方便在 showToast 的基础上能做些个性化的需求，我自己封装了一个showToast 组件，下面看代码吧~以 uniapp 为例：在项目的components 目录，创建一个vue 文件（myShowToast.vue），代码：<templa
·
在我们使用 uniapp开发或者各种小程序开发时，经常会使用到 showToast 组件，但是它有很多限制，比如细节的样式和个性化需求无法满足，为了方便在 showToast 的基础上能做些个性化的需求，我自己封装了一个 showToast 组件，下面看代码吧~
以 uniapp 为例：
在项目的 components 目录，创建一个vue 文件（myShowToast.vue），代码：
<template>
<view>
<view v-if="show" class="myShowToast">
<view class="txt" v-if="title">{{title}}
</view>
</view>
</view>
</template>
<script>
export default {
name: "live-video",
props: ['title','time'],
data() {
return {
show: false
};
},
watch: {
title(){
if (this.title) {
this.show = true;
setTimeout(() => {
this.show = false;
this.$emit('hideToast','')
}, this.time||1500)
}
}
}
}
</script>
<style lang="scss" scoped>
.myShowToast {
width: 100vw;
height: 100vh;
position: fixed;
z-index: 9999;
justify-content: center;
align-items: center;
display: -webkit-flex;
.txt {
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
padding: 20rpx 30rpx 20rpx 40rpx;
font-size: 28rpx;
border-radius: 10rpx;
max-width: 70vw;
word-break: break-all;
}
}
</style>
使用方法：
1. 在main.js 中，引用该组件并设置为全局组件
import MyShowToast from "@/components/myShowToast.vue";
Vue.component('MyShowToast',MyShowToast)这样我们就可以在任意页面使用这个组件啦，下面看看在页面中使用的示例：
<template>
<view class="">
<button class="" @click="MyShowToastTitle='出现吧，皮卡丘~'">
点击出现弹窗
</button>
<MyShowToast :time="MyShowToastTime" :title="MyShowToastTitle" @hideToast="MyShowToastTitle=''"></MyShowToast>
</view>
</template>
<script>
export default {
data() {
return {
MyShowToastTitle:'',
MyShowToastTime:1500,
};
},
onLoad() {
console.log('aaaaaaaaaaaa')
}
}
</script>
<style>
</style>
查看效果图：
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献38条内容
所有评论(0)