解決精度丟失問(wèn)題，移步我的其他文章

vue-json-editor

1.安裝vue-json-editor

npm install vue-json-editor --save

2.在.vue 文件中引用

import JsonEditor from "vue-json-editor";

3.使用

<template><div class = "routeManagement"><vue-json-editor v-model="routeJson" :showBtns="true" lang="zh"@json-change="onJsonChange" @json-save = "onJsonSave"/></div> </template><script> // 引入vue-json-editor模塊 import vueJsonEditor from 'vue-json-editor' export default {data () {return{// 可使用 JSON.parse() JSON.stringify() 轉(zhuǎn)化 json 數(shù)據(jù)json: {msg: 'demo of jsoneditor'}}},components: {vueJsonEditor},methods: {onJsonChange () { // 數(shù)據(jù)改變時(shí)觸發(fā)},onJsonSave(){ // 點(diǎn)擊保存觸發(fā)}}, } </script><style lang="scss" scoped> .routeManagement{width:98%;margin:16px auto;/deep/.jsoneditor-vue{height:700px;}/deep/.json-save-btn{cursor: pointer;} } </style>

4.效果

codemirror + json-lint

1.安裝

npm install codemirror npm install json-lint

2.組件

<template><div class="json-editor"><textarea ref="textarea" /></div> </template><script> import CodeMirror from 'codemirror' import 'codemirror/addon/lint/lint.css' import 'codemirror/lib/codemirror.css' import 'codemirror/theme/rubyblue.css' require('script-loader!jsonlint') import 'codemirror/mode/javascript/javascript' import 'codemirror/addon/lint/lint' import 'codemirror/addon/lint/json-lint'export default {name: 'JsonEditor',/* eslint-disable vue/require-prop-types */props: ['value'],data() {return {jsonEditor: false}},watch: {value(value) {const editorValue = this.jsonEditor.getValue()if (value !== editorValue) {this.jsonEditor.setValue(JSON.stringify(this.value, null, 2))}}},mounted() {this.jsonEditor = CodeMirror.fromTextArea(this.$refs.textarea, {lineNumbers: true,mode: 'application/json',gutters: ['CodeMirror-lint-markers'],theme: 'rubyblue',lint: true})this.jsonEditor.setValue(JSON.stringify(this.value, null, 2))this.jsonEditor.on('change', cm => {this.$emit('changed', cm.getValue())this.$emit('input', cm.getValue())})},methods: {getValue() {return this.jsonEditor.getValue()}} } </script><style lang="scss" scoped> .json-editor {height: 100%;position: relative;::v-deep {.CodeMirror {height: auto;min-height: 300px;}.CodeMirror-scroll {min-height: 300px;}.cm-s-rubyblue span.cm-string {color: #F08047;}} } </style>

3.使用

先引入組件然后直接用 <JsonEditor ref="jsonEditor" v-model="jsonValue"></JsonEditor>

4.效果圖

總結(jié)

以上是生活随笔為你收集整理的两种前端在线json编辑器方案(无法解决number精度丢失问题)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。