zoukankan      html  css  js  c++  java
  • 组件封装-无数据组件

    1. 组件内容

    <template>
      <div class="common_nodata_box" :style="{height: height}">
        <div class="common_nodata_bg" :style="{background: `url(${noDataImage}) no-repeat center center`}"></div>
        <span>{{text}}</span>
      </div>
    </template>
    
    <script>
    import noDataImage from "@/assets/commonNodata.png";
    export default {
      name: "commonNoData",
      props: {
        text: {
          type: String,
          default: "抱歉,暂无数据"
        },
        height: {
          type: String // 比如:"600px"
        },
        noDataImage: {
          default: noDataImage
        }
      }
    };
    </script>
    
    <style lang="less" scoped>
    .common_nodata_box {
       100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #999999;
      font-size: 14px;
      .common_nodata_bg {
         150px;
        height: 120px;
      }
    }
    </style>
    

    2. 使用

    <template>
      <div>
        <div v-if="hasData">内容</div>
        <CommonNoData v-else height="600px" :noDataImage="require('@/assets/pic-02.png')" text="无数据"></CommonNoData>
      </div>
    </template>
    
    <script>
    import CommonNoData from "@/components/common-nodata";
    export default {
      components: {
        CommonNoData
      },
      data() {
        return {
          hasData: true
        };
      }
    };
    </script>
    
  • 相关阅读:
    [hdu4035]maze
    [codeforce][148d]
    [bzoj3507]通配符匹配
    [BZOJ4831]
    子串
    【洛谷1373】小a和uim之大逃离
    【JZOJ6303】演员
    [jzoj6296]选票
    字符串哈希
    [ABC137d&e]RE
  • 原文地址:https://www.cnblogs.com/XHappyness/p/12426901.html
Copyright © 2011-2022 走看看