vue-screening-drawer
A Vue mobile plugin
開發(fā)背景
項(xiàng)目當(dāng)中需要一個(gè)右側(cè)彈出的篩選框,有點(diǎn)類似于京東的商品篩選框
image
H5項(xiàng)目使用的UI框架是滴滴開源的mand-mobile,框架里面沒有這種功能的篩選框
找了很多框架,沒有遇到完全合適的,于是決定自己封裝一個(gè)
最后的效果是這樣的
image
使用手冊
安裝
npm install vue-screening-drawer --save-dev
引入
import screeningDrawer from 'vue-screening-drawer'
項(xiàng)目使用
html
<screeningDrawer
:isPopupShow="true"
:btnTitle="'提交'"
:item-value="itemValue"
@success="hanleCatch"
/>
// itemValue控制各個(gè)模塊展示的數(shù)據(jù)
// @success點(diǎn)擊按鈕執(zhí)行的回調(diào)函數(shù)
// :btnTitle控制選擇框按鈕
// :isPopupShow控制彈框是否展示
js
itemValue: [
{
title: '所屬公司',
key: 'entName',
activeName: ['123456'],
options: [
{
label: '阿里',
value: '1234565'
}
]
},
{
title: '企業(yè)金額',
key: 'amt',
activeName: ['10000'],
options: [
{
label: '1萬',
value: '10000'
}
]
}
hanleCatch (data) {
console.log(data)
}
// title 各個(gè)item的title
// key 各個(gè)item的key
// activeName 默認(rèn)點(diǎn)亮的option
// options item需要展示的list
返回的數(shù)據(jù)格式
entName: 123456
第一次開源插件,中間遇到的坑非常多,明天會把開源路上遇到坑更新一篇博客
這個(gè)插件功能比較簡單,后期還會繼續(xù)的開發(fā)一些其他有趣的小輪子