类似商品筛选的插件vue-screening-drawer

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

  
  
  // 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
    

第一次开源插件，中间遇到的坑非常多，明天会把开源路上遇到坑更新一篇博客

这个插件功能比较简单，后期还会继续的开发一些其他有趣的小轮子