因為前端開發需要，需要一個可以支持markdown語法來書寫博客的界面，經過查詢本人選取了第三方開源庫showdown，它可以將markdown語法決議展示，正是本人所需要的地方，
引入showdown
npm install showdown --save
測驗界面
這里用到的是element-ui 沒有太大影響放在template標簽中
<el-input
type="textarea"
:rows="20"
placeholder="請輸入內容"
v-model="textarea"
style="float: left;width:45%;">
</el-input>
<div class="show" id="show">res</div>
實體化 showdown以及其converter
這里需要配合mounted函式來使用
var showdown = require('showdown');
this.converter = new showdown.Converter();
資料變動檢測
用到的是vue中的watch方法，這里不贅述，
watch: {
'textarea': 'Changed'
},
資料變化后執行函式
Changed() {
document.getElementById('show').innerHTML = this.converter.makeHtml(this.textarea);
}
scrpit 代碼
<script>
export default {
name: "write",
data() {
return {
'textarea': '',
'converter': null
}
},
watch: {
'textarea': 'Changed'
},
mounted() {
this.init();
},
methods: {
init() {
var showdown = require('showdown');
this.converter = new showdown.Converter();
},
Changed() {
document.getElementById('show').innerHTML = this.converter.makeHtml(this.textarea);
},
submit() {
$('.ui.modal')
.modal('show')
;
}
}
}
</script>
template 代碼
<template>
<el-input
type="textarea"
:rows="20"
placeholder="請輸入內容"
v-model="textarea"
style="float: left;width:45%;">
</el-input>
<div class="show" id="show">res</div></template>
效果如下：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/262056.html
標籤：其他