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

文档

代码示下：

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

截图示下：

demo案例：

案例截图：
案例代码：

<template><div class="hello"><!-- 主体区域 --><div class="view-container pdt70"><section><!-- 缺省图 · 状态 --><!-- <van-imagewidth="10rem"height="10rem"fit="cover"lazy-loadsrc="https://img.yzcdn.cn/vant/cat.jpeg"alt="缺省图"/><p class="status_tips">支付成功！</p> --><van-emptyclass="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 - 使用篇”的全部内容。

vant状态页组件van-empty - 使用篇相关推荐

elementUI组件el-dropdown - 踩坑篇
选择即改变:click选择哪个,就显示当前的值,页面UI显示并伴随css样式的变化. 重点:v-if 和 v-else-if 的搭配使用,缺一不可. 效果图: 正确的代码如下: 重要提示: 我之前使用 ...
Mint-UI框架router-link返回上一页的方法 - 踩坑篇
使用mint-ui框架的header导航组件,<router-link to="">如何实现点击返回上一页? 代码如下: <template><!-- ...
在vue中实现picker样式_vue vant中picker组件的使用
1.引入 import { Picker } from "vant" 2.使用 components: { vanPicker: Picker, } 3.渲染 show-toolb ...
基于GBT28181：SIP协议组件开发-----------第四篇SIP注册流程eXosip2实现(一)
原创文章,引用请保证原文完整性,尊重作者劳动,原文地址http://www.cnblogs.com/qq1269122125/p/3945294.html. 上章节讲解了利用自主开发的组件SIP组件l ...
前端组件设计之理论篇
前端组件设计之理论篇前言一.什么是前端组件二.组件设计原则 1.单一职责 2.封装 3.组合 4.复用 5.富有意义 6.可测试三.总结前言什么是前端组件?对于一个前端开发人员来说再熟悉不 ...
vue 循环tabs 标签页组件_vue学习笔记--v-for循环标签页label并实现根据不同label表格切换...
目标:用标签页组件实现点击不同标签显示表格内容,标签页内lab le 和表格数据都是循环得到的. 效果如图: 2.png 首先实现pane 循环出header. v-model="tabK ...
修改vant 弹窗Dialog组件调用是确认按钮与取消按钮的文字
文章目录修改vant 弹窗Dialog组件调用是确认按钮与取消按钮的文字效果图 · 示例: 重要代码如下(部分): 代码使用 · 注意事项: 官方文档参数定义 · 注意事项: 文章阅读: 修改va ...
phpcmsV9栏目内文章批量移动后，新的内容页模板不生效 -分析篇
栏目A下面的文章a移动到栏目B下,刷新各种缓存之后,打开栏目B下面文章a之后发现:文章a的内容页UI样式效果竟然还是文章a之前在栏目A时候的模板样式! 为什么不能使用栏目B的show内容页模板样式呢? ...
Bootstrap翻页组件
翻页组件一些简单的网站,比如博客或者杂志网站,希望用更少的标记和样式,来创建简单的"前一页"和"后一页"的翻页组件. Bootstrap中,只需为列表设置.p ...

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

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

代码示下：

截图示下：

demo案例：

vant状态页组件van-empty - 使用篇相关推荐

最新文章

热门文章