赞助商成为赞助商

树形视图 Vue 组件

树形视图 Vue 组件表示 Framework7 的 树形视图 组件。

树形视图组件

包括以下组件

树形视图属性

属性类型默认值描述
<f7-treeview-item> 属性
切换布尔启用树形视图项目切换按钮。默认启用（如果存在子元素）
项目切换布尔false将整个树形视图项目启用为切换
可选择布尔false使项目可选择
选择布尔使项目选中
展开布尔false定义默认展开还是不展开项目
标签字符串项目标签文本
加载子级布尔false在展开时您需要加载子级项目时启用。
链接字符串
布尔		如果指定为字符串，则启用链接和链接 URL。与 href 属性相同
<f7-treeview-item> 图标相关的属性
图标大小字符串
数字		图标大小，按 px
图标颜色字符串默认颜色 中的一种图标颜色
图标字符串自定义图标类
图标 F7字符串F7 图标字体图标的名称
图标 Material字符串Material 图标字体图标的名称
图标 iOS字符串以冒号分隔图标系列和图标名称的形式，用于 iOS 主题，例如 f7:house
图标 MD字符串以冒号分隔图标系列和图标名称的形式，用于 MD 主题，例如 material:home
<f7-treeview-item> 导航/路由相关的属性
href字符串
布尔		#要加载的页面的 URL。如果为布尔 href="false" 则不会添加 href 标签
目标字符串链接目标属性的值，例如 _blank、_self 等等
视图字符串要加载该页面的视图 CSS 选择器。或 current 在当前视图中加载。
外部链接布尔启用以绕过 Framework7 的链接点击处理程序
后退布尔启用后退导航链接
在新标签页打开字符串允许将页面路由作为模态框或面板打开。可以是 popup、loginScreen、sheet、popover 或 panel
强制布尔强制页面加载并忽略历史记录中的上一页（与 back 属性一起使用）
重新加载当前页布尔重新加载新页面，而不是当前活动页面
重新加载上一页布尔使用路由中的新页面替换历史记录中的上一页
重新加载所有布尔加载新页面并从历史记录和 DOM 中删除所有上一页
重新加载详细信息布尔在主从视图中重新加载详细信息页面
动画布尔禁用页面动画
过渡字符串自定义页面过渡 的名称
忽略缓存布尔忽略缓存
路由标签 ID字符串可路由标签 ID
路由属性对象将传入目标路由组件的其他属性的对象
阻止路由布尔false如果设置，Framework7 路由器不会处理
<f7-treeview-item> 动作相关的属性
面板打开字符串
布尔		在单击后要打开的面板 CSS 选择器。如果 DOM 中只有左侧或右侧面板，也可以是 left 或 right。
面板关闭字符串
布尔		单击后关闭面板
面板切换字符串
布尔		单击时切换面板的 CSS 选择器。或如果 DOM 中只有左侧或右侧面板，则可以是 left 或 right。
actions-open字符串
布尔		单击时打开的操作表的 CSS 选择器
actions-close字符串
布尔		单击时关闭的操作表的 CSS 选择器。或布尔属性用于关闭当前打开的操作表
popup-open字符串
布尔		单击时打开的弹出框的 CSS 选择器
popup-close字符串
布尔		单击时关闭的弹出框的 CSS 选择器。或布尔属性用于关闭当前打开的弹出框
popover-open字符串
布尔		单击时打开的 popovers 的 CSS 选择器
popover-close字符串
布尔		单击时关闭的弹出框的 CSS 选择器。或布尔属性用于关闭当前打开的弹出框
sheet-open字符串
布尔		单击时打开的 sheet modal 的 CSS 选择器
sheet-close字符串
布尔		单击时关闭的 sheet modal 的 CSS 选择器。或布尔属性用于关闭当前打开的 sheet modal
login-screen-open字符串
布尔		单击时打开登录页面的 CSS 选择器
login-screen-close字符串
布尔		单击时关闭登录页面的 CSS 选择器。或布尔属性用于关闭当前打开的登录页面
sortable-enable字符串
布尔		单击时启用的可排序列表的 CSS 选择器
sortable-disable字符串
布尔		单击时禁用的可排序列表的 CSS 选择器。或布尔属性用于关闭当前打开的可排序列表
sortable-toggle字符串
布尔		单击时切换的可排序列表的 CSS 选择器。或布尔属性用于切换当前打开/关闭的可排序列表
searchbar-enable字符串
布尔		单击时启用的可扩展搜索栏的 CSS 选择器。或布尔属性用于启用第一个找到的 Searchbar
searchbar-disable字符串
布尔		单击时禁用的可扩展搜索栏的 CSS 选择器。或布尔属性用于 disable 第一个找到的 Searchbar
searchbar-toggle字符串
布尔		单击时切换的可扩展搜索栏的 CSS 选择器。或布尔属性用于切换第一个找到的 Searchbar
searchbar-clear字符串
布尔		单击时清除的可扩展搜索栏的 CSS 选择器。或布尔属性用于清除第一个找到的 Searchbar
card-open字符串
布尔		单击时打开的可扩展卡片的 CSS 选择器。或布尔属性用于打开第一个找到的可扩展卡片
card-close字符串
布尔		单击时关闭的可扩展卡片的 CSS 选择器。或布尔属性用于 close 当前打开的可扩展卡片
card-prevent-open布尔带有此 prop 的元素单击时，不会打开其父级可扩展卡片

