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

vue-screening-drawer

A Vue mobile pluginhtml

开发背景

项目当中须要一个右侧弹出的筛选框，有点相似于京东的商品筛选框vue

H5项目使用的UI框架是滴滴开源的mand-mobile，框架里面没有这种功能的筛选框npm

找了不少框架，没有遇到彻底合适的，因而决定本身封装一个bash

最后的效果是这样的markdown

使用手册

安装

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
    
复制代码

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

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