vue modal 组件_适用于Vue应用程序的简单易用的Modal组件

vue modal 组件

虚拟可爱模态 (vue-cute-modal)

A simple and easy to use Modal component for Vue applications.

Vue应用程序的一个简单易用的Modal组件。

View demo 查看演示 Download Source 下载源

特征 (Features)

• Simple API

  简单的API

• Customizable modal classes

  可定制的模态类

• Customizable Vue transition name

  可自定义的Vue过渡名称

• Name component whatever you like!

  随便命名组件！

安装 (Install)

npm i vue-cute-modal

yarn add vue-cute-modal

For In-DOM templates include the JS CDN and optionally the CSS in your project:

对于In-DOM模板，在项目中包括JS CDN和CSS(可选)：

CDN:

CDN：

https://unpkg.com/[email protected]/dist/vue-cute-modal.min.js

https://unpkg.com/[email protected]/dist/vue-cute-modal.min.css

用法 (Usage)

建立 (Setup)

Include the plugin at the root of your application

在应用程序的根目录中包含插件

import CuteModal from 'vue-cute-modal'

Vue.use(CuteModal)

创建模态 (Creating a Modal)

Simply create your modal in your Vue app:

只需在Vue应用中创建模态：

<cute-modal name="example">
  Your modal content.
</cute-modal>

Then open/hide the modal within the app:

然后在应用程序中打开/隐藏模式：

// Opens the modal
this.$cuteModal.open('example')

// Hides the modal
this.$cuteModal.hide('example')

基本范例 (Basic Example)

<template>
  <div>
    <button @click="open">Open Modal</button>
    <cute-modal name="hello">
      Hello World!
    </cute-modal>
  </div>
</template>

<script>
export default {
  methods: {
    open () {
      this.$cuteModal.open('hello')
    }
  }
}
</script>

<!-- import CSS through SCSS or Link to compiled CSS whichever you prefer -->
<!-- or use your own custom styles! -->
<style>
/* ... */
</style>

自定义组件 (Customizing the Component)

The plugin comes with some base styles and classes. These may not fit your project and you may wish to override. We can do this via global settings or props.

该插件带有一些基本样式和类。 这些可能不适合您的项目，您可能希望覆盖。 我们可以通过全局设置或道具来做到这一点。

To override defaults globally pass in the configuration object when you register the component to Vue.use():

要全局覆盖默认值，请在将组件注册到Vue.use()时传入配置对象：

/** Default Settings */
const DEFAULT_OPTIONS = {
  body: 'cute-modal__body',
  container: 'cute-modal__container',
  footer: 'cute-modal__footer',
  header: 'cute-modal__header',
  height: 'auto',
  overlay: 'cute-modal__overlay',
  transition: 'modal',
  width: '600px',
  onOpen: null, // available in 1.1
  onClose: null // available in 1.1
}

Vue.use(CuteModal, {
  // Override the component's name to match your app's
  // Default 'cute-modal' = <cute-modal>
  component: '',

  // Override the component's base classes to match your app's
  body: '',
  container: '',
  footer: '',
  header: '',
  overlay: ''

  // Set default width and heights for all your modals
  height: '',
  width: '',

  // Set the transition name to use custom Vue transitions
  // This will be set as the transition's name <transition name="...">
  transition: '',

  // Setup callbacks to be executed globally when Modal is closed/opened.
  onClose: () => {
    // ...
  },
  onOpen: () => {
    // ...
  }
})

Alternatively, you could pass props separately to each component. Note that these will override the globally set options.

或者，您可以将道具分别传递给每个组件。 注意，这些将覆盖全局设置的选项 。

<cute-modal width="350px" headerClass="is-header">
  <!-- -->
</cute-modal>

API (API)

道具 (Props)

Full prop list

完整道具清单

Name	Required	Type	Description
name	true	String	Name of your modal
containerClass	false	String	Class name for container of modal
footerClass	false	String	Modal footer class name
headerClass	false	String	Modal header class name
height	false	String	Set the height of the modal
overlayClass	false	String	Overlay class name
transition	false	String	Name for Vue transition
wdith	false	String	Set the width of the modal

名称	需要	类型	描述
名称	真正	串	模态名称
containerClass	假	串	模态容器的类名
footerClass	假	串	模态页脚类名称
headerClass	假	串	模态标题类名称
高度	假	串	设置模态的高度
overlayClass	假	串	叠加类别名称
过渡	假	串	Vue过渡的名称
wdith	假	串	设置模态的宽度

方法 (Methods)

// Open a Modal
this.$cuteModal.open(/* modal name */)

// Close a Modal
this.$cuteModal.hide(/* modal name */)

1.1更新 (1.1 Updates)

In 1.1 a built in hide method is made available within the header and footer slots. It will be available on the slot-scope as a method named $hide. It takes no parameters.

在1.1中，内置的hide方法在页眉和页脚插槽中可用。 它可以在slot-scope作为名为$hide的方法使用。 它不带任何参数。

<cute-modal name="myModal">
  Some content

  <template slot="footer" slot-scope="{ $hide }">
    <button @click="$hide">Hide Me</button>
  </template>
</cute-modal>

Futhermore, in 1.1 you can globally set a callback function to be ran when a modal is opened or closed using the onOpen and onClose keys on your configuration object.

此外，在1.1中，可以使用配置对象上的onOpen和onClose键在打开或关闭模式时全局设置要运行的回调函数。

Vue.use({
  onClose: () => {
    document.body.style.overflow = 'auto'
  },
  onOpen: () => {
    document.body.style.overflow = 'hidden'
  }
})

开发设置 (Development Setup)

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# run unit tests
npm run unit

# run all tests
npm test

翻译自: https://vuejsexamples.com/a-simple-and-easy-to-use-modal-component-for-vue-applications/

vue modal 组件