效果图：
dabAhSOhwk.gif
vue 中显示 markdown 文件:
在操作的过程可能会报错
./README.md Module parse failed: Unexpected character '#' (1:0) You may need an appropriate loader to handle this file type.
原因是不识别这中格式，markdown 中的 ‘#’ 号，安装 markdown-loader html-loader
npm i markdown-loader html-loader --save
vue-cli2.0版本中配置
webpack.base.conf.js 中添加 rules 规则
{ test: /\.md$/, use: [ { loader: 'html-loader' }, { loader: 'markdown-loader', options: {} } ] }
vue-cli3.0版本中配置
vue.config.js 中添加 rules 规则
chainWebpack(config) { config.module.rule('html').test(/\.md$/).use('html-loader').loader('html-loader').end() config.module.rule('markdown').test(/\.md$/).use('markdown-loader').loader('markdown-loader').end() },
<template>
<div class="codeContent">
<div v-html="MarkdownMsg"></div>
</div>
</template>
<script>
import README from '../README.md'
import marked from 'marked'
export default {
data() {
return {
MarkdownMsg: ''
}
},
mounted() {
this.getMardownFileContent(README)
},
methods: {
//处理markdown数据，data为markdown文件读出的字符串
getMardownFileContent(data) {
this.MarkdownMsg = marked(data || '', {
/* 默认为false，为true时显示代码标签 */
sanitize: false
})
}
}
}
</script>
<style lang="scss" >
.codeContent {
max-width: 400px;
margin: 0 auto;
padding-top: 25vh;
}
/* 因为默认的代码块没有样式，所以添加一个背景色 */
pre {
background-color: #282c34;
color: white;
padding: 25px 20px;
margin: 10px 0;
text-align: left;
border-radius: 3px;
position: relative;
}
pre:hover .copy-btn {
opacity: 1;
}
</style>
复制功能实现思路：
因为在 markdown中，代码块几乎都是被<pre>标签包裹，所以这里当数据更新时，遍历所有代码块，并把对应的 复制 添加到每个代码块中。
这里用到了 Vue.extend 和 $mount 挂载，以便于将复制模块组件渲染挂载到每个<pre>标签中去。
不太理解 Vue.extend和$mount 的，可以参考 此篇文章。
image.png
所以这里单独针对
复制功能封装了一个组件CodeCopy.vue:
<template>
<div class="copy-content">
<!-- 复制按钮 -->
<div
class="copy-btn code-data-copy"
@click="copyMessage"
data-clipboard-action="copy"
:data-clipboard-text="code"
>
<svg
t="1609826359524"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="2955"
>
<path
d="M770.63802083 933.875H216.92708332c-44.82421875 0-79.1015625-34.27734375-79.10156249-79.1015625V195.59374999h553.7109375c44.82421875 0 79.1015625 34.27734375 79.1015625 79.10156251v659.1796875zM190.55989583 248.328125v606.4453125c0 15.8203125 10.546875 26.3671875 26.36718751 26.3671875h500.97656249V274.6953125c0-15.8203125-10.546875-26.3671875-26.3671875-26.3671875H190.55989583z"
p-id="2956"
/>
<path
d="M612.43489583 424.98828125H296.02864583c-13.18359375 0-26.3671875-10.546875-26.3671875-26.3671875 0-13.18359375 10.546875-26.3671875 26.3671875-26.3671875h316.40625c13.18359375 0 26.3671875 10.546875 26.36718751 26.3671875 0 13.18359375-13.18359375 26.3671875-26.36718751 26.3671875z m0 131.8359375H296.02864583c-13.18359375 0-26.3671875-10.546875-26.3671875-26.3671875 0-13.18359375 10.546875-26.3671875 26.3671875-26.3671875h316.40625c13.18359375 0 26.3671875 10.546875 26.36718751 26.3671875 0 13.18359375-13.18359375 26.3671875-26.36718751 26.3671875z m0 131.8359375H296.02864583c-13.18359375 0-26.3671875-10.546875-26.3671875-26.3671875 0-13.18359375 10.546875-26.3671875 26.3671875-26.3671875h316.40625c13.18359375 0 26.3671875 10.546875 26.36718751 26.3671875 0 13.18359375-13.18359375 26.3671875-26.36718751 26.3671875z"
p-id="2957"
/>
<path
d="M828.64583333 90.125h-527.34375001c-15.8203125 0-26.3671875 10.546875-26.36718749 26.3671875s10.546875 26.3671875 26.36718751 26.3671875h527.34374999c15.8203125 0 26.3671875 10.546875 26.3671875 26.3671875v606.4453125H823.37239583v52.73437499h84.375V169.2265625c0-44.82421875-36.9140625-79.1015625-79.1015625-79.1015625z"
p-id="2958"
/>
<path
d="M797.00520833 802.0390625a26.3671875 26.3671875 0 1 0 52.73437501 0 26.3671875 26.3671875 0 1 0-52.73437501 0z"
p-id="2959"
/>
</svg>
</div>
<div v-if="success" class="copy-success-text">复制成功!</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) {
console.log('复制成功')
_this.success = true
// setTimeout(() => {
// _this.success = false
// }, 300)
clipboard.destroy() // 销毁,避免多次点击重复出现
})
clipboard.on('error', function() {
console.log('复制失败')
})
}
}
}
</script>
<style lang="scss" scoped>
.copy-content {
height: 0;
}
.icon {
width: 0.8rem;
height: 0.8rem;
fill: white;
}
.copy-btn {
user-select: none;
opacity: 0;
position: absolute;
right: 5px;
top: 5px;
cursor: pointer;
padding: 5px;
border-radius: 3px;
transition: 0.3s;
background: rgba(255, 255, 255, 0.2);
&:active {
background: rgba(253, 253, 253, 0.575);
}
}
.copy-success-text {
color: white;
position: absolute;
font-size: 12px;
top: 8px;
right: 2.5rem;
font-weight: 200;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
animation: successCopy 0.5s ease both 1;
}
@keyframes successCopy {
70% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0.5);
}
}
</style>
使用页面：
<template>
<div class="codeContent">
<div v-html="MarkdownMsg"></div>
<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="textarea"></el-input>
</div>
</template>
<script>
import README from '../README.md'
import marked from 'marked'
import CodeCopy from '../common/CodeCopy'
import Vue from 'vue'
export default {
data() {
return {
MarkdownMsg: '',
textarea:''
}
},
updated() {
this.update()
},
mounted() {
this.getMardownFileContent(README)
},
methods: {
//处理markdown数据，data为markdown文件读出的字符串
getMardownFileContent(data) {
this.MarkdownMsg = marked(data || '', {
/* 默认为false，为true时显示代码标签 */
sanitize: false
})
},
//获取对应markdown代码块标签
update() {
setTimeout(() => {
document.querySelectorAll('pre').forEach(el => {
// console.log(el)
if (el.classList.contains('code-copy-added')) return
// https://cn.vuejs.org/v2/api/index.html#Vue-extend
/* 使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象 */
let ComponentClass = Vue.extend(CodeCopy)
let instance = new ComponentClass()
instance.code = el.innerText
instance.parent = el
/* 手动挂载 */
instance.$mount()
el.classList.add('code-copy-added')
el.appendChild(instance.$el)
})
}, 100)
}
}
}
</script>
<style lang="scss" >
.codeContent {
max-width: 400px;
margin: 0 auto;
padding-top: 25vh;
}
.code-copy-added {
background-color: #282c34;
color: white;
padding: 25px 20px;
margin: 10px 0;
text-align: left;
border-radius: 3px;
position: relative;
}
.code-copy-added:hover .copy-btn {
opacity: 1;
}
</style>