树形图事件

事件描述
<f7-treeview-item> 事件
click当用户单击树形视图项时，将触发事件
treeview:open在项目打开时，将触发事件
treeview:close在项目关闭时，将触发事件
treeview:loadchildren事件将在具有 loadChildren 属性的 Treeview 项首次打开时触发。它在 event.detail 中包含函数来隐藏加载 preloader。

Treeview 项插槽

Treeview Vue 组件（<f7-treeview-item>）具有用于自定义元素的其他插槽

<f7-treeview-item label="Item 1">
  <img src="path-to-my-image.jpg" slot="media">
  <div slot="root-start">Root Start</div>
  <div slot="root">Root End</div>
  <div slot="content-start">Content Start</div>
  <div slot="content">Content End</div>
  <span slot="label-start">Before Label</span>
  <f7-treeview-item label="Sub Item 1" />
  ...
</f7-treeview-item>

<!-- Renders to: -->
<div class="treeview-item">
  <div class="treeview-item-root">
    <div>Root Start</div>
    <div class="treeview-toggle"></div>
    <div class="treeview-item-content">
      <div>Content Start</div>
      <img src="path-to-my-image.jpg">
      <div class="treeview-item-label">
        <span>Before Label</span>
        Item 1
      </div>
      <div>Content End</div>
    </div>
  </div>
  <div class="treeview-item-children">
    <div class="treeview-item">
      <div class="treeview-item-root">
        <div class="treeview-item-content">
          <div class="treeview-item-label">Sub Item 1</div>
        </div>
      </div>
    </div>
    ...
  </div>
  <div>Root End</div>
</div>

示例

treeview.vue
<template>
  <f7-page>
    <f7-navbar title="Treeview" />

    <f7-block-title>Basic tree view</f7-block-title>
    <f7-block strong outline-ios class="no-padding-horizontal">
      <f7-treeview>
        <f7-treeview-item label="Item 1">
          <f7-treeview-item label="Sub Item 1">
            <f7-treeview-item label="Sub Sub Item 1" />
            <f7-treeview-item label="Sub Sub Item 2" />
          </f7-treeview-item>
          <f7-treeview-item label="Sub Item 2">
            <f7-treeview-item label="Sub Sub Item 1" />
            <f7-treeview-item label="Sub Sub Item 2" />
          </f7-treeview-item>
        </f7-treeview-item>
        <f7-treeview-item label="Item 2">
          <f7-treeview-item label="Sub Item 1">
            <f7-treeview-item label="Sub Sub Item 1" />
            <f7-treeview-item label="Sub Sub Item 2" />
          </f7-treeview-item>
          <f7-treeview-item label="Sub Item 2">
            <f7-treeview-item label="Sub Sub Item 1" />
            <f7-treeview-item label="Sub Sub Item 2" />
          </f7-treeview-item>
        </f7-treeview-item>
        <f7-treeview-item label="Item 3" />
      </f7-treeview>
    </f7-block>

    <f7-block-title>With icons</f7-block-title>
    <f7-block strong outline-ios class="no-padding-horizontal">
      <f7-treeview>
        <f7-treeview-item label="images" icon-f7="folder_fill">
          <f7-treeview-item label="avatar.png" icon-f7="photo_fill" />
          <f7-treeview-item label="background.jpg" icon-f7="photo_fill" />
        </f7-treeview-item>
        <f7-treeview-item label="documents" icon-f7="folder_fill">
          <f7-treeview-item label="cv.docx" icon-f7="doc_text_fill" />
          <f7-treeview-item label="info.docx" icon-f7="doc_text_fill" />
        </f7-treeview-item>
        <f7-treeview-item label=".gitignore" icon-f7="logo_github" />
        <f7-treeview-item label="index.html" icon-f7="doc_text_fill" />
      </f7-treeview>
    </f7-block>

    <f7-block-title>With checkboxes</f7-block-title>
    <f7-block strong outline-ios class="no-padding-horizontal">
      <f7-treeview>
        <f7-treeview-item label="images" icon-f7="folder_fill">
          <template #content-start>
            <f7-checkbox
              :checked="Object.values(checkboxes.images).indexOf(false) < 0"
              :indeterminate="
                Object.values(checkboxes.images).indexOf(false) >= 0 &&
                Object.values(checkboxes.images).indexOf(true) >= 0
              "
              @change="
                (e) =>
                  Object.keys(checkboxes.images).forEach(
                    (k) => (checkboxes.images[k] = e.target.checked),
                  )
              "
            />
          </template>
          <f7-treeview-item label="avatar.png" icon-f7="photo_fill">
            <template #content-start>
              <f7-checkbox
                :checked="checkboxes.images['avatar.png']"
                @change="checkboxes.images['avatar.png'] = $event.target.checked"
              />
            </template>
          </f7-treeview-item>
          <f7-treeview-item label="background.jpg" icon-f7="photo_fill">
            <template #content-start>
              <f7-checkbox
                :checked="checkboxes.images['background.jpg']"
                @change="checkboxes.images['background.jpg'] = $event.target.checked"
              />
            </template>
          </f7-treeview-item>
        </f7-treeview-item>
        <f7-treeview-item label="documents" icon-f7="folder_fill">
          <template #content-start>
            <f7-checkbox
              :checked="Object.values(checkboxes.documents).indexOf(false) < 0"
              :indeterminate="
                Object.values(checkboxes.documents).indexOf(false) >= 0 &&
                Object.values(checkboxes.documents).indexOf(true) >= 0
              "
              @change="
                (e) =>
                  Object.keys(checkboxes.documents).forEach(
                    (k) => (checkboxes.documents[k] = e.target.checked),
                  )
              "
            />
          </template>
          <f7-treeview-item label="cv.docx" icon-f7="doc_text_fill">
            <template #content-start>
              <f7-checkbox
                :checked="checkboxes.documents['cv.docx']"
                @change="checkboxes.documents['cv.docx'] = $event.target.checked"
              />
            </template>
          </f7-treeview-item>
          <f7-treeview-item label="info.docx" icon-f7="doc_text_fill">
            <template #content-start>
              <f7-checkbox
                :checked="checkboxes.documents['info.docx']"
                @change="checkboxes.documents['info.docx'] = $event.target.checked"
              />
            </template>
          </f7-treeview-item>
        </f7-treeview-item>
        <f7-treeview-item label=".gitignore" icon-f7="logo_github">
          <template #content-start>
            <f7-checkbox
              :checked="checkboxes['.gitignore']"
              @change="checkboxes['.gitignore'] = $event.target.checked"
            />
          </template>
        </f7-treeview-item>
        <f7-treeview-item label="index.html" icon-f7="doc_text_fill">
          <template #content-start>
            <f7-checkbox
              :checked="checkboxes['index.html']"
              @change="checkboxes['index.html'] = $event.target.checked"
            />
          </template>
        </f7-treeview-item>
      </f7-treeview>
    </f7-block>

    <f7-block-title>Whole item as toggle</f7-block-title>
    <f7-block strong outline-ios class="no-padding-horizontal">
      <f7-treeview>
        <f7-treeview-item item-toggle label="images" icon-f7="folder_fill">
          <f7-treeview-item label="avatar.png" icon-f7="photo_fill" />
          <f7-treeview-item label="background.jpg" icon-f7="photo_fill" />
        </f7-treeview-item>
        <f7-treeview-item item-toggle label="documents" icon-f7="folder_fill">
          <f7-treeview-item label="cv.docx" icon-f7="doc_text_fill" />
          <f7-treeview-item label="info.docx" icon-f7="doc_text_fill" />
        </f7-treeview-item>
        <f7-treeview-item label=".gitignore" icon-f7="logo_github" />
        <f7-treeview-item label="index.html" icon-f7="doc_text_fill" />
      </f7-treeview>
    </f7-block>

    <f7-block-title>Selectable</f7-block-title>
    <f7-block strong outline-ios class="no-padding-horizontal">
      <f7-treeview>
        <f7-treeview-item
          selectable
          :selected="selectedItem === 'images'"
          label="images"
          icon-f7="folder_fill"
          @click="toggleSelectable($event, 'images')"
        >
          <f7-treeview-item
            selectable
            :selected="selectedItem === 'avatar.png'"
            label="avatar.png"
            icon-f7="photo_fill"
            @click="toggleSelectable($event, 'avatar.png')"
          />
          <f7-treeview-item
            selectable
            :selected="selectedItem === 'background.jpg'"
            label="background.jpg"
            icon-f7="photo_fill"
            @click="toggleSelectable($event, 'background.jpg')"
          />
        </f7-treeview-item>
        <f7-treeview-item
          selectable
          :selected="selectedItem === 'documents'"
          label="documents"
          icon-f7="folder_fill"
          @click="toggleSelectable($event, 'documents')"
        >
          <f7-treeview-item
            selectable
            :selected="selectedItem === 'cv.docx'"
            label="cv.docx"
            icon-f7="doc_text_fill"
            @click="toggleSelectable($event, 'cv.docx')"
          />
          <f7-treeview-item
            selectable
            :selected="selectedItem === 'info.docx'"
            label="info.docx"
            icon-f7="doc_text_fill"
            @click="toggleSelectable($event, 'info.docx')"
          />
        </f7-treeview-item>
        <f7-treeview-item
          selectable
          :selected="selectedItem === '.gitignore'"
          label=".gitignore"
          icon-f7="logo_github"
          @click="toggleSelectable($event, '.gitignore')"
        />
        <f7-treeview-item
          selectable
          :selected="selectedItem === 'index.html'"
          label="index.html"
          icon-f7="doc_text_fill"
          @click="toggleSelectable($event, 'index.html')"
        />
      </f7-treeview>
    </f7-block>

    <f7-block-title>Preload children</f7-block-title>
    <f7-block strong outline-ios class="no-padding-horizontal">
      <f7-treeview>
        <f7-treeview-item
          toggle
          load-children
          icon-f7="person_2_fill"
          label="Users"
          @treeview:loadchildren="loadChildren"
        >
          <f7-treeview-item
            v-for="(item, index) in loadedChildren"
            :key="index"
            icon-f7="person_fill"
            :label="item.name"
          />
        </f7-treeview-item>
      </f7-treeview>
    </f7-block>

    <f7-block-title>With links</f7-block-title>
    <f7-block strong outline-ios class="no-padding-horizontal">
      <f7-treeview>
        <f7-treeview-item icon-f7="square_grid_2x2_fill" item-toggle label="Modals">
          <f7-treeview-item link="/popup/" icon-f7="link" label="Popup" />
          <f7-treeview-item link="/dialog/" icon-f7="link" label="Dialog" />
          <f7-treeview-item link="/action-sheet/" icon-f7="link" label="Action Sheet" />
        </f7-treeview-item>
        <f7-treeview-item icon-f7="square_grid_2x2_fill" item-toggle label="Navigation Bars">
          <f7-treeview-item link="/navbar/" icon-f7="link" label="Navbar" />
          <f7-treeview-item link="/toolbar-tabbar/" icon-f7="link" label="Toolbar & Tabbar" />
        </f7-treeview-item>
      </f7-treeview>
    </f7-block>
  </f7-page>
</template>
<script>
import {
  f7Page,
  f7Navbar,
  f7BlockTitle,
  f7Block,
  f7Treeview,
  f7TreeviewItem,
  f7Checkbox,
} from 'framework7-vue';
import $ from 'dom7';

export default {
  components: {
    f7Page,
    f7Navbar,
    f7BlockTitle,
    f7Block,
    f7Treeview,
    f7TreeviewItem,
    f7Checkbox,
  },
  data() {
    return {
      checkboxes: {
        images: {
          'avatar.png': false,
          'background.jpg': false,
        },
        documents: {
          'cv.docx': false,
          'info.docx': false,
        },
        '.gitignore': false,
        'index.html': false,
      },
      selectedItem: null,
      loadedChildren: [],
    };
  },
  methods: {
    toggleSelectable(e, item) {
      const self = this;
      if ($(e.target).is('.treeview-toggle')) return;
      self.selectedItem = item;
    },
    loadChildren(e, done) {
      const self = this;
      setTimeout(() => {
        // call done() to hide preloader
        done();
        self.loadedChildren = [
          {
            name: 'John Doe',
          },
          {
            name: 'Jane Doe',
          },
          {
            name: 'Calvin Johnson',
          },
        ];
      }, 2000);
    },
  },
};
</script>
提高此文档
本页内容