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

可重用的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，即。 .btnText

showNav

布尔型

有条件地显示每个模态的导航 btnText

showArrows

布尔型

有条件地显示基于箭头的导航

showArrowsCloseBtn

布尔型

有条件显示上一个/下一个箭头之间的关闭按钮，它继承 closeBtn-content

arrowNextContent

串

将您的html传递给下一个箭头

arrowPrevContent

串

将您的html传递给上一个箭头

@before-open

功能

在此处附加您的自定义函数，它将在模式打开之前被调用

@before-close

功能

在此处附加您的自定义函数，该函数会在模式关闭之前被调用

例子：

内联HTML：

btnText="Press me, senpai ?"

modalContent="

你好我是modal

我喜欢说： 显而易见的

现在，试试这个把戏: Ctrl + Shift + W ?

"

:closeBtn="true"

closeBtn-content="

X

"

/>

通过组件：

btnText="Press me, senpai ?"

:closeBtn="true"

closeBtnHTML="X"

>

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

:multiple="true"

@before-open="yourOpenFn()"

@before-close="yourCloseFn()"

:modals="[

{

btnText: 'Press me 1',

modalContent: 'This is the content 1'

},

{

btnText: 'Press me 2',

modalContent:

''

},

{

btnText: 'Press me 3',

modalContent: 'This is the

content 3

'

}

]"

:showNav="true"

/>

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

: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: `

Email:${user.email}

Phone:${user.phone}

`

};

});

}

}

}