更新记录

1.1.8（2024-02-05） 下载此版本

修改组件的弹框虚影不关闭

1.1.7（2024-01-29） 下载此版本

修复高度问题

1.1.6（2023-12-15） 下载此版本

初始化会自动关闭弹框

平台兼容性

msj-down

vue2 头部导航栏下拉弹窗组件。

使用使用

可通过下方的示例及文档说明，进一步了解使用组件相关细节参数。

功能统计

1. 点击事件（插槽 ：文字插槽 、 图标插槽）
2. 点击排序（插槽 ：文字插槽）
3. 下拉列表（单选）（插槽 ：文字插槽 、 内容插槽）
4. 筛选（单选、多选）（插槽 ：文字插槽 、 内容插槽）

点击俩次菜单 关闭弹框，只允许以下才会有效果

• down 下拉列表
• filter 筛选

组件参数

提示：fixedTop 固定是头部和菜单一起固定，暂时不能单独固定

gapHeaderHeight ,如果滚动会出现 顶部有些数据隐藏，那么就是没有给顶部高度，要从当前件上面的数据进行测量高度 。 gapHeaderHeight 如果这个组件上面还有元素的话,那么需要进行测量高度上面元素的高度

导航菜单

menuList 参数

提示：每个类型不同，相应配置参数会不同，以下是基本参数

type 类型

• click 点击
• sort 排序
• down 下拉列表
• filter 筛选

click 点击

Events

案例

<!-- 常规形式 -->
<msj-down
  :menuList="menuList"
  @dianji="dianjiClick"
>
</msj-down>

<!-- 插槽形式 -->
<msj-down
  :menuList="menuList"
  @dianji="dianjiClick"
>
  <template #click>
    <div>slot插槽 - 插槽名为 click </div>
  </template>
  <template #slotIconClick>
    <div>图标插槽 - 插槽名为 slotIconClick </div>
  </template>
</msj-down>

// 常规形式
const menuList = [
  {
    title: '点击事件',
    type: 'click',
    class: 'click',
    emit: 'dianji'
  },
]

// 插槽形式
const menuList = [
  {
    // title: '点击事件', // 用 slot , title 失效
    type: 'click',
    class: 'click',
    slot: 'click',
    slotIcon:'slotIconClick',
    emit: 'dianji'
  },
]
// 以下正常：
// emit 回掉函数 参数 item 当前点击项 index 索引
function dianjiClick(item,index){}

sort 排序

Events

案例

<!-- 常规形式 -->
<msj-down
  :menuList="menuList"
  @paixu="paixuClick"
>
</msj-down>

<!-- 插槽形式 -->
<msj-down
  :menuList="menuList"
  @paixu="paixuClick"
>
  <template #paixuTitle>
    <div>slot插槽 - 插槽名为 paixuTitle </div>
  </template>
</msj-down>

// 常规形式
const menuList = [
  {
    title: '排序',
    type: 'click',
    class: 'click',
    value: 'asc',
    emit: 'paixu'
  },
]

// 插槽形式
const menuList = [
  {
   // title: '排序', // 用 slot , title 失效
    type: 'sort',
    class: 'sort',
    slot: 'paixuTitle',
    value: 'asc',
    emit: 'paixu'
  },
]
// 以下正常：
// emit 回掉函数 参数 item 当前点击项 index 索引
function paixuClick(item,index){}

down 下拉列表

Events

options 下拉列表数据

案例

<!-- 常规形式 -->
<msj-down
  :menuList="menuList"
  @noDownSolt="noDownSoltClick"
  @downConfirmEmit="downConfirmNoSolt"
>
</msj-down>

<!-- 插槽形式 -->
<msj-down
  :menuList="menuList"
  @downSolt="isDownSoltClick"
>
  <template #isSlotTitle>
    <div>slot 插槽 - 插槽名为 isSlotTitle </div>
  </template>

  <template #downPopup>
    <div>插槽内容</div>
  </template>
</msj-down>

// 常规形式
const menuList = [
  {
    title: '下拉列表',
    type: 'down',
    class: 'down',
    value: 'name',
    isAll: true,
    options: [
      {
        label: '姓名',
        value: 'name',
        suffix: '副标题'
      },
      {
        label: '手机号',
        value: 'phone'
      }
    ],
    emit: 'noDownSolt',
    emitConfim: 'downConfirmEmit'
  },
]

// 插槽形式
const menuList = [
  {
    // title: '下拉列表插槽', // 用 slot , title 失效
    type: 'down',
    class: 'no-down',
    slot: 'isSlotTitle',
    popupSlot: 'downPopup',
    emit: 'downSolt',
  },
]

// 常规形式
// emit 回掉函数 参数 item 当前点击项 index 索引
function noDownSoltClick(item,index){}
// emitConfim 回掉函数 参数 value 选中值, item 点击项, itemIndex 点击项索引, index 选中值索引
function downConfirmNoSolt(value, item, itemIndex, index) {}

// 插槽形式
// emit 回掉函数 参数 item 当前点击项 index 索引
function isDownSoltClick(item,index){}

filter 筛选

Events

options 下拉列表数据

type 类型

• radio 单选
• checkbox 多选

value

radio 默认值为： all

checkbox 默认值为： ['all']

radio、checkbox

options 下拉列表数据

案例

<!-- 常规形式 -->
<msj-down
  :menuList="menuList"
  @filterSolt="filterSolt"
  @filterEmitConfim="filterEmitConfim"
>
</msj-down>

<!-- 插槽形式 -->
<msj-down
  :menuList="menuList"
  @filterSolt="filterSolt"
  @filterEmitConfim="filterEmitConfim"
>
  <template #filterTitle>
    <div>slot 插槽 - 插槽名为 filterTitle </div>
  </template>

  <template #popupFilter>
    <div>插槽内容</div>
  </template>
</msj-down>

// 常规形式
const menuList = [
  {
    title: '筛选',
    type: 'filter',
    class: 'filter',
    options: [
      {
        type: 'radio',
        title: '单选',
        value: 'all',
        isAll: true, // 是否存在全部，不是插槽的情况下有效
        options: [
          {
            label: '血压',
            value: 'xueya'
          },
          {
            label: '脑卒',
            value: 'naozu'
          },
          {
            label: '冠心',
            value: 'guanxin'
          }
        ]
      },
      {
        type: 'checkbox',
        title: '多选',
        value: ['all'],
        isAll: true, // 是否存在全部，不是插槽的情况下有效
        options: [
          {
            label: '血压',
            value: 'xueya'
          },
          {
            label: '脑卒',
            value: 'naozu'
          },
          {
            label: '冠心',
            value: 'guanxin'
          },
          {
            label: '慢阻',
            value: 'manzu'
          },
          {
            label: '慢性肾',
            value: 'manxingshen'
          },
          {
            label: '痛风',
            value: 'tongfeng'
          }
        ]
      }
    ],
    emit: 'filterSolt', // 默认的时候 filterConfirm ，并不是插槽
    emitConfim: 'filterEmitConfim'
    // slot: 'filterTitle', // text
    // popupSlot: 'popupFilter', // 弹框内容
  }
]

// 插槽形式
const menuList = [
  {
    // title: '筛选', // 用 slot , title 失效
    type: 'filter',
    class: 'filter',
    emit: 'filterSolt', // 点击文字时  有 slot 失效 默认的时候 filterConfirm ，并不是插槽
    emitConfim: 'filterEmitConfim', // 确实按钮
    slot: 'filterTitle', // text
    popupSlot: 'popupFilter', // 弹框内容
  }
]

// 常规形式
// emit 回掉函数 参数 item 当前点击项 index 索引
function filterSolt(item,index){}
// emitConfim 回掉函数 参数 value 选中值, item 点击项, index 点击项索引
function downConfirmNoSolt(value, item, index) {}

// 插槽形式
// emit 回掉函数 参数 item 当前点击项 index 索引
function filterSolt(item,index){}
// emitConfim 回掉函数 参数 value 选中值, item 点击项, index 点击项索引
function downConfirmNoSolt(value, item, index) {}

公共插槽

提示：header 如 fixedTop 为 false , 那 header 代码在 导航菜单 上面， 如 fixedTop 为 true , 那 header 代码在 导航菜单 里面 就可以固定，但菜单数据还是显示在 header 下方

案例

<msj-down
  :menuList="menuList"
>
  <template #header>
    <div>头部插槽-header</div>
  </template>
  <template>
    <div>内容插槽-无</div>
  </template>
</msj-down>

初始化，恢复默认值

初始化会自动关闭弹框

案例

<msj-down
  :menuList="menuList"
  ref="baseDown"
>
</msj-down>

// 第一种情况 全部初始化
 this.$refs.baseDown.initData()
 this.$refs.baseDown.initData(null)
 this.$refs.baseDown.initData(null, true)
 this.$refs.baseDown.initData([0,1])
 this.$refs.baseDown.initData([0,1], true)

 // 第二种情况 使用默认初始化
 // 数组为
 // 每一项中 有 isRest 才会初始化
 const menuList = [
    {
      title: '类型筛选',
      type: 'down',
      value: 'all',
      options: [
        {
          label: '全部',
          value: 'all'
        },
        {
          label: 'CC',
          value: 'cici'
        },
      ],
      isRest: true
    }
 ]
 this.$refs.baseDown.initData(null, false)
 // 第三种情况 使用索引
 // 数组为
const menuList = [
    {
      title: '类型筛选',
      type: 'down',
      value: 'all',
      options: [
        {
          label: '全部',
          value: 'all'
        },
        {
          label: 'CC',
          value: 'cici'
        },
      ]
    },
    {
      title: '筛选',
      type: 'down',
      value: 'all',
      options: [
        {
          label: '全部',
          value: 'all'
        },
        {
          label: 'XX',
          value: 'xixi'
        },
      ]
    }
 ]
 this.$refs.baseDown.initData([0,1], false)

关闭弹窗

案例

<msj-down
  ref="baseDown"
>
</msj-down>

 this.$refs.baseDown.handlePopupHide()