前兩天，做了一個支持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';
}
}