clear
Former-commit-id: e2bfcb0f40765724b17e13056e8293ec271efefb [formerly e2bfcb0f40765724b17e13056e8293ec271efefb [formerly e2bfcb0f40765724b17e13056e8293ec271efefb [formerly e2bfcb0f40765724b17e13056e8293ec271efefb [formerly 5793d72d458b7eeaf28a097d026168cebc9fc256 [formerly 9c8de3644bd40a55711e618742e29cce390e4c5f]]]]] Former-commit-id: 05ca3c8da65f8583c142720628aa6ea71d2dbf45 Former-commit-id: 7a4d2fba696e901db86071ea2810e9c932c976ad Former-commit-id: c18d3689200ca0e528fbf9bf171f6e1b50131bc3 [formerly 455e9952ca890cd8ad882250cfb9eabd944d44ee] Former-commit-id: 021fa8191681fe4f22e9a9f40389831a847e9066 Former-commit-id: 1022b7792417ce366901b9d5284762a015dd6d26 Former-commit-id: bed799410be508713cac76b7c8cf02d4457fe996 Former-commit-id: f6787cfaac3404132ad1011e2707e08484708ca9 Former-commit-id: 7a8a3baca9ef30393744fd56def6d608b51dcddd
This commit is contained in:
@@ -1,145 +0,0 @@
|
||||
<template>
|
||||
<div class="component-markdown">
|
||||
<div class="spin-group" v-if="!markedHTML">
|
||||
<div>正在加载</div>
|
||||
</div>
|
||||
<div class="markdown-body" v-html="markedHTML"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import marked from 'marked'
|
||||
import highlight from 'highlight.js'
|
||||
import bandupan from './plugin/baidupan'
|
||||
export default {
|
||||
name: 'd2-markdown',
|
||||
props: {
|
||||
url: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
},
|
||||
source: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
},
|
||||
highlight: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
// 百度网盘分享链接特殊样式
|
||||
baidupan: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
getReadmePublicPath: '',
|
||||
markedHTML: ''
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (this.url) {
|
||||
this.initWithUrl()
|
||||
} else if (this.source) {
|
||||
this.initWithMd()
|
||||
} else {
|
||||
console.log('not mounted init')
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 使用 md 初始化
|
||||
initWithMd () {
|
||||
this.markedHTML = this.marked(this.source)
|
||||
},
|
||||
// 使用 url 初始化
|
||||
async initWithUrl () {
|
||||
this.markedHTML = await this.getReadme(this.url)
|
||||
},
|
||||
// 从 url 加载原始数据
|
||||
async getReadme (name) {
|
||||
const data = await this.$axios.get(name)
|
||||
return this.marked(data)
|
||||
},
|
||||
marked (data) {
|
||||
const renderer = new marked.Renderer()
|
||||
renderer.blockquote = (quote) => {
|
||||
// 百度网盘
|
||||
return (this.baidupan && bandupan(quote, this.$assetsPublicPath)) || `<blockquote>${quote}</blockquote>`
|
||||
}
|
||||
return marked(data, {
|
||||
...this.highlight ? {highlight: (code) => highlight.highlightAuto(code).value} : {},
|
||||
renderer
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '~@/assets/style/public.scss';
|
||||
.component-markdown {
|
||||
.spin-group {
|
||||
height: 100px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
// 百度云
|
||||
$baidupanHeight: 30px;
|
||||
$baidupanPadding: 10px;
|
||||
.baidupan {
|
||||
overflow: hidden;
|
||||
margin-bottom: 16px;
|
||||
.container {
|
||||
height: $baidupanHeight + 2 * $baidupanPadding;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #dfe2e5;
|
||||
padding: $baidupanPadding;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
border: 1px solid $color-primary;
|
||||
.line {
|
||||
background-color: $color-primary;
|
||||
}
|
||||
}
|
||||
.icon {
|
||||
float: left;
|
||||
height: $baidupanHeight;
|
||||
text-align: center;
|
||||
width: 40px;
|
||||
margin-right: $baidupanPadding;
|
||||
img {
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
.url {
|
||||
float: left;
|
||||
height: $baidupanHeight;
|
||||
line-height: $baidupanHeight;
|
||||
color: $color-text-main;
|
||||
}
|
||||
.line {
|
||||
float: left;
|
||||
height: $baidupanHeight + 2 * $baidupanPadding;
|
||||
width: 1px;
|
||||
margin: -$baidupanPadding $baidupanPadding;
|
||||
background-color: #dfe2e5;
|
||||
}
|
||||
.pwd {
|
||||
float: left;
|
||||
height: $baidupanHeight;
|
||||
line-height: $baidupanHeight;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user