You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
177 lines
3.1 KiB
177 lines
3.1 KiB
11 months ago
|
<template>
|
||
|
|
<view class="zero-markdown-view">
|
||
|
|
<mp-html :key="mpkey" :selectable="selectable" :scroll-table='scrollTable' :tag-style="tagStyle"
|
||
|
|
:markdown="true" :content="html">
|
||
|
|
</mp-html>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import mpHtml from '../mp-html/mp-html';
|
||
|
|
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'zero-markdown-view',
|
||
|
|
components: {
|
||
|
|
mpHtml
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
markdown: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
selectable: {
|
||
|
|
type: [Boolean, String],
|
||
|
|
default: true
|
||
|
|
},
|
||
|
|
scrollTable: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true
|
||
|
|
},
|
||
|
|
themeColor: {
|
||
|
|
type: String,
|
||
|
|
default: '#007AFF'
|
||
|
|
},
|
||
|
|
codeBgColor: {
|
||
|
|
type: String,
|
||
|
|
default: '#2d2d2d'
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
html: '',
|
||
|
|
tagStyle: '',
|
||
|
|
mpkey: 'zero'
|
||
|
|
};
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
markdown: function(val) {
|
||
|
|
this.html = this.markdown
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.initTagStyle();
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
|
||
|
|
this.html = this.markdown
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
|
||
|
|
initTagStyle() {
|
||
|
|
const themeColor = this.themeColor
|
||
|
|
const codeBgColor = this.codeBgColor
|
||
|
|
let zeroStyle = {
|
||
|
|
//letter-spacing:0.2em;
|
||
|
|
p: `
|
||
|
|
margin:5px 5px;
|
||
|
|
font-size: 15px;
|
||
|
|
line-height:1.75;
|
||
|
|
word-spacing:0.1em;
|
||
|
|
`,
|
||
|
|
// 一级标题
|
||
|
|
h1: `
|
||
|
|
margin:25px 0;
|
||
|
|
font-size: 24px;
|
||
|
|
text-align: center;
|
||
|
|
font-weight: bold;
|
||
|
|
color: ${themeColor};
|
||
|
|
padding:3px 10px 1px;
|
||
|
|
border-bottom: 2px solid ${themeColor};
|
||
|
|
border-top-right-radius:3px;
|
||
|
|
border-top-left-radius:3px;
|
||
|
|
`,
|
||
|
|
// 二级标题
|
||
|
|
h2: `
|
||
|
|
margin:40px 0 20px 0;
|
||
|
|
font-size: 20px;
|
||
|
|
text-align:center;
|
||
|
|
color:${themeColor};
|
||
|
|
font-weight:bolder;
|
||
|
|
padding-left:10px;
|
||
|
|
// border:1px solid ${themeColor};
|
||
|
|
`,
|
||
|
|
// 三级标题
|
||
|
|
h3: `
|
||
|
|
margin:30px 0 10px 0;
|
||
|
|
font-size: 18px;
|
||
|
|
color: ${themeColor};
|
||
|
|
padding-left:10px;
|
||
|
|
border-left:3px solid ${themeColor};
|
||
|
|
`,
|
||
|
|
// 引用
|
||
|
|
blockquote: `
|
||
|
|
margin:15px 0;
|
||
|
|
font-size:15px;
|
||
|
|
color: #777777;
|
||
|
|
border-left: 4px solid #dddddd;
|
||
|
|
padding: 0 10px;
|
||
|
|
`,
|
||
|
|
// 列表
|
||
|
|
ul: `
|
||
|
|
margin: 10px 0;
|
||
|
|
color: #555;
|
||
|
|
`,
|
||
|
|
li: `
|
||
|
|
margin: 5px 0;
|
||
|
|
color: #555;
|
||
|
|
`,
|
||
|
|
// 链接
|
||
|
|
a: `
|
||
|
|
// color: ${themeColor};
|
||
|
|
`,
|
||
|
|
// 加粗
|
||
|
|
strong: `
|
||
|
|
font-weight: border;
|
||
|
|
color: ${themeColor};
|
||
|
|
`,
|
||
|
|
// 斜体
|
||
|
|
em: `
|
||
|
|
color: ${themeColor};
|
||
|
|
letter-spacing:0.3em;
|
||
|
|
`,
|
||
|
|
// 分割线
|
||
|
|
hr: `
|
||
|
|
height:1px;
|
||
|
|
padding:0;
|
||
|
|
border:none;
|
||
|
|
// border-top:medium solid #333;
|
||
|
|
text-align:center;
|
||
|
|
background-image:linear-gradient(to right,rgba(248,57,41,0),${themeColor},rgba(248,57,41,0));
|
||
|
|
`,
|
||
|
|
// 表格
|
||
|
|
table: `
|
||
|
|
border-spacing:0;
|
||
|
|
overflow:auto;
|
||
|
|
min-width:100%;
|
||
|
|
margin:10px 0;
|
||
|
|
border-collapse: collapse;
|
||
|
|
`,
|
||
|
|
th: `
|
||
|
|
border: 1px solid #202121;
|
||
|
|
color: #555;
|
||
|
|
`,
|
||
|
|
td: `
|
||
|
|
color:#555;
|
||
|
|
border: 1px solid #555555;
|
||
|
|
`,
|
||
|
|
pre: `
|
||
|
|
border-radius: 5px;
|
||
|
|
white-space: pre;
|
||
|
|
background: ${codeBgColor};
|
||
|
|
font-size:12px;
|
||
|
|
position: relative;
|
||
|
|
`,
|
||
|
|
}
|
||
|
|
this.tagStyle = zeroStyle
|
||
|
|
},
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.zero-markdown-view {
|
||
|
|
padding: 15rpx;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
</style>
|