bin-editor-next实现josn序列化

线上链接 BIN-EDITOR-NEXThttps://wangbin3162.gitee.io/bin-editor-next/#/editor

gitee地址bin-editor-next: ace-editor 的vue3升级版本https://gitee.com/wangbin3162/bin-editor-next#https://gitee.com/link?target=https%3A%2F%2Funpkg.com%2Fbin-editor-next%2F

实现效果

安装步骤

npm 安装

推荐使用npm安装,它能更好地和webpack打包工具配合使用。而且可以更好的和 es6配合使用。并且支持按需引入

复制代码
npm i bin-editor-next -S
# or 
yarn add bin-editor-next

引入

在 main.js 中写入以下内容:

复制代码
import { createApp } from 'vue'
import Editor from 'bin-editor-next';
import App from './App.vue';

import * as ace from 'brace'
import 'brace/ext/emmet'
import 'brace/ext/language_tools'
import 'brace/mode/json'
import 'brace/snippets/json'
import 'brace/theme/chrome'

const app = createApp(App)
app.component(Editor.name, Editor)
app.mount('#app', true)

使用

parameter.value = JSON.stringify(JSON.parse(row.value), null, 2)

html 复制代码
 <!-- 修改 -->
    <el-dialog :title="title" v-model="editDialog" width="30%" draggable>
      <b-ace-editor v-model="parameter" height="400"></b-ace-editor>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="onCancel" size="default">取 消</el-button>
          <el-button type="primary" @click="onSubmit" size="default">确定</el-button>
        </span>
      </template>
    </el-dialog>
javascript 复制代码
// 编辑器JSON字符串变量
const parameter = ref()

// 打开修改角色弹窗
const currentRow = ref()
const onOpenEditRole = (row: any) => {
  editDialog.value = true;
  title.value = '设备驱动修改窗口'
  parameter.value = []
  parameter.value = toRaw(row.options)
  currentRow.value = tableData.value.findIndex((item: any) => item === row);
};

const onSubmit = async () => {
  let tablebasic = toRaw(tableData.value)
  tablebasic[currentRow.value].options = parameter.value
  await postDeviceAddSave(tablebasic)
  await getTableData()  //刷新页面
  editDialog.value = false;
}

提示报错添加文件 src中添加 type.d.ts :declare module "bin-editor-next";

相关推荐
DN金猿5 分钟前
使用npm install或cnpm install报错解决
前端·npm·node.js
丘山子5 分钟前
一些鲜为人知的 IP 地址怪异写法
前端·后端·tcp/ip
志存高远6618 分钟前
Kotlin 的 suspend 关键字
前端
www_pp_30 分钟前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui
天天扭码1 小时前
总所周知,JavaScript中有很多函数定义方式,如何“因地制宜”?(ˉ﹃ˉ)
前端·javascript·面试
一个专注写代码的程序媛1 小时前
为什么vue的key值,不用index?
前端·javascript·vue.js
장숙혜1 小时前
ElementUi的Dropdown下拉菜单的详细介绍及使用
前端·javascript·vue.js
火柴盒zhang1 小时前
websheet之 编辑器
开发语言·前端·javascript·编辑器·spreadsheet·websheet
某公司摸鱼前端1 小时前
uniapp 仿企微左边公司切换页
前端·uni-app·企业微信
WKK_1 小时前
uniapp自定义封装tabbar
前端·javascript·小程序·uni-app