涉及組件：vue-markdown、highlight.js、clipboard
完成功能：將數(shù)據(jù)以markdown格式渲染，代碼部分高亮，內(nèi)容可一鍵復(fù)制
1.安裝
//安裝vue-markdown依賴(lài)
npm install --save vue-markdown
//安裝對(duì)應(yīng)樣式，若要定制化樣式，可以到對(duì)應(yīng)文件中做修改
npm install github-markdown-css
//安裝高亮
npm install highlight.js
//安裝復(fù)制組件
npm install clipboard --save
2.引用
①main.js
//main.js
import 'github-markdown-css/github-markdown.css'
import hljs from "highlight.js";
Vue.prototype.$hljs = hljs;
// 有多種樣式可選，也可以到對(duì)應(yīng)文件中定制化
import "highlight.js/styles/atom-one-dark.css";
// 自定義命令v-highlight
Vue.directive("highlight", function(el) {
let blocks = el.querySelectorAll("pre code");
blocks.forEach(block => {
hljs.highlightBlock(block);
});
});
//復(fù)制組件引用
import clipboard from 'clipboard'
Vue.prototype.clipboard = clipboard
②CodeCopy.vue
//CodeCopy.vue
<template>
<div class="copy-content">
<!-- 復(fù)制按鈕 -->
<div
class="copy-btn code-data-copy"
@click="copyMessage"
data-clipboard-action="copy"
:data-clipboard-text="code"
>
<i class="el-icon-document-copy myicon"></i>
</div>
<div v-if="success" class="copy-success-text">copied!</div>
</div>
</template>
<script>
import clipboard from "clipboard";
export default {
data() {
return {
code: null,
success: false,
};
},
methods: {
copyMessage(value) {
let _this = this;
_this.success = false;
let clipboard = new this.clipboard(".code-data-copy");
clipboard.on("success", function (e) {
// this.$message.error("提問(wèn)不能為空");
_this.success = true;
// setTimeout(() => {
// _this.success = false
// }, 300)
clipboard.destroy(); // 銷(xiāo)毀,避免多次點(diǎn)擊重復(fù)出現(xiàn)
});
clipboard.on("error", function () {
_this.$message.error("複製失敗");
});
},
},
};
</script>
<style lang="less" scoped>
.copy-content {
height: 0px;
}
.icon {
width: 0.8rem;
height: 0.8rem;
fill: rgb(231, 32, 32);
}
.myicon {
font-size: 14px;
color: #c0c4cc;
&:hover {
color: black;
}
}
.copy-btn {
user-select: none;
opacity: 1;
position: absolute;
right: 0px;
top: 0px;
cursor: pointer;
border-radius: 3px;
transition: 0.3s;
background: rgba(255, 255, 255, 0.2);
&:active {
background: rgba(253, 253, 253, 0.575);
}
}
.copy-success-text {
font-family: "微軟雅黑";
color: green;
position: absolute;
font-size: 12px;
top: 2px;
right: 18px;
font-weight: 500;
animation: successCopy 0.6s ease both 1;
}
</style>
3.使用
//demo.vue
<template>
<div id="demo>
<!--注意div的class為"markdown-body"否則識(shí)別不到樣式 -->
<!--v-highlight為自定義命令，直接使用即可 -->
<div class="markdown-body"><VueMarkdown v-highlight :source="dataval"></VueMarkdown></div>
</div>
</template>
<script>
import VueMarkdown from "vue-markdown";
import CodeCopy from "./CodeCopy.vue";
export default {
components: {
VueMarkdown,
},
data() {
return {
//從后臺(tái)獲取數(shù)據(jù)
data: "DDS Security Plugin是一種用於保護(hù)DDS通訊的安全機(jī)制。它的架構(gòu)包括以下三個(gè)層次：\n\n1. DDS Security Plugin API層：提供了一個(gè)API接口，讓DDS應(yīng)用程序可以訪問(wèn)DDS Security Plugin。這一層還負(fù)責(zé)將安全設(shè)置應(yīng)用到DDS中。\n\n2. DDS Security Plugin實(shí)現(xiàn)層：實(shí)現(xiàn)了DDS Security Plugin API所定義的接口。它包括了一個(gè)安全管理器和相關(guān)的安全策略、安全驗(yàn)證、加密解密等功能。在這一層中，安全管理器負(fù)責(zé)將安全策略應(yīng)用到DDS中，使得DDS能夠?qū)崿F(xiàn)安全通訊。\n\n3. 安全策略層：包括了各種安全策略，如加密、授權(quán)、驗(yàn)證等，以實(shí)現(xiàn)不同的安全需求。DDS Security Plugin提供了一些預(yù)定義的安全策略，同時(shí)也支持用戶(hù)自定義的安全策略。在這一層中，安全策略定義了如何對(duì)DDS進(jìn)行安全設(shè)置，以保護(hù)DDS通訊的安全性。",
dataval :"",
};
},
mounted() {
//為解決序號(hào)被吞情況 ，第五點(diǎn)其他問(wèn)題處會(huì)說(shuō)明
this.dataval = this.data.replace(/\. /g, ".");
},
updated() {
this.update();
},
methods: {
update() {
setTimeout(() => {
// 給每一個(gè) markdown-body 加上復(fù)制按鈕，具體樣式可以自己調(diào)整
document.querySelectorAll(".markdown-body").forEach((el) => {
// console.log(el)
if (el.classList.contains("code-copy-added")) return;
let ComponentClass = Vue.extend(CodeCopy);
let instance = new ComponentClass();
instance.code = el.innerText;
instance.parent = el;
/* 手動(dòng)掛載 */
instance.$mount();
el.classList.add("code-copy-added");
el.appendChild(instance.$el);
});
}, 100);
},
},
};
</script>
<style>
</style>
4.經(jīng)過(guò)樣式調(diào)整，效果如下：
5.其他問(wèn)題
vue-markdown可能存在某些問(wèn)題，比如數(shù)據(jù)中的1. 2. 3. 等標(biāo)號(hào)會(huì)被莫名吞掉隱藏。
經(jīng)觀察發(fā)現(xiàn)： 這樣格式的數(shù)據(jù)，標(biāo)號(hào)會(huì)被隱藏：\n\n1. 空格 ；如：
\n\n1. DDS Security Plugin API層：提供了一個(gè)API接口，
讓DDS應(yīng)用程序可以訪問(wèn)DDS Security Plugin。這一層還負(fù)責(zé)將安全設(shè)置應(yīng)用到DDS中。
\n\n2. DDS Security Plugin實(shí)現(xiàn)層：實(shí)現(xiàn)了DDS Security Plugin API所定義的接口。
解決方案
將返回?cái)?shù)據(jù)data做replace替換文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-689795.html
//將 .空格 替換成 .
this.p = this.data.replace(/\. /g, ".");
最后：
以上方法均來(lái)自網(wǎng)絡(luò)，四處收羅完成需求后在此記錄總結(jié)。
demo代碼并不完整，但復(fù)制下來(lái)功能可以實(shí)現(xiàn)，樣式按需調(diào)整。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-689795.html
到了這里，關(guān)于vue中實(shí)現(xiàn)markdown+代碼高亮格式渲染，及內(nèi)容一鍵復(fù)制功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
