hitap-chat/components/zeroMarkdownView/zeroMarkdownView.vue

<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;
				font-size: 15px;
				line-height:1.75;
				word-spacing:0.1em;
				`,
					li: `
				margin: 5px 0;
				font-size: 15px;
				line-height:1.75;
				word-spacing:0.1em;
				`,
					// 链接
					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;
				font-size: 14px;
				font-weight: 500;
				`,
					td: `
				// color:#555;
				border: 1px solid #555555;
				font-size: 14px;
				`,
					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;
		padding-bottom: 9rpx;
		position: relative;
	}

	//  /deep/ .scrollbar-container{
	// 	display: none;
	// }
	/* 设置滚动条的宽度和背景色 */
	/deep/ .scrollbar-container::-webkit-scrollbar {
		display: block !important;
		width: 3px !important;
		/* 滚动条宽度 */
		height: 3px !important;
		/* 对于垂直滚动条，设置高度 */
		background-color: #ffffff !important;
		/* 滚动条背景色 */
	}

	/* 设置滚动条滑块的样式 */
	/deep/ .scrollbar-container::-webkit-scrollbar-thumb {
		border-radius: 10px;
		/* 滑块圆角 */
		background-color: #cccccc;
		/* 滑块颜色 */
	}


	/* 设置滚动条轨道的样式 */
	/deep/ .scrollbar-container::-webkit-scrollbar-track {
		border-radius: 10px;
		/* 轨道圆角 */
		box-shadow: inset 0 0 0px grey;
		/* 轨道阴影 */
		background-color: rgba(255, 255, 255, 0);
		/* 轨道颜色 */
	}

	/deep/ .md-table {
		margin-bottom: 10rpx !important;
	}

	/deep/ .md-td {
		white-space: nowrap;
		text-align: center;
	}

	/deep/ .md-th {
		white-space: nowrap;
		text-align: center;
	}
</style>