vue-bulma / modal

Modal component for Vue Bulma
MIT License
49 stars 28 forks source link

modify: remove 'show' and add events #5

Closed zsrl closed 7 years ago

zsrl commented 7 years ago

1、删除了组件中通过data定义的show变量,直接用props中传入的visible判断是否展示弹出。 2、删除afterLeave方法以及组件的destroyed生命周期方法,用v-if做判断可以在关闭时删除页面上的元素,觉得这里似乎没必要销毁组件。 3、为组件暴露三个绑定事件,ok(CardModel独有),cancel(CardModel独有),close,让用户可以自主控制弹出行为。

fundon commented 7 years ago

非常感谢。

但修改后,背景遮罩和x按钮,点击后无法关掉。

zsrl commented 7 years ago

我的想法是把close事件交给用户自己去定义,所以,需要在自定义的close事件中手动设置弹窗隐藏。我个人更适应这种方式,可控性比较大,比如我还可以在close的时候执行一些其他的事情。但可能不符合你当初的设计思想。

<card-modal :visible="isShowCover" title="剪裁图片" @ok="submit" @close="close">
 </card-modal>

close () {
   this.isShowCover = false
  // do something else
}
submit () {
   // do something
}
fundon commented 7 years ago

嗯,这块我在重构,看看怎么结合

fundon commented 7 years ago

发布了最新的 v1.0.1。你可以瞧瞧。