img

Vue.js 文章常用的技巧

2019-12-14 0条评论 2.3k次阅读 JavaScript


代码高亮

引入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();
    }
},

💬 COMMENT


🦄 支持markdown语法

👋友