<mf-drilldown></mf-drilldown>

用来显示层级筛选的自定义元素
使用示例

可指定的属性

• lang (String)
  您可以使用属性lang指定显示语言。
  使用示例

• ajax-url (String)
  ajax搜索URL

• head-text (String)
  设置此自定义元素文本标题
  使用示例

• reset-text (String)
  重置按钮上的文本
  (默认值: “reset”)
  使用示例

• body-class-selected (String)
  过滤器在使用中时，body标签class的名称
  (默认值: “mf_finder_drilldown_selected”)
  使用示例

示例合集

下面列出了一些自主页面设计的例子。

• 示例合集

DOM结构和class设置

• div.mf_finder_drilldown
  • (插槽“head”，可以自定义以下内容)
    • 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指定的函数返回的数据

使用示例