vue codemirror 设置高度无效的解决办法

最近使用vue-codemirror发现设置高度怎么都不生效，网上的办法都用了也不行，最后终于摸索出解决办法

首先是坑

不能使用scss, 只有使用css才有效

要给.CodeMirror-scroll设置高度，给.CodeMirror设置高度无效

<template><div class="root"><div class="my"><codemirrorref="myCm"v-model="formData.queryText":options="cmOptions"@ready="onCmReady"@focus="onCmFocus"@input="onCmCodeChange"></codemirror></div></div>
</template>
<script>
import "codemirror/mode/sql/sql.js";
// theme css
import "codemirror/theme/solarized.css";
// require active-line.js
import "codemirror/addon/selection/active-line.js";
// closebrackets
import "codemirror/addon/edit/closebrackets.js";export default {data() {return {formData: {queryText: "",},cmOptions: {tabSize: 4,styleActiveLine: true,lineNumbers: true,line: true,mode: "text/x-mysql",theme: "solarized light",},};},computed: {codemirror() {return this.$refs.myCm.codemirror;},},methods: {showSQL(val) {this.formData.queryText = val ? val : "";},onCmReady(cm) {this.codemirror.setSize("-webkit-fill-available", "auto");},onCmFocus(cm) {// console.log('the editor is focus!', cm)},onCmCodeChange(newCode) {console.log("this is new code", newCode);this.formData.queryText = newCode;this.$emit("codeChange", this.formData.queryText);},},
};
</script>
<style scoped lang="css">
.root {height: 700px;background-color: rgb(228, 41, 41);
}
.my {width: 900px;height: 600px;background-color: rgb(151, 73, 73);
}
.my >>> .CodeMirror-scroll {height: 500px;overflow-y: hidden;overflow-x: auto;
}</style>

vue codemirror 设置高度无效的解决办法相关推荐

关于后端设置cookie无效的解决办法
之前项目有一个需求,在下载文件的时候,在向后端发出请求的这段时间要有loading动画提高交互性. 但是当时后端只能以传统的向前端发送流的形式来下载,ajax派不上用场,只能用js去模拟,但是这样就监 ...
设置line-height无效的解决办法
今天在做项目的时候遇到一个很奇怪的问题,明明设置了line-height,可是文字并没有垂直居中,大概如下: 效果如下显然line-height没有生效,后来发现font组合属性不能写到line-h ...
VirtualBox桥接网络设置无效的解决办法
VirtualBox桥接网络设置无效的解决办法前提:如果本机Windows系统和VirtualBox虚拟机没在一个网段,虚拟机网络设置桥接 1.更改网络适配器–以太网(属性),右键属性 2.安装–选 ...
Vue下 touchstart touchend 事件无效失效解决办法
Vue下 touchstart touchend 事件无效失效解决办法 <van-button:disabled="isLoading"plaintype="inf ...
HTML给div设置百分比高度无效的解决方式 - 库塔姆斯 - CSDN博客
HTML给div设置百分比高度无效的解决方式 - 库塔姆斯 - CSDN博客原文: HTML给div设置百分比高度无效的解决方式 - 库塔姆斯 - CSDN博客版权声明:本文为博主原创文章,未经博 ...
通过设置修改默认浏览器无效的解决办法--修改注册表
通过设置修改默认浏览器无效的解决办法--修改注册表问题描述: win7下通过控制面板设置Chrome为默认浏览器时无效(系统貌似默认IE浏览器为默认浏览器) 解决方法: 第一步:快捷键win+R , ...
android设置返回按钮无效,Android onKeyDown监听返回键无效的解决办法
Android onKeyDown监听返回键无效的解决办法当我们的Activity继承了TabActivity,在该类中重写onKeyDown是监听不到返回键的, 具体解决方法如下: 重写dispa ...
vscode自动加前缀_详解VScode自动补全CSS3前缀插件以及配置无效的解决办法
1.在vscode中搜索Autoprofixer 2.在安装完成之后要配置在需要添加前缀的css文件上,右键点击命令面板,输入Autoprefixer CSS就好啦 ps: 如果想要兼容性最好的话, ...
记录webView接入h5界面时，调起相册、文件、相机无效的解决办法
记录webView接入h5界面时,调起相册.文件.相机无效的解决办法. 在开发项目时,接入一个h5界面.使用webview时,发现界面显示正常,但是按钮不论怎么点都无效,但是m站和ios都正常.后来上 ...

vue codemirror 设置高度无效的解决办法

最近使用vue-codemirror发现设置高度怎么都不生效，网上的办法都用了也不行，最后终于摸索出解决办法

首先是坑

vue codemirror 设置高度无效的解决办法相关推荐

最新文章

热门文章