相似商品篩選的插件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

這個插件功能比較簡單，後期還會繼續的開發一些其餘有趣的小輪子插件