最近开发一个功能需要用到浮动面板FloatPannel,使用的vue2 ,开发的手机H5页面,用的UI框架是vant2,但是最新的vant4 里面的组件才有FloatPannel 浮动面板,查阅文章,发现此组件很少,就自己封装了一个。
效果如图
使用方法引入组件
import FloatPannel from "./appcomponents/FloatPannel.vue";
示例代码
<FloatPannel>
<van-steps direction="vertical" :active="0">
<van-step>
<h3>【城市】物流状态1</h3>
<p>2016-07-12 12:40</p>
</van-step>
<van-step>
<h3>【城市】物流状态2</h3>
<p>2016-07-11 10:00</p>
</van-step>
<van-step>
<h3>快件已发货</h3>
<p>2016-07-10 09:30</p>
</van-step>
</van-steps>
</FloatPannel>
组件链接https://github.com/hairuiVR/FloatPannel