<template>
<div class="fillHeight">
<div class="container fillHeight">
<div class="row fillHeight">
<div class="col-xs-6 fillHeight">
<div class="panel panel-danger">
<div class="panel-heading">
<div class="panel-title">
<span class="h5">新建</span>
</div>
</div>
<div class="panel-body">
<textarea @scroll="contentScroll($event)"
@mouseover="mouseover(1)"
@change="showdown()"
@input="showdown()"
class="form-control"
v-model="content"></textarea>
</div>
</div>
</div>
<div class="col-xs-6 fillHeight">
<div class="panel panel-danger">
<div class="panel-heading">
<div class="panel-title">
<span class="h5">预览</span>
</div>
</div>
<div class="panel-body">
<div @scroll="showContentScroll($event)"
@mouseover="mouseover(2)"
v-html="showContent"
class="showContent"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Markdown",
data() {
return {
content: '',
showContent: '',
currentTap: 0,
score: 0
}
},
methods: {
showdown() {
const converter = new showdown.Converter({extensions: ['table']});
this.showContent = converter.makeHtml(this.content);
const contentHeight = $('textarea').prop('scrollHeight'),
textareaHeight = $('textarea').height(),
showContentHeight = $('.showContent').prop('scrollHeight');
this.score = (showContentHeight - textareaHeight) / (contentHeight - textareaHeight);
},
contentScroll(event) {
if (this.currentTap != 1) {
return;
}
$('.showContent')[0].scrollTop = event.target.scrollTop * this.score;
},
showContentScroll(event) {
if (this.currentTap != 2) {
return;
}
$('textarea')[0].scrollTop = event.target.scrollTop / this.score;
},
mouseover(m) {
this.currentTap = m;
}
}
}
</script>
<style scoped>
.panel {
margin-bottom: 0;
position: absolute;
top: 0;
right: 15px;
bottom: 0;
left: 15px;
}
.panel-body {
padding: 0;
position: absolute;
top: 42px;
right: 0;
bottom: 0;
left: 0;
}
.form-control {
border: none;
}
textarea {
height: 100%;
resize: none;
border: none;
}
.form-control:focus {
border-color: transparent;
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.showContent {
overflow-y: auto;
height: 100%;
padding: 6px 12px;
}
.showContent >>> table {
width: 80% !important;
border: 1px solid #ddd !important;
}
.showContent >>> table thead tr {
height: 38px !important;
}
.showContent >>> table thead tr th {
background-color: rgb(64, 158, 255);
color: #fafafa;
padding-left: 10px;
border: 1px solid #ddd !important;
}
.showContent >>> table tbody tr td {
padding-left: 10px;
border: 1px solid #ddd !important;
height: 38px !important;
line-height: 38px !important;
}
.showContent >>> table tbody tr td p {
padding: 0 !important;
margin: 0 !important;
}
.showContent >>> table tbody tr:hover {
background: rgb(248, 248, 248) !important;
}
.showContent >>> p {
word-break: normal !important;
word-wrap: break-word;
}
.showContent >>> p font {
line-height: 20px;
}
.showContent >>> pre {
background-color: rgb(252, 252, 252);
border: 1px solid rgb(225, 225, 232);
}
.showContent >>> pre code {
color: #080;
}
::-webkit-scrollbar {
width: 6px;
}
/*滚动槽*/
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 5px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
border-radius: 10px;
background: #57d1f7;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: #57d1f7;
}
::-webkit-scrollbar-thumb:hover {
cursor: pointer !important;
background: red;
}
</style>
Vue实现csdn新建实时预览,同步滚动
最新推荐文章于 2024-07-12 14:10:05 发布