Description
- Simple vue-json-editor
- Apply
perfect scrollbar
Usage
Install the package
npm install vue-json-editor-zImport the module in the place you want to use:
import TextEditor from 'vue-json-editor-z'
import 'vue-json-editor-z/dist/styles.css'
import 'perfect-scrollbar/css/perfect-scrollbar.css'; // perfect-scrollbar
Vue.component('editor', TextEditor)Snippet
// json-edtor
<Editor :dataSource="dataSource" height="400px" @change="editorChange" />
/*
editorChange({ error, dataSource }) {
if (error) {
this.label = 'JSON syntax error'
return
}
this.dataSource = dataSource
}
*/
// =============================
// =============================
<Editor :dataSource="dataSource" :showHeader="false" />
// =============================
// =============================
<Editor :dataSource="dataSource" :isFetchLoading="isFetchLoading" />
<button @click="isFetchLoading = !isFetchLoading">Submit</button> // make lock editor when save api
// =============================
// =============================
<Editor :dataSource="dataSource" :readOnly="true" />
// =============================
// no break (scroll x)
<Editor :dataSource="dataSource" :wrap="false" /> //
// =============================
// =============================
// ace options
<Editor :dataSource="dataSource" :options="{showGutter : false}" />
// =============================
// =============================
// text-area
<Editor :dataSource="text" language="text" />Props
options and theme: see brace
It's not necessary, the default has already configured enough info for the editor.
| props | type | description |
|---|---|---|
| language | String | json/json_view/text |
| dataSource | if [json or json_view any]. [else string] |
|
| height | String | px, %, vh |
| width | String | px, %, vw |
| readOnly | boolean | |
| wrap | boolean | breakline. Default true
|
| showSearch | boolean | search ctrl+f. Default true
|
| disabledTab | boolean | When keypress tab move next component. Default false
|
| showAutoComplete | boolean | Ctrl+space. Default true
|
| isFetchLoading | boolean | when submit or fetch data api (true). Done false
|
| customLoading | boolean | custom loading |
| change | function | See snippet |
suggestDataComplete (array)
custom suggest snippet
=> It's not necessary
suggestDataComplete = [
{ caption: 'imr', value: 'import react', meta: 'static' },
...more
]Example
A working example can be found in the example directory.
npm installnpm run dev
npm run startLicense
MIT