Vue.js 文章常用的技巧
Sonder
2019-12-14
1086字
3分钟
浏览 (3.1k)
代码高亮
引入js和css
<link href="https://cdn.bootcss.com/highlight.js/9.15.10/styles/monokai-sublime.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/highlight.js/9.15.9/highlight.min.js"></script>
// 代码高亮
Vue.directive('highlight',function (el) {
let blocks = el.querySelectorAll('pre code');
blocks.forEach((block)=>{
hljs.highlightBlock(block)
})
})
点击文章图片放大
引入js和css
<link href="https://cdn.bootcss.com/viewerjs/1.3.7/viewer.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/viewerjs/1.3.7/viewer.min.js"></script>
<div
id="article-content"
class="markdown-body"
v-html="post_data.content"
@click="imageChang($event)"
v-highlight
></div>
挂载完毕实例化Viewer
mounted() {
let _id = document.getElementById("article-content");
this.viewer = new Viewer(_id,{
show(){ // 动态加载图片后,更新实例
this.viewer.update();
},
});
},
imageChang点击事件
imageChang(e){
if (e.target.nodeName == 'IMG') {
this.viewer.show();
}
},