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

bootstrap和elementUI真的会冲突的更多相关文章

  1. bootstrap modal与select2使用冲突解决

    今天发现项目使用bootstrap modal 与 jquery select2 结合时发现select2不起作用,点击select框不显示选项,查阅资料后发现是因为modal层遮挡了select2的 ...

  2. 时间插件datepicker（jQuery-UI，bootstrap）和jquery-steps的冲突解决。。。

    日期插件初始化:  $('.prelease_time').flatpickr(); let contentSteps = $("#content_form").steps({ h ...

  3. 解决bootstrap row span设置border换行的问题

    Hadoop方面的毕业设计告一段落了,趁这几天空闲时间认真学习一下之前常使用但是却没用好的Bootstrap. 本文记录Bootstrap框架使用栅格系统时,遇到row内的span设置border换行 ...

  4. BootStrap 4正式版发布（原文翻译）

    原文链接:http://blog.getbootstrap.com/2018/01/18/bootstrap-4/ 关于Bootstrap 什么是Bootstrap Bootstrap,来自 Twit ...

  5. 打造 Vue.js 可复用组件

    Vue.js 是一套构建用户界面的渐进式框架.我们可以使用简单的 API 来实现响应式的数据绑定和组合的视图组件. 从维护视图到维护数据,Vue.js 让我们快速地开发应用.但随着业务代码日益庞大,组 ...

  6. Vue 全家桶 + Electron 开发的一个跨三端的应用

    代码地址如下:http://www.demodashi.com/demo/11738.html GitHub Repo:vue-objccn Follow: halfrost · GitHub 利用 ...

  7. vue中如何编写可复用的组件？

    原文地址 Vue.js 是一套构建用户界面的渐进式框架.我们可以使用简单的 API 来实现响应式的数据绑定和组合的视图组件. 从维护视图到维护数据,Vue.js 让我们快速地开发应用.但随着业务代码日 ...

  8. [转载]SVN-主干/分支

    一个大项目在开发中可能会拆分成几个小项目,分别分去,同时共通的部分再由人做,做完后再统一合并.同时,在开发中,共通的部分修改后,其它人要保持同步. 这种情况反应到SVN的分支/合并功能上,再贴切不过了 ...

  9. Kendo UI for ASP.NET MVC 的一些使用经验（转）

    转自 http://blog.csdn.net/dj2008/article/details/45313805 最近的项目里用到了Kendo UI.这货很好很强大,但可惜官方文档组织的并不是很好,有很 ...

随机推荐

  1. ETO的公开赛T1《矿脉开采》题解（另类版）

    这道题别看是签到题,写起来一点不简单 出题人的正解是双向搜索 我们把物品分成两半 每一半分别跑搜索 答案存下来,用个双指针合并即可 然后我构造了两组数据卡掉了他,不得不缩小数据范围 但我这里为什么要致 ...

  2. [HAOI2007]理想的正方形（随机化，骗分？）

    题目描述 有一个a*b的整数组成的矩阵,现请你从中找出一个n*n的正方形区域,使得该区域所有数中的最大值和最小值的差最小. 输入输出格式 输入格式: 第一行为3个整数,分别表示a,b,n的值 第二行至 ...

  3. 快速玩转linux(4)

    websever安装配置 Nginx & Apache 并发量. Apache基本操作 解释 命令 安装 yum install httpd 启动 service httpd start 停止 ...

  4. 【ppp-chap,pap,mp,mp-group】

    PPP链路端口验证(单){ PAP(明文): 主验证方: {local-user user_name:配置本地用户; password {simple||cipher}:配置验证密码; service ...

  5. 三、css篇

    #这里强烈推荐一本书<css世界>,css第一书. #上面的层叠顺序得记住. 1.align-items  justify-content 是flex(弹性盒模型)必须要会的属性,alig ...

  6. vs2017升级、安装

    图解VS 2017升级并安装.NET Core 2.1 SDK https://jingyan.baidu.com/album/ff42efa9fb5816c19e2202ef.html?picind ...

  7. narcissus

    public class narcissus { public static void main(String args[]) { long u=0,t=0,h=0,y=0,k=0; for(long ...

  8. phpMyAdmin出现错误 Access denied for user 'root'@'localhost' (using password: NO)

    今天安装wmpp,之后启动后点击phpMyAdmin 报拒绝连接错误:#1045 - Access denied for user 'root'@'localhost' (using password ...

  9. Mysql双主操作

    MySQL双主(主主)架构方案   在企业中,数据库高可用一直是企业的重中之重,中小企业很多都是使用mysql主从方案,一主多从,读写分离等,但是单主存在单点故障,从库切换成主库需要作改动.因此,如果 ...

  10. samba与apache配置使用

    samba与apache根目录 1.直接将apache用户作为samba用户 2.给apache用户赋宇网站根目录的acl rwx权限 #注意 第一次不要加默认的权限 setfacl -m u:apa ...