vue-screening-drawer
A Vue mobile plugin
开发背景
项目当中需要一个右侧弹出的筛选框，有点类似于京东的商品筛选框
image
H5项目使用的UI框架是滴滴开源的mand-mobile，框架里面没有这种功能的筛选框
找了很多框架，没有遇到完全合适的，于是决定自己封装一个
最后的效果是这样的
image
使用手册
安装
npm install vue-screening-drawer --save-dev
引入
import screeningDrawer from 'vue-screening-drawer'
项目使用
html
<screeningDrawer
:isPopupShow="true"
:btnTitle="'提交'"
:item-value="itemValue"
@success="hanleCatch"
/>
// itemValue控制各个模块展示的数据
// @success点击按钮执行的回调函数
// :btnTitle控制选择框按钮
// :isPopupShow控制弹框是否展示
js
itemValue: [
{
title: '所属公司',
key: 'entName',
activeName: ['123456'],
options: [
{
label: '阿里',
value: '1234565'
}
]
},
{
title: '企业金额',
key: 'amt',
activeName: ['10000'],
options: [
{
label: '1万',
value: '10000'
}
]
}
hanleCatch (data) {
console.log(data)
}
// title 各个item的title
// key 各个item的key
// activeName 默认点亮的option
// options item需要展示的list
返回的数据格式
entName: 123456
第一次开源插件，中间遇到的坑非常多，明天会把开源路上遇到坑更新一篇博客
这个插件功能比较简单，后期还会继续的开发一些其他有趣的小轮子
