lizhichao
/
hitap-chat
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1

Browse Source
main
limingtao 11 months ago
parent 1292ff7e18
commit cd9e99ecb3
2 changed files with 215 additions and 180 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      components/mp-html/parser.js
  2. 392
      components/zeroMarkdownView/zeroMarkdownView.vue

3
components/mp-html/parser.js
Unescape View File

@ -979,7 +979,8 @@ Parser.prototype.popNode = function () {
const table = Object.assign({}, node) const table = Object.assign({}, node)
node.name = 'div' node.name = 'div'
node.attrs = { node.attrs = {
style: 'overflow:auto' style: 'overflow:auto',
class: 'scrollbar-container'
} }
node.children = [table] node.children = [table]
attrs = table.attrs attrs = table.attrs

392
components/zeroMarkdownView/zeroMarkdownView.vue
Unescape View File

@ -1,180 +1,214 @@
<template> <template>
<view class="zero-markdown-view"> <view class="zero-markdown-view">
<mp-html :key="mpkey" :selectable="selectable" :scroll-table='scrollTable' :tag-style="tagStyle" <mp-html :key="mpkey" :selectable="selectable" :scroll-table='scrollTable' :tag-style="tagStyle"
:markdown="true" :content="html"> :markdown="true" :content="html">
</mp-html> </mp-html>
</view> </view>
</template> </template>
<script> <script>
import mpHtml from '../mp-html/mp-html'; import mpHtml from '../mp-html/mp-html';
export default { export default {
name: 'zero-markdown-view', name: 'zero-markdown-view',
components: { components: {
mpHtml mpHtml
}, },
props: { props: {
markdown: { markdown: {
type: String, type: String,
default: '' default: ''
}, },
selectable: { selectable: {
type: [Boolean, String], type: [Boolean, String],
default: true default: true
}, },
scrollTable: { scrollTable: {
type: Boolean, type: Boolean,
default: true default: true
}, },
themeColor: { themeColor: {
type: String, type: String,
default: '#007AFF' default: '#007AFF'
}, },
codeBgColor: { codeBgColor: {
type: String, type: String,
default: '#2d2d2d' default: '#2d2d2d'
}, },
}, },
data() { data() {
return { return {
html: '', html: '',
tagStyle: '', tagStyle: '',
mpkey: 'zero' mpkey: 'zero'
}; };
}, },
watch: { watch: {
markdown: function(val) { markdown: function(val) {
this.html = this.markdown this.html = this.markdown
} }
}, },
created() { created() {
this.initTagStyle(); this.initTagStyle();
}, },
mounted() { mounted() {
this.html = this.markdown this.html = this.markdown
}, },
methods: { methods: {
initTagStyle() { initTagStyle() {
const themeColor = this.themeColor const themeColor = this.themeColor
const codeBgColor = this.codeBgColor const codeBgColor = this.codeBgColor
let zeroStyle = { let zeroStyle = {
//letter-spacing:0.2em; //letter-spacing:0.2em;
p: ` p: `
margin:5px 5px; margin:5px 5px;
font-size: 15px; font-size: 15px;
line-height:1.75; line-height:1.75;
word-spacing:0.1em; word-spacing:0.1em;
`, `,
// 一级标题 // 一级标题
h1: ` h1: `
margin:25px 0; margin:25px 0;
font-size: 24px; font-size: 24px;
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
color: ${themeColor}; color: ${themeColor};
padding:3px 10px 1px; padding:3px 10px 1px;
border-bottom: 2px solid ${themeColor}; border-bottom: 2px solid ${themeColor};
border-top-right-radius:3px; border-top-right-radius:3px;
border-top-left-radius:3px; border-top-left-radius:3px;
`, `,
// 二级标题 // 二级标题
h2: ` h2: `
margin:40px 0 20px 0; margin:40px 0 20px 0;
font-size: 20px; font-size: 20px;
text-align:center; text-align:center;
color:${themeColor}; color:${themeColor};
font-weight:bolder; font-weight:bolder;
padding-left:10px; padding-left:10px;
// border:1px solid ${themeColor}; // border:1px solid ${themeColor};
`, `,
// 三级标题 // 三级标题
h3: ` h3: `
margin:30px 0 10px 0; margin:30px 0 10px 0;
font-size: 18px; font-size: 18px;
color: ${themeColor}; color: ${themeColor};
padding-left:10px; padding-left:10px;
border-left:3px solid ${themeColor}; border-left:3px solid ${themeColor};
`, `,
// 引用 // 引用
blockquote: ` blockquote: `
margin:15px 0; margin:15px 0;
font-size:15px; font-size:15px;
color: #777777; color: #777777;
border-left: 4px solid #dddddd; border-left: 4px solid #dddddd;
padding: 0 10px; padding: 0 10px;
`, `,
// 列表 // 列表
ul: ` ul: `
margin: 10px 0; margin: 10px 0;
color: #555; font-size: 15px;
`, line-height:1.75;
li: ` word-spacing:0.1em;
margin: 5px 0; `,
color: #555; li: `
`, margin: 5px 0;
// 链接 font-size: 15px;
a: ` line-height:1.75;
// color: ${themeColor}; word-spacing:0.1em;
`, `,
// 加粗 // 链接
strong: ` a: `
font-weight: border; // color: ${themeColor};
color: ${themeColor}; `,
`, // 加粗
// 斜体 strong: `
em: ` font-weight: border;
color: ${themeColor}; color: ${themeColor};
letter-spacing:0.3em; `,
`, // 斜体
// 分割线 em: `
hr: ` color: ${themeColor};
height:1px; letter-spacing:0.3em;
padding:0; `,
border:none; // 分割线
// border-top:medium solid #333; hr: `
text-align:center; height:1px;
background-image:linear-gradient(to right,rgba(248,57,41,0),${themeColor},rgba(248,57,41,0)); padding:0;
`, border:none;
// 表格 // border-top:medium solid #333;
table: ` text-align:center;
border-spacing:0; background-image:linear-gradient(to right,rgba(248,57,41,0),${themeColor},rgba(248,57,41,0));
overflow:auto; `,
min-width:100%; // 表格
margin:10px 0; table: `
border-collapse: collapse; border-spacing:0;
`, overflow:auto;
th: ` min-width:100%;
border: 1px solid #202121; margin:10px 0;
color: #555; border-collapse: collapse;
font-size: 14px; `,
font-weight: 500; th: `
`, border: 1px solid #202121;
td: ` // color: #555;
color:#555; font-size: 14px;
border: 1px solid #555555; font-weight: 500;
font-size: 14px; `,
`, td: `
pre: ` // color:#555;
border-radius: 5px; border: 1px solid #555555;
white-space: pre; font-size: 14px;
background: ${codeBgColor}; `,
font-size:12px; pre: `
position: relative; border-radius: 5px;
`, white-space: pre;
} background: ${codeBgColor};
this.tagStyle = zeroStyle font-size:12px;
}, position: relative;
} `,
}; }
</script> this.tagStyle = zeroStyle
},
<style lang="scss"> }
.zero-markdown-view { };
padding: 15rpx; </script>
position: relative;
} <style lang="scss">
.zero-markdown-view {
padding: 15rpx;
position: relative;
}
// /deep/ .scrollbar-container{
// display: none;
// }
/* 设置滚动条的宽度和背景色 */
/deep/ .scrollbar-container::-webkit-scrollbar {
width: 3px!important; /* 滚动条宽度 */
height: 3px!important; /* 对于垂直滚动条，设置高度 */
background-color: #f9f9f9!important; /* 滚动条背景色 */
}
/* 设置滚动条滑块的样式 */
/deep/ .scrollbar-container::-webkit-scrollbar-thumb {
border-radius: 10px; /* 滑块圆角 */
background-color: #c1c1c1; /* 滑块颜色 */
}
/* 设置滚动条滑块hover样式 */
/deep/ .scrollbar-container::-webkit-scrollbar-thumb:hover {
background-color: #a8a8a8; /* 滑块hover颜色 */
}
/* 设置滚动条轨道的样式 */
/deep/ .scrollbar-container::-webkit-scrollbar-track {
border-radius: 10px; /* 轨道圆角 */
box-shadow: inset 0 0 5px grey; /* 轨道阴影 */
background-color: #f0f0f0; /* 轨道颜色 */
}
/deep/ .md-table {
margin-bottom: 10rpx!important;
}
</style> </style>
Write Preview
Loading…
Cancel
Save