match-syllabus
v1.0.9
Published
Match the article syllabus from your html(not transferred html tag string).
Downloads
16
Readme
懒人党福音,即插即用直接安装即可。
突发奇想自己写一个匹配文章的标题制作大纲并且附带锚点功能 Match your article syllabus
演示站(Demo):用JS和正则写博客文章大纲.md
安装
npm install match-syllabus
使用
<!-- html 部分 -->
<ul>
<li v-html="items.html" v-for="(items,index) in syllabus" :key="index" @click="toHash(items.title)"></li>
</ul>
// JavaScript 部分
import syllabus from 'match-syllabus/syllabus/index'
created(){
let result = syllabus(html)
this.html = result.content;
this.syllabus = result.syllabus;
},methods: {
toHash(path){
document.querySelector('#'+path).scrollIntoView(true)
},
}
/* css 部分 v-html 需要使用 >>> */
<style>
.syllabus > ul > li{
margin:8px;
line-height: 18px;
}
.syllabus > ul > li >>> h1 {
font-size:16px;
font-weight: 600;
}
.syllabus > ul > li >>> h2 {
font-size:14px;
font-weight: 600;
text-indent:2em
}
.syllabus > ul > li >>> h3 {
font-size:12px;
font-weight: 400;
text-indent:3em
}
.syllabus > ul > li >>> h4 {
font-size:12px;
font-weight: 400;
text-indent:4em
}
.syllabus > ul > li >>> h5 {
font-size:12px;
font-weight: 400;
text-indent:5em
}
</style>