vue-js-modal 正确用法

[Dream4ever]

需求描述

Vue 组件化开发需要用到模态对话框 Modal，捣鼓了半天才成功调用，真是折腾。

方案调研

调研过程

上 euvl/vue-js-modal 官网看 README.md 研究组件的正确用法，发现官方文档并不是完全正确的，经过一番折腾，才成功调用组件。

应用过程

Modal 定义

定义 Modal 时，按照如下格式，将代码保存为 VideoModal.vue 文件：

<template>
  <modal
    name="video-modal">
    <div>This is a modal!</div>
  </modal>
</template>
<script>
export default {
  name: 'VideoModal',
};
</script>

template 中的 name 属性值要用短横线分隔命名，script 中的 name 属性值则要用驼峰命名。

Modal 调用

调用 Modal 时，先在调用该组件的 .vue 文件中的 script 代码块内，以下面的方式引入组件：

import VideoModal from './components/VideoModal';

export default {
  name: 'App',
  components: {
    VideoModal,
  }
};

然后在 template 中，以下面的格式插入组件，即用短横线分隔命名的形式调用：

<video-modal/>

最后，在需要显示/隐藏该组件时，用下面的方式实现：

// 在 script 中
this.$modal.show('video-modal');
// 官方文档也列出了下面这种写法，但是实际应用的时候是无效的
this.$modal.show('VideoModal');
// 在 template 中
<div @click="$modal.hide('video-modal')"></div>

要点总结

即使是官方文档，也需要“辩证”地看，有时候的确是文档写错了，就需要自己能够找准出现问题的原因。