- Simple vue-json-editor
- Apply
perfect scrollbar
Install the package
npm install vue-json-editor-z
Import 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)
// 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" />
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 |
custom suggest snippet
=> It's not necessary
suggestDataComplete = [
{ caption: 'imr', value: 'import react', meta: 'static' },
...more
]
A working example can be found in the example
directory.
npm install
npm run dev
npm run start
MIT