组件用.vue还是.js_Vue.js的目录组件

组件用.vue还是.js

侧边目录 (vue-side-catalog)

A vue-based side catalog component.

基于vue的辅助目录组件。

View Demo 查看演示 View Github 查看Github

安装 (Install)

npm install vue-side-catalog -S

开始 (Start)

<template>
 <div id="app">
   <div class="demo">
      <h1>JavaScript</h1>
      <h2>历史</h2>
      <h3>肇始于网景</h3>
      <h3>微软采纳</h3>
      <h3>标准化</h3>
      <h2>概论</h2>
      <h2>特性</h2>
   </div>
  <side-catalog 
    v-bind="catalogProps"
  ></side-catalog>
  </div>
</template>
import SideCatalog from 'vue-side-catalog'
import 'vue-side-catalog/lib/vue-side-catalog.css'
export default {
  components: {
    SideCatalog,
  },
  data() {
    return {
      catalogProps:{
         containerElementSelector: '.demo',
      },
    };
  },
}

Note： The containerElementSelector attribute is required and specifies the container of the article.

注意： containerElementSelector属性是必需的，它指定商品的容器。

The effect is as follows：

效果如下：

例子 (Examples)

自定义目录标签 (Custom catalog labels)

By default, the component will use the header tag of a direct subset of thecontainerElementSelector element as the directory content., The corresponding rule is:

默认情况下，该组件将使用containerElementSelector元素的直接子集的header标记作为目录内容。相应的规则是：

• h2 => First level directory

  h2 => First level directory

• h3 => Secondary directory

  h3 => Secondary directory

• h4 => Tertiary directory

  h4 => Tertiary directory

• h5 => Fourth level directory

  h5 => Fourth level directory

To modify this rule, you can use the headList attribute. The default value of this attribute is["h2", "h3", "h4", "h5"]corresponding to the above rule

要修改此规则，可以使用headList属性。 该属性的默认值为与上述规则相对应的["h2", "h3", "h4", "h5"]

Note: Custom title tags currently only support html tags that are a direct subset of the containerElementSelector element

注意：自定义标题标记当前仅支持html标记，这些标记是containerElementSelector元素的直接子集

data(){
    return {
      catalogProps:{
        headList: ["h1", "h2", "h3", "h4", "h5"], // make h1 a first-level directory
        // headList: ["h3", "h1", "p", "span"], // specifying different tags as directories
      },
    };
  },

h1 as first-level directory:

h1作为第一级目录：

自定义目录元素 (Custom catalog elements)

Unlike the custom directory tags above, custom directory elements can support elements with ref attributes ofany level, as well as components Requires refList properties

与上面的自定义目录标签不同，自定义目录元素可以支持elements with ref attributes any level elements with ref attributes的elements with ref attributes以及需要refList属性的组件。

<template>
    <h1>JavaScript</h1>
    <h2 ref="t1">历史</h2>
    <h3 ref="t1-1">肇始于网景</h3>
    <h3 ref="t1-2">微软采纳</h3>
    <h3 ref="t1-3">标准化</h3>
    <h2 ref="t2">概论</h2>
    <h2 ref="t3">特性</h2>
    <version ref="t4"/>
    <!-- ... -->
</template>

//...
import Version from './components/Version';
export default {
  components: {
    // ...
    Version,
  },
  data() {
    return {
      catalogProps:{
         containerElementSelector: '.demo',
         refList:[
          {
            ref: 't1'
          },
          {
            ref: 't1-1',
            level: 2 // designated as a secondary directory
          },
          {
            ref: 't1-2',
            level: 2
          },
          {
            ref: 't1-3',
            level: 2
          },
          {
            ref: 't2'
          },
          {
            ref: 't3'
          },
          {
            ref: 't4',
            title: '版本' // the component needs to set the title separately (the innerText is taken by default)
          },
        ]
      },
    };
  },
}

The effect is as follows:

效果如下：

Note: If headList and refList are set at the same time, headList will be ignored.

注意：如果同时设置headList和refList ，则将忽略headList 。

指定元素滚动 (Specify element scroll)

You can also use scrollElementSelector to generate a directory for the content of a fixed element. If this attribute is not specified, the scroll event ofWindow is listened to by default.

您还可以使用scrollElementSelector为固定元素的内容生成目录。 如果未指定此属性，则默认情况下将侦听Window的滚动事件。

data(){
    return {
      catalogProps:{
        scrollElementSelector: '.demo',
      },
    };
  },

.demo {
  height: 400px;
  overflow: auto;
}

效果如下图：

效果如下图：

道具 (Props)

Name	Type	Default	Description
headList	Array	["h2", "h3", "h4", "h5"]	Assign tags to each level of the directory
refList	Array	-	Specify the ref element for each level of the directory, each item of the array is an object, and contains two attributes ref(essential)RefName of the row directory object titleThe name of the line directory (defaults to innerText) level(Default is 1) the line directory level
containerElementSelector	String	-	(essential)Specify the container for the article
scrollElementSelector	String	Window	Need to add a CSS selector for the scroll event, and listen to the scroll event of the Window by default
openDomWatch	Boolean	false	Whether to enable dom monitoring. If there is a dom change in containerElementSelector, the offsetTop of each ref will be recalculated.

名称	类型	默认	描述
HeadList	Array	["h2", "h3", "h4", "h5"]	将标签分配给目录的每个级别
refList	Array	--	为目录的每个级别指定ref元素，数组的每个项目都是一个对象，并包含两个属性 ref行目录的对象( 基本 )RefName title行目录的名称(默认为innerText) level (默认为1)行目录级别
containerElementSelector	String	--	( 必不可少的 )指定物品的容器
scrollElementSelector	String	Window	需要为滚动事件添加CSS选择器，并且默认情况下监听Window的滚动事件
openDomWatch	Boolean	假	是否启用dom监控。 如果containerElementSelector的dom变化，则将重新计算每个参考的offsetTop。

方法 (Methods)

Name	Parameters	Description
initActive	-	Make the first line of the directory active
setRefList	-	Calculate the offsetTop of each level directory

名称	参量	描述
初始化活动	--	使目录的第一行处于活动状态
setRefList	--	计算每个级别目录的offsetTop

插槽 (Slot)

Name	Description
-	Title of Directory

名称	描述
--	目录标题

翻译自: https://vuejsexamples.com/a-catalog-component-for-vue-js/

组件用.vue还是.js