tui-network-alert 网络状态提示 会员组件 V3.0.0+

介绍

NetworkAlert：网络状态提示，监听网络变化，请在移动端真机切换网络预览。

引入

uni-app引入

第一种，手动引入（可全局引入）

import tuiNetworkAlert from "@/components/thorui/tui-network-alert/tui-network-alert.vue"
export default {
	components:{
		tuiNetworkAlert
	}
}

第二种，开启easycom组件模式，如果不了解如何配置，可先查看 官网文档 (opens new window)。

uni-app版本平台差异说明

App-Nvue	App-vue	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
✓	✓	✓	✓	✓	✓	✓	✓

微信小程序引入（可在app.json中全局引入）

{
  "usingComponents": {
    "tui-network-alert": "/components/thorui/tui-network-alert/tui-network-alert"
  }
}

代码演示

部分功能演示，具体可参考示例程序以及文档API。

基础使用

<!--uniapp-->
<tui-network-alert @change="onChange"></tui-network-alert>

<!-- 微信小程序 -->
<tui-network-alert bindchange="onChange"></tui-network-alert>

//网络状态变化时触发方法
 onChange(e) {
    console.log(e)
 }

Slots

插槽名称	说明
default	提示内容左侧自定义内容
right	提示内容右侧自定义内容

Props

属性名	类型	说明	默认值
text	String	无网络时提示文本	当前网络不可用，请检查你的网络设置
background	String	背景颜色	#fee3e6
size	String,Number	提示文本字体大小，单位rpx	28
color	String	提示文本字体颜色	#f74d54
src	String	图片图标，置src 之后，type失效	-
padding	String	padding值，同css	24rpx 30rpx
visible	Boolean	无网络时是否显示提示框信息	true
marginTop	Number, String	marginTop值，单位rpx	0
marginBottom	Number, String	marginBottom值，单位rpx	0

Events

注：uni-app端绑定事件使用@前缀，如@click；微信小程序原生使用bind前缀，如bindclick

事件名	说明	回调参数
click	点击提示框时触发	-
change	网络状态变化时触发	{isConnected:是否有网络连接,networkType:网络类型}

预览

请以移动端效果为准，touch事件目前尚未完全在PC端做兼容。

特别说明

该组件为 会员组件，非开源内容，需开通会员才可获取使用。

线上程序扫码预览

ThorUI组件库小程序码	H5二维码	ThorUI示例小程序码