zoukankan      html  css  js  c++  java
  • 快应用网络异常组件

    公共组件

    <template>
        <div>
            <stack class="network" show="{{isShow}}">
                <div class="network_wraper">
                    <image class="network_icon" src="/common/images/notice.png"></image>
                    <text class="network_tips">{{networkTips}}</text>
                </div>
            </stack>
        </div>
    </template>
    
    <script>
    export default {
        props: {
            isShow: {
                type: Boolean,
                default: false,
            },
            networkTips: {
                type: String,
                default: '当前网络不可用,请检查你的网络设置'
            }
        },
        data: {
        },
    }
    </script>
    
    <style lang="less">
    .network {
      position: fixed;
       750px;
      height: 80px;
      background-color: #ffe1e1;
      &_wraper {
         750px;
        height: 80px;
        background-color: #ffe1e1;
        display: flex;
        flex-direction: row;
        align-items: center;
      }
      &_icon {
         36px;
        height: 36px;
        margin-left: 24px;
      }
      &_tips {
         642px;
        height: 62px;
        margin-left: 24px;
        font-size: 26px;
        font-family: Helvetica;
        color: rgba(0, 0, 0, 0.8);
        line-height: 31px;
      }
    }
    </style>
    
    

    引用方法

    <import name="network-tips" src="../../components/network-tips/index.ux"></import>
    <template>
        <div class="home-page">
         <network-tips is-show='{{net_show}}'></network-tips>
         </div>
    </template>
    <script>
    import network from '@system.network'
    data:{
    net_show: false,
    
    }
    
    // 获取当前网络状态
        getNetworkStatus() {
            network.subscribe({
                callback: (data) => {
                    this.netFlag = data.type === 'none' ? false : true
                    this.netStatus = data.type
                }
            })
        },
    </script>
    
  • 相关阅读:
    Mybatis入门
    Spring的xml文件配置方式实现AOP
    jquery简直是太酷炫强大了
    [Google Guava] 2.2-新集合类型
    小规模的流处理框架.Part 1: thread pools
    数据库三大范式和五大约束
    Hibernate:缓存
    MyBatis:缓存配置
    Python:协程
    微信公众号开发之测试账号
  • 原文地址:https://www.cnblogs.com/guanhuohuo/p/12526143.html
Copyright © 2011-2022 走看看