当前位置: 首页 > 工具软件 > json-editor > 使用案例 >

vue-json-editor实现json编辑器并且可以正常输入中文

干永丰
2023-12-01

我这里使用的是vue3,vue2的话建议看官方文档https://github.com/dirkliu/vue-json-editor
安装:npm install vue-json-editor --save

template>
  <div>
    <vueJsonEditor
		:value="caseForm['parameters']['value']"
		:show-btns="false"
		:mode="'text'"
		lang="zh"
		@json-change="onJsonChange"
		@json-save="onJsonSave"
		@has-error="onError"
	></vueJsonEditor>
  </div>
</template>
<script lang="ts">
  import vueJsonEditor from 'vue-json-editor'

  export default defineComponent({
	setup() {
		const onJsonChange = (value: any) => {
			onJsonSave(value);
		};
		const onJsonError = (value: any) => {
			//json参数格式错误时执行的方法
		};
		const onJsonSave = (value: any) => {
			state.caseForm['parameters']['value'] = value;
		};
		return {
			onJsonSave,
			onJsonError,
			onJsonChange,
		}
	}
})
</script>

备注:这里如果mode的值使用的是code的话输入中文的话,会有重影,而且输入中文会有问题,故使用text这个值,如果使用这个还不满意,建议直接和需求人说:这个需求我做不了【手动滑稽】

 类似资料: