171 lines
5.0 KiB
Vue
171 lines
5.0 KiB
Vue
<template>
|
||
<template v-for="(item,index) in htmls" :key="index">
|
||
<view v-if="item.type == 'image'" style="text-align:center;">
|
||
<image :src="file_stor(item.content)" mode="widthFix" style="max-width:100%;"></image>
|
||
</view>
|
||
<view v-else-if="item.type == 'video'" style="text-align:center;">
|
||
<video :src="file_stor(item.content)" style="width:100%;"></video>
|
||
</view>
|
||
<view v-else-if="item.type == 'audio'" style="padding:1em;">
|
||
<ciy-audio :src="file_stor(item.content)"></ciy-audio>
|
||
</view>
|
||
<view v-else v-html="item.content" style="width:100%;position: relative;"></view>
|
||
</template>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
props: {
|
||
md: {
|
||
type: String,
|
||
default: ''
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
htmls: []
|
||
};
|
||
},
|
||
watch: {
|
||
md: {
|
||
handler(newD, oldD) {
|
||
this.htmls = this.convert(newD);
|
||
},
|
||
immediate: true
|
||
}
|
||
},
|
||
mounted() {},
|
||
methods: {
|
||
fillmdlines() {
|
||
|
||
},
|
||
convert(markdown) {
|
||
// #,!,`,@lcr,|表格
|
||
markdown = markdown || '';
|
||
if (markdown.substr(0, 4) != '[MD]')
|
||
return markdown;
|
||
markdown = markdown.substr(4).trim();
|
||
var mds = markdown.split('\n');
|
||
var htmls = [];
|
||
var html = '';
|
||
var titnum2 = 0;
|
||
var titnum3 = 0;
|
||
var titnum4 = 0;
|
||
for (var m in mds) {
|
||
if (mds[m].length == 0) {
|
||
continue;
|
||
}
|
||
if (mds[m].length > 0 && mds[m].trim() == '') {
|
||
html += '<br/>';
|
||
continue;
|
||
}
|
||
if (mds[m][0] == '#') { //标题1/2/3
|
||
if (mds[m].substr(0, 4) == '####') {
|
||
titnum4++;
|
||
html += '<h3 class="md-h4">' + titnum2 + '.' + titnum3 + '.' + titnum4 + '、' + convertcode(mds[
|
||
m].substr(4)) + '</h3>';
|
||
} else if (mds[m].substr(0, 3) == '###') {
|
||
titnum3++;
|
||
titnum4 = 0;
|
||
html += '<h3 class="md-h3">' + titnum2 + '.' + titnum3 + '、' + convertcode(mds[m].substr(3)) +
|
||
'</h3>';
|
||
} else if (mds[m].substr(0, 2) == '##') {
|
||
titnum2++;
|
||
titnum3 = 0;
|
||
html += '<h2 class="md-h2">' + titnum2 + '、' + convertcode(mds[m].substr(2)) + '</h2>';
|
||
} else if (mds[m].substr(1, 1) == 'c' || mds[m].substr(1, 1) == 'C')
|
||
html += '<h1 class="md-h1" style="text-align:center;">' + convertcode(mds[m].substr(2)) +
|
||
'</h1>';
|
||
else if (mds[m].substr(1, 1) == 'r' || mds[m].substr(1, 1) == 'R')
|
||
html += '<h1 class="md-h1" style="text-align:right;">' + convertcode(mds[m].substr(2)) +
|
||
'</h1>';
|
||
else
|
||
html += '<h1 class="md-h1">' + convertcode(mds[m].substr(1)) + '</h1>';
|
||
|
||
} else if (mds[m][0] == '@') { //c居中，r靠右
|
||
if (mds[m][1] == 'c' || mds[m][1] == 'C')
|
||
html += '<div class="md-content" style="text-align:center;">' + convertcode(mds[m].substr(2)) +
|
||
'</div>';
|
||
else if (mds[m][1] == 'r' || mds[m][1] == 'R')
|
||
html += '<div class="md-content" style="text-align:right;margin-right:1em;">' + convertcode(
|
||
mds[m].substr(2)) + '</div>';
|
||
else
|
||
html += '<div class="md-content">' + mds[m].substr(1) + '</div>';
|
||
|
||
} else if (mds[m][0] == '!') { //图片、视频、音频
|
||
var mis = mds[m].split('|');
|
||
var url = mis[0];
|
||
url = this.file_stor(url.substring(1));
|
||
var ind = url.indexOf('?');
|
||
var match;
|
||
if (ind > -1) {
|
||
match = url.substring(0, ind).match(/\.([^./]+)$/);
|
||
} else
|
||
match = url.match(/\.([^./]+)$/);
|
||
var exurl = match ? match[1] : '';
|
||
htmls.push({type:'text',content:html});
|
||
html = '';
|
||
if (exurl == 'mp4' || exurl == 'm3u8') {
|
||
var alt = '';
|
||
if (mis[1])
|
||
alt = ' alt="' + mis[1].replace('"', "") + '"';
|
||
htmls.push({type:'video',content:url});
|
||
} else if (exurl == 'mp3') {
|
||
var alt = '';
|
||
if (mis[1])
|
||
alt = ' alt="' + mis[1].replace('"', "") + '"';
|
||
htmls.push({type:'audio',content:url});
|
||
} else {
|
||
var alt = '';
|
||
if (mis[1])
|
||
alt = ' alt="' + mis[1].replace('"', "") + '"';
|
||
htmls.push({type:'image',content:url});
|
||
}
|
||
} else if (mds[m][0] == '<') { //原始HTML
|
||
html += mds[m];
|
||
} else {
|
||
html += '<div class="md-content">' + convertcode(mds[m]) + '</div>';
|
||
}
|
||
}
|
||
if(html)
|
||
htmls.push({type:'text',content:html});
|
||
return htmls;
|
||
|
||
function convertcode(md) {
|
||
var bcode = false;
|
||
md = md.replace(/ /g, ' ').replace(/ /g, ' ');
|
||
while (true) {
|
||
var ind = md.indexOf('`');
|
||
if (ind == -1)
|
||
break;
|
||
var el = '<text class="md-code">';
|
||
if (bcode) {
|
||
bcode = false;
|
||
el = '</text>';
|
||
} else
|
||
bcode = true;
|
||
md = md.substr(0, ind) + el + md.substr(ind + 1);
|
||
}
|
||
while (true) {
|
||
var ind = md.indexOf('**');
|
||
if (ind == -1)
|
||
break;
|
||
var el = '<text style="font-weight:bold;">';
|
||
if (bcode) {
|
||
bcode = false;
|
||
el = '</text>';
|
||
} else
|
||
bcode = true;
|
||
md = md.substr(0, ind) + el + md.substr(ind + 2);
|
||
}
|
||
if (bcode)
|
||
md += '</text>';
|
||
return md;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
</style> |