前两天，做了一个支持markdown的功能： http://www.cnblogs.com/XHappyness/p/8097756.html
后面发现预览效果某些标签需要bootstrap的支持才能显出相关的样式，于是乎 npm bootstrap；并在此页面的.ts文件中 import 'bootstrap/dist/css/bootstrap.min.css'，本以为只在改页面引入并不会影响全局样式，然并卵！！
解决办法：将预览地方的div换成iframe
.vue
<div class="marked"> <el-tabs v-model="tastDtailType" @tab-click="changeTab" class="markdown-tabs"> <el-tab-pane label="Write" name="write"> <el-input type="textarea" placeholder="请输入备注" v-model="task.description" :autosize="{minRows: 2, maxRows:30}" class="none-border"></el-input> </el-tab-pane> <el-tab-pane label="Preview" name="preview"> <iframe id="tast-dtail-preview" runat="server" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes"></iframe> <!-- <div id="tast-dtail-preview"></div> --> </el-tab-pane> </el-tabs> </div>
.css
/* markdown格式 */ .marked { min-height: 120px; padding:10px; border-radius: 4px; border: 1px solid #bfcbd9; &:hover { border-color: #8391a5!important; } & #tast-dtail-preview { margin-left: 7px; } }
.ts
//任务详情markd是预览还是书写 changeTab(tastDtailType) { this.tastDtailType = tastDtailType.name; if (tastDtailType.name === 'preview' && this.task.description != '') { let tastDtailPreview = Marked(this.task.description); let iframe = document.querySelector('#tast-dtail-preview') as HTMLIFrameElement; iframe.contentDocument.body.innerHTML = '<head><link href="http://crowdsourcing.gridsumdissector.com/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"></head>' + tastDtailPreview; } }
方法也是笨拙而巧妙，感谢同事帮忙挖坟。。。。
新坑：不滚动的话，内容不能全部显示，目前还没研究怎么是iframe自动高度，于是乎还是滚吧....
//任务详情markd是预览还是书写 changeTab(tastDtailType) { this.tastDtailType = tastDtailType.name; if (tastDtailType.name === 'preview') { let tastDtailPreview = Marked(this.task.description); let iframe = document.querySelector('#tast-dtail-preview') as HTMLIFrameElement; iframe.contentDocument.body.innerHTML = '<head><link href="http://crowdsourcing.gridsumdissector.com/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"></head>' + tastDtailPreview; let height = $('.none-border').height(); //.none-border是左侧书写部分的
let width = $('.none-border').width();
iframe.style.height = height + 'px'; iframe.style.width = width + 'px';
}
}