bootstrap和elementUI真的会冲突
前两天，做了一个支持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真的会冲突的更多相关文章
- bootstrap modal与select2使用冲突解决
今天发现项目使用bootstrap modal 与 jquery select2 结合时发现select2不起作用,点击select框不显示选项,查阅资料后发现是因为modal层遮挡了select2的 ...
- 时间插件datepicker（jQuery-UI，bootstrap）和jquery-steps的冲突解决。。。
日期插件初始化: $('.prelease_time').flatpickr(); let contentSteps = $("#content_form").steps({ h ...
- 解决bootstrap row span设置border换行的问题
Hadoop方面的毕业设计告一段落了,趁这几天空闲时间认真学习一下之前常使用但是却没用好的Bootstrap. 本文记录Bootstrap框架使用栅格系统时,遇到row内的span设置border换行 ...
- BootStrap 4正式版发布（原文翻译）
原文链接:http://blog.getbootstrap.com/2018/01/18/bootstrap-4/ 关于Bootstrap 什么是Bootstrap Bootstrap,来自 Twit ...
- 打造 Vue.js 可复用组件
Vue.js 是一套构建用户界面的渐进式框架.我们可以使用简单的 API 来实现响应式的数据绑定和组合的视图组件. 从维护视图到维护数据,Vue.js 让我们快速地开发应用.但随着业务代码日益庞大,组 ...
- Vue 全家桶 + Electron 开发的一个跨三端的应用
代码地址如下:http://www.demodashi.com/demo/11738.html GitHub Repo:vue-objccn Follow: halfrost · GitHub 利用 ...
- vue中如何编写可复用的组件？
原文地址 Vue.js 是一套构建用户界面的渐进式框架.我们可以使用简单的 API 来实现响应式的数据绑定和组合的视图组件. 从维护视图到维护数据,Vue.js 让我们快速地开发应用.但随着业务代码日 ...
- [转载]SVN-主干/分支
一个大项目在开发中可能会拆分成几个小项目,分别分去,同时共通的部分再由人做,做完后再统一合并.同时,在开发中,共通的部分修改后,其它人要保持同步. 这种情况反应到SVN的分支/合并功能上,再贴切不过了 ...
- Kendo UI for ASP.NET MVC 的一些使用经验（转）
转自 http://blog.csdn.net/dj2008/article/details/45313805 最近的项目里用到了Kendo UI.这货很好很强大,但可惜官方文档组织的并不是很好,有很 ...
随机推荐
- bootstrap到底是用来做什么的
Bootstrap官网:http://v3.bootcss.com/ Bootstrap是Twitter推出的一个用于前端开发的开源工具包.它由Twitter的设计师Mark Otto和Jacob T ...
- 使用 form 和 iframe 实现图片上传回显
主要利用 form 的 target 属性,在提交表单之后 response 返回到 iframe 中 form 的 action 可以自己写,也可以直接利用 富文本编辑器的接口实现上传 <fo ...
- /etc/fstab开机自动挂载设备配置
第一列:设备名字(路径?) 第二列:设备挂载路径(挂载到的位置) 第三列:分区格式 第四列:文件系统参数(?) 第五列:是否自动dump备份 0 不要 1 定期 2 不定期 第六 ...
- 剑指offer—二维数组中的查找
题目描述 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数 ...
- Vue插槽 slot
1. 什么是插槽 插槽slot 是往父组件中插入额外内容,实现组件的复用,一个插槽插入到一个对应的标签中 2. 实例: 一个组件中不允许有两个匿名插槽 </head> <body&g ...
- 【c学习-13】
/*库函数 1:数学函数库:math.h abs():绝对值; acos(),asin(),atan():cos,sin,tan的倒数 exp():指数的次幂 pow(x,y):x的y次幂 log() ...
- 原lnmp环境服务器升级为mysql+nginx+php单个docker容器构建的lnmp环境
时间:2018年2月 一.项目背景 我单位现web服务架构为lnmp环境,服务器软件.硬件升级部署难:同时开源软件日新月异,考虑到技术升级,领导决定服务器架构整体升级为容器架构,维护性.移植性强. 二 ...
- idea启动spring boot无法加载或找不到主类
问题产生原因:moudle名称修改,导致项目启动不了 在Terminal界面中执行以下三个命令,我在执行第一个命令的时候报了一个找不到dependency的错误,把那个报错的dependency删了就 ...
- Spring中的设计模式--观察者模式
spring在容器中使用了观察者模式: 一.spring事件:ApplicationEvent,该抽象类继承了EventObject类,jdk建议所有的事件都应该继承自EventObject. 二.s ...
- python eval()函数的妙用和滥用
eval()函数十分强大,官方demo解释为:将字符串str当成有效的表达式来求值并返回计算结果: >>> s='8*8' >>> eval(s) 64 >& ...