最近開發(fā)一個功能需要用到浮動面板FloatPannel，使用的vue2 ,開發(fā)的手機H5頁面，用的UI框架是vant2瓢宦，但是最新的vant4 里面的組件才有FloatPannel 浮動面板，查閱文章，發(fā)現(xiàn)此組件很少减余，就自己封裝了一個。
效果如圖
使用方法引入組件
import FloatPannel from "./appcomponents/FloatPannel.vue";
示例代碼
<FloatPannel>
? ? ? ? ? ? <van-steps direction="vertical" :active="0">
? ? ? ? ? ? ? ? <van-step>
? ? ? ? ? ? ? ? <h3>【城市】物流狀態(tài)1</h3>
? ? ? ? ? ? ? ? <p>2016-07-12 12:40</p>
? ? ? ? ? ? ? ? </van-step>
? ? ? ? ? ? ? ? <van-step>
? ? ? ? ? ? ? ? <h3>【城市】物流狀態(tài)2</h3>
? ? ? ? ? ? ? ? <p>2016-07-11 10:00</p>
? ? ? ? ? ? ? ? </van-step>
? ? ? ? ? ? ? ? <van-step>
? ? ? ? ? ? ? ? <h3>快件已發(fā)貨</h3>
? ? ? ? ? ? ? ? <p>2016-07-10 09:30</p>
? ? ? ? ? ? ? ? </van-step>
? ? ? ? ? ? ? ? </van-steps>
? ? ? ? </FloatPannel>
組件鏈接https://github.com/hairuiVR/FloatPannel
