vant状态页组件van-empty - 使用篇

vant状态页组件van-empty - 使用篇

• 文档

---

代码示下：

<van-empty
  class="custom-image"
  image="https://img.yzcdn.cn/vant/custom-empty-image.png"
  description="暂无数据"
/>

---

截图示下：

---

demo案例：

1. 案例截图：
   

2. 案例代码：

<template>
  <div class="hello">
    <!-- 主体区域 -->
    <div class="view-container pdt70">
      <section>
        <!-- 缺省图 · 状态 -->
        <!-- <van-image
            width="10rem"
            height="10rem"
            fit="cover"
            lazy-load
            src="https://img.yzcdn.cn/vant/cat.jpeg"
            alt="缺省图"
          />
          <p class="status_tips">支付成功！</p> -->
        <van-empty
          class="iconpic"
          image="../../../static/images/icon_pay_success.jpg"
          description="支付成功！"
        >          
          <div class="btnbox">
            <van-button class="h44" size="small" color="linear-gradient(to right, #2FB1E7, #0048A9)">继续买菜</van-button>
            <van-button class="h44" size="small" color="#CECECE" to="/" plain>我的篮子</van-button>
          </div>
        </van-empty>
      </section>
    </div>


  </div>
</template>
<script>
import Vue from 'vue';
// import { Lazyload } from 'vant';
// Vue.use(Lazyload);
import { Empty } from 'vant';
Vue.use(Empty);

  export default {
    name: "VIPStatus",
    data () {
      return {

      }
    },
    mounted () {

    },
    methods: {

    }
  }
</script>
<style scoped>
.status_tips{font-size: 30px;color: #333333;font-weight: 600;}
.btnbox{text-align: center;padding-top: 70px;}
.btnbox .van-button{margin: 10px 12px;border-radius: 5px;}
.btnbox .van-button.h44{font-size: 18px!important;min-width: 147px!important;}


</style>
<style>
/* 缺省图 · 状态 */
.custom-status-image .van-empty__image {
    width: 230px;
    height: auto;
}
.custom-status-image .van-empty__description{font-size: 30px;color: #0048A9;font-weight: 600;}

</style>

---

以上就是关于“vant状态页组件van-empty - 使用篇”的全部内容。