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ā)一些其他有趣的小輪子