Vue的可重用Modal模态组件 - vue-modal

Vue的可重用Modal模态组件 - vue-modal
插件名称 vue-modal
发布时间 2020年5月25日
插件作者 MelMacaluso

可重用的Modal组件,支持自己的自定义HTML,文本和类和/或传递组件。具有多个模式内容/按钮。

安装和下载:

# NPM
$ npm install @melmacaluso/vue-modal --save

使用:

只需将其导入所需的vue组件中,如下所示:

import Modal from "@melmacaluso/vue-modal";

Props:

Props 类型 评论
btnText 模态按钮的文本标签
modalContent 将您的html传递给模态主模态
closeBtn 布尔型 有条件地添加关闭按钮
closeBtn-content 将此处的html传递给关闭按钮
multiple 布尔型 在模式中允许多个按钮/内容
modals 数组 在这里传递一个对象数组,它们在数组范围内保留相同的Prop,即。 <scope>.btnText
showNav 布尔型 有条件地显示每个模态的导航 btnText
showArrows 布尔型 有条件地显示基于箭头的导航
showArrowsCloseBtn 布尔型 有条件显示上一个/下一个箭头之间的关闭按钮,它继承 closeBtn-content
arrowNextContent 将您的html传递给下一个箭头
arrowPrevContent 将您的html传递给上一个箭头
@before-open 功能 在此处附加您的自定义函数,它将在模式打开之前被调用
@before-close 功能 在此处附加您的自定义函数,该函数会在模式关闭之前被调用

例子:

内联HTML:

<Modal
  btnText="Press me, senpai ?"
  modalContent="
        <div>
          <h2> 你好我是modal </h2>
          <p>我喜欢说: <b>显而易见的</b></p>
          <p>现在,试试这个把戏: <code>Ctrl + Shift + W </code> ?</p>
        </div>
        "
  :closeBtn="true"
  closeBtn-content="
        <span>X</span>
        "
/>

通过组件:

<Modal
  btnText="Press me, senpai ?"
  :closeBtn="true"
  closeBtnHTML="<span>X</span>"
>
  <ExampleComponent/>
</Modal>

多个按钮和模式内容+自定义功能:

<Modal
  :multiple="true"
  @before-open="yourOpenFn()"
  @before-close="yourCloseFn()"
  :modals="[
    {
      btnText: 'Press me 1',
      modalContent: 'This is <strong>the</strong> content 1'
    },
    {
      btnText: 'Press me 2',
      modalContent:
        '<img src=\'https://media.giphy.com/media/5exwXWg9u7yow/giphy.gif\'>'
    },
    {
      btnText: 'Press me 3',
      modalContent: 'This is the <h3>content 3</h3>'
    }
  ]"
  :showNav="true"
/>

通过Api / Json feed +上一个/下一个箭头:

<Modal
  :multiple="true"
  :modals="formattedUsers"
  :showArrows="true"
/>

export default {
  data: () => {
    return {
      users: []
    }
  },
  mounted(){
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(res => res.json())
      .then(res => this.users = res)
      .catch(err => console.log(err))
  },
  computed: {
    formattedUsers: function() {
      return this.users.map(user => {
        return {
          btnText: `${user.name}`,
          modalContent: `
            <h2>Email:${user.email}</h2>
            <h2>Phone:${user.phone}</h2>
          `
        };
      });
    }
  }
}