simditor编辑时选配图vue的实现

首先,我们给window添加一个imgs属性用来装上传成功的图片地址,imgs是一个数组.

选配图时我们需要监听编辑内容的状态,

这个时候我们再给window添加一个属性,属性名随性 如:window.bus= new Vue;

这时的bus就可以调用$on(监听)跟$emit (触发)方法了,

我们会在内容发生改变时,触发一个事件,这个事件名字不固定,但是要跟监听的事件名对应,

这里就叫"editor_value_changed"吧

2018-01-13 18-30-52屏幕截图.png

再注册一个选配图的组件 就叫 ImageSelect.vue吧 ,在这个组件的created 生命周期函数里去监听当图片上传成功之后触发的 editor_value_changed 事件 ,

当监听事件触发之后,会调用methods 里的函数,在这个函数里面将上传成功的图片数组赋值给一个变量,再将这个数组循环渲染出来

2018-01-13 19-23-20屏幕截图.png

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容