surmon-china / vue-codemirror

@codemirror code editor component for @vuejs
https://github.surmon.me/vue-codemirror
MIT License
3.28k stars 382 forks source link

CDN Example The event=>cursorActivity is not effective why? #77

Open kingrome2017 opened 6 years ago

kingrome2017 commented 6 years ago

`

` `Vue.use(VueCodemirror,{event:['cursorActivity']}) new Vue({ el: '#vueapp', data: { code2: 'function b () {}const a = 10const a = 10const a = 10', cmOption: { tabSize: 4, styleActiveLine: true, lineNumbers: true, mode: 'text/javascript', theme: "monokai" } }, components: { LocalCodemirror: VueCodemirror.codemirror }, methods: { onCmBlur(cm) { console.log('cm blur!', cm) }, onCmFocus(cm) { console.log('cm focus!', cm) }, onCmReady(cm) { console.log('cm ready!', cm) }, onCmInput(newCode) { this.code2 = newCode }, onCmCursorActivity(codemirror) { console.log('onCmCursorActivity', codemirror) //why?????????? }, }, computed: { }, mounted() { console.log('this is codemirror A instance object', this.cmA, 'Merge instance', this.cmMerge) } })`
surmon-china commented 6 years ago

Because the hump name will be invalid in the browser DOM, you need to use - as the event name.

<local-codemirror ref="cmA"
                  :value="code2"
                  :options="cmOption"
                  @blur="onCmBlur($event)"
                  @focus="onCmFocus($event)"
                  @ready="onCmReady($event)"
                  @cursor-activity="onCmCursorActivity"
                  @input="onCmInput">
</local-codemirror>