更新记录

v1.0.0(2022-01-13)

初次发布


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.3.0 app-vue × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × ×

兼容平台说明

目前测试的平台有H5、微信小程序、APP都可以兼容。

使用说明

在页面中使用

<i671-filter
  @result="filterResult"
  :headerTextList="headerTextList"
  :checkboxList="checkboxList"
  :radioList="radioList"></i671-filter>

参数

参数 类型 默认值 是否必填 使用说明
headerTextList Array [] 头部默认文字与key
radioList Array [] 单选数据列表(第一个)
checkboxList Array [] 多选数据列表(最后一个)
@result EventHandle 选择时触发,返回Object

1.headerTextList属性说明(数组必须为三项)

名称 说明 是否必填
name 名称
key key

2.radioList属性说明

名称 说明 是否必填
name 名称
key key

3.checkboxList属性说明

const checkboxList = ['第一项', '第二项', '第三项', ....]

使用实例

<template>
  <view class="eg-filter">
    <i671-filter
      @result="filterResult"
      :headerTextList="headerTextList"
      :checkboxList="checkboxList"
      :radioList="radioList"></i671-filter>

    <view class="eg-filter-list">
    </view>
  </view>
</template>

<script>
  import i671Filter from '@/components/i671-filter/i671-filter.vue'

  export default {
    data () {
      return {
        headerTextList: [{
          name: '户型',
          key: 'house_type'
        }, {
          name: '价格',
          key: 'price_sort'
        }, {
          name: '配置筛选',
          key: 'filtrate'
        }],

        // 户型
        radioList: [{
          name: '全部',
          key: 0
        }, {
          name: '单间',
          key: 1
        }, {
          name: '公寓',
          key: 2
        }, {
          name: '套房',
          key: 3
        }, {
          name: '写字楼',
          key: 4
        }],

        // 多选
        checkboxList: [
          '冰箱', '电视', '洗衣机',
          '热水器', '空调', '宽带',
          '沙发', '床', '暖气',
          '衣柜', '可做饭', '卫生间',
          '阳台', '智能门锁', '油烟机',
          '燃气灶', '座椅', '拎包入住'
        ]
      }
    },
    components: {
      i671Filter
    },
    methods: {
      // 获取结果
      filterResult (data) {
        console.log(data)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .eg-filter {
    .eg-filter-list {
      padding-top: 100rpx;
    }
  }
</style>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问