自定义 showToast 组件,可直接使用，附源代码和使用说明

在我们使用 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>

查看效果图：

自定义 showToast 组件,可直接使用，附源代码和使用说明相关推荐

小程序自定义showToast组件
预先说明:我用的colorUI的icon,如果没有用color UI,你可能需要引入一下color UI或者修改一下. 情况众所周知,小程序的消息提示框带上图标只能显示7个汉字,很不方便. 在做小程 ...
效率最高的Excel数据导入---（c#调用SSIS Package将数据库数据导入到Excel文件中【附源代码下载】）...
本文目录: (一)背景 (二)数据库数据导入到Excel的方法比较 (三)SSIS的简介 (四)数据库中存储过程示例(SSIS应用需要) (五)Excel模板的制作(这步这么简单,稍微介 ...
c#ovalshape_【原创】C# 实现拖拉控件改变位置与大小(SamWang)(附源代码下载)
前言: 很多时候我们需要在运行时,动态地改变控件的位置以及大小,以获得更好的布局.比如说实际项目中的可自定义的报表.可自定义的单据等诸如此类.它们有个特点就是允许客户或者二次开发人员设计它们需要的界面 ...
uniapp中自定义showToast样式
uniapp中自定义showToast样式使用方式在template中引入在需要使用show-toast的地方使用在main.js中挂在组件文件代码:组件show-toast show-to ...
跨平台应用开发进阶(七) ：uni-app 自定义 showToast
文章目录一.前言二.实现原理三.代码实现四.拓展阅读一.前言利用uni-app跨平台开发框架开发多终端APP时,应用HBuilder自身提供的弹窗不满足业务需求,故开发自定义弹窗组件sho ...
实现一个C语言版本的圣诞树（附源代码）
圣诞树C语言源代码,关注飞雪无情公众号即可获取,详见文章底部 2018年的圣诞节前夜,使用GO语言实现了一颗随机圣诞树,也就是每次运行程序,生成的圣诞树都不一样,独一无二的.当时受到了很大的欢迎,很多 ...
效率最高的Excel数据导入---（c#调用SSIS Package将数据库数据导入到Excel文件中【附源代码下载】）转...
效率最高的Excel数据导入---(c#调用SSIS Package将数据库数据导入到Excel文件中[附源代码下载]) 本文目录: (一)背景 (二)数据库数据导入到Excel的方法比较 ( ...
巴斯光年python turtle绘图__附源代码
巴斯光年python turtle绘图__附源代码本文目录: 一.python turtle海龟绘图效果图写在前面的题外话二.绘图人物简介三.代码演示方法和代码命令解释四.怎么才能正常运行p ...
Spring Boot 基础学习之（五）页面通过自定义LocaleResolver组件实现网页页面的的中英文转换
本次项目所有能够使用的静态资源可以免费进行下载静态资源在前端网页,是不是看见过这样的功能基础网页:中文表示点击下面的English 按钮网页显示文字开始切换通过功能性按钮实现中英文切换, ...

自定义 showToast 组件,可直接使用，附源代码和使用说明

自定义 showToast 组件,可直接使用，附源代码和使用说明相关推荐

最新文章

热门文章