<mf-drilldown-toggle></mf-drilldown-toggle>

用来显示带有切换功能层级筛选的自定义元素

可指定的属性

• ajax-url (String)
  ajax搜索URL

• body-class-toggle (String)
  要附加到body标签的class的名称

• init-on (Boolean)
  初始状态下的切换功能

• head-text (String)
  设置此自定义元素文本标题
  与mf-drilldown的属性head-text相同

• reset-text (String)
  重置按钮上的文本
  (默认值: “reset”)
  和mf-drilldown的属性reset-text相同

• reset-badge-text (String)
  和重置按钮相同的文本，以徽章形式显示在切换按钮上
  (默认值: “reset”)

• body-class-selected (String)
  过滤器在使用中时，body标签class的名称
  (默认值: “mf_finder_drilldown_selected”)
  与mf-drilldown属性body-class-selected相同

DOM结构和class设置

• div.mf_toggle_wrap.mf_finder_drilldown_toggle
  .mf_toggle_on 开启toggle
  • div.mf_toggle_button_wrap
    • a.mf_toggle_button Toggle按钮
      :点击这里切换开/关状态，属性body-class-toggle会被从body标签中移除。
      • div.mf_finder_drilldown_reset_badge
        • 重置按钮仅在出现层级搜索结果时显示
          :点击这里取消层级过滤选择
  • div.mf_toggle_content_wrap
    • div.mf_toggle_content
      • div.mf_finder_drilldown
        • header.mf_finder_drilldown_head
          • 属性head-text的值(如果为空，显示 )
        • ul.mf_finder_drilldown_items
          • li.mf_finder_drilldown_item 每个层级筛选项目的输出
            .mf_finder_drilldown_item_depth_<depth>depth是层级结构的深度
            • div
              .mf_finder_drilldown_item_leaf 在项目属叶层级的时候使用
              .mf_finder_drilldown_item_open 当项目具有子级别并且此子级别正在表示中时使用
              .mf_finder_drilldown_item_selected 当按照此项目为最终范围进行搜索时使用
              .mf_finder_drilldown_item_nohit 当这个项目下得出的搜索结果数是0
              • span.mf_finder_drilldown_item_bullet 项目符号，如果此项目具有子级别，则为空
              • a.mf_finder_drilldown_item_bullet 允许用户显示/隐藏子层次结构的项目符号，如果这个项目没有子层次结构，则为空
              • a.mf_finder_drilldown_item_link 链接供用户精简此项目搜索
                • span.mf_finder_drilldown_item_title
                  • [项目名称]
                • span.mf_finder_drilldown_item_count
                  • [此项目下得出搜索结果数]
            • ul.mf_finder_drilldown_item_children 如果此项目没有子级别，则为空
              • 子级别中的每个项目重复使用 li.mf_finder_drilldown_item
        • div.mf_finder_drilldown_reset 仅在出现搜索结果时显示
          • a > 属性reset-text的值

DOM定制的插槽

有关插槽，请参阅下面的说明

• Vue.js 具名插槽
• Vue.js 作用域插槽

插槽名称 head

可以引用的属性

• self : 这个自定义元素的一个实例
• customProp : 属性:custom-prop-func通过在指定的函数返回的数据

与mf-drilldown插槽head类似