vue-json-editor 如何更改高度

vue-json-editor 如何更改高度

1.设置style属性
2.css设置height为100%,注意,style标签中不能加scoped,否则没有效果
3.具体代码(关键部分代码)如下:
 下载依赖:
	npm install vue-json-editor --save-dev
  组件:
  <vue-json-editor 
      v-model="json" //模型对象数据
      :showBtns="true" //展示保存按钮
      lang="zh"  //默认语言
      :mode="'text'"  //默认展示格式
      style="height: 420px" //默认样式
      @json-change="onJsonChange" //数据改变触发事件
      @json-save ="onJsonSave"//保存
       />
js代码
<script>
	import vueJsonEditor from 'vue-json-editor'
	export default {
		components: { vueJsonEditor },
		data () {
            return {
            	json:{"data":"成功!"}
            }
         }
	}

</script>
样式:
<style lang="less">
	.jsoneditor-vue{
	    height: 100%;
	}
</style>

以上思路仅供参考,如有更好的建议,欢迎大佬在下方留言!

评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值