<mf-drilldown></mf-drilldown>

Drill down顯示用元件
範例

可指定屬性

• lang (String)
  可使用屬性lang指定顯示語言。
  範例

• ajax-url (String)
  ajax搜尋用URL

• head-text (String)
  按鍵區顯示文字
  範例

• reset-text (String)
  重設按鍵用連結之顯示文字
  (default: “reset”)
  範例

• body-class-selected (String)
  根據項目縮小範圍搜尋時設置的body標籤類別名
  (default: “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 此項目為末端(leaf)設定
        .mf_finder_drilldown_item_open 此項目擁有次階層，為顯示次階層的設定
        .mf_finder_drilldown_item_selected 此項目為雖小範圍搜尋時之設定
        .mf_finder_drilldown_item_nohit 此項目為點擊次數為零時的設定
        • 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 指定機能的數據返回

範例