指令
該指令的作用是dom渲染后觸發(fā),因?yàn)榉莢ue的插件有的是dom必須存在的情況下才可以執(zhí)行
Vue.directive('loaded-callback', { inserted: function (el, binding, vnode) { binding.value(el, binding, vnode) }})
安裝kindeditor
npm install kindeditor
kindeditor組件
<template> <div class="kindeditor"> <textarea class="form-control" ref="kindeditor" v-model="localValue" name="content" v-loaded-callback='initKindeditor'></textarea> </div></template><script>import '../../../../../node_modules/kindeditor/kindeditor-all.js'import '../../../../../node_modules/kindeditor/lang/zh-CN.js'import '../../../../../node_modules/kindeditor/themes/default/default.css'export default { name: 'kindeditor', props: ['options', 'value'], data () { return { localValue: '' } }, watch: { localValue: 'updateValue', value: 'setDefault' }, created () { this.setDefault() }, methods: { initKindeditor () { var _this = this // 默認(rèn)參數(shù) var options = { uploadJson: 'upload/image', width: '100%', afterChange () { _this.localValue = this.html() } } // 調(diào)用外部參數(shù) if (_this.options) { for(var i in _this.options){ options[i] = _this.options[i] } } KindEditor.create(_this.$refs.kindeditor,options); }, // 設(shè)置初始值 setDefault () { this.localValue = this.value }, // 修改父件的值 updateValue () { this.$emit('input',this.localValue) } }}</script>
用法
<kindeditor :options="options" v-model="content"></kindeditor>
options參考
http://kindeditor.net/docs/option.html
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,謝謝大家對武林網(wǎng)的支持。
新聞熱點(diǎn)
疑難解答