vue.js 移动开发_Vue.js 2的简单高度可定制且移动友好的模式-CSDN博客

vue.js 移动开发

Vue.js模态 (Vue.js modal)

Simple to use, highly customizable, mobile friendly Vue.js 2.0+ modal with SSR support.

具有SSR支持的易于使用，高度可定制的，移动友好的Vue.js 2.0+模式。

安装 (Install)

npm install vue-js-modal --save

如何使用 (How to use)

Include plugin in your main.js file.

在main.js文件中包含插件。

import VModal from 'vue-js-modal'

Vue.use(VModal)

/*
By default plugin will use "modal" name for the component.
If you need to change it, you can do so by providing "componentName" param.

Example:

Vue.use(VModal, { componentName: "foo-modal" })
...
<foo-modal name="bar"></foo-modal>
*/

Create modal:

创建模式：

<modal name="hello-world">
  hello, world!
</modal>

Call it from anywhere in the app:

从应用程序中的任何位置调用它：

methods: {
  show () {
    this.$modal.show('hello-world');
  },
  hide () {
    this.$modal.hide('hello-world');
  }
}

You can easily send data into the modal:

您可以轻松地将数据发送到模式：

this.$modal.show('hello-world', { foo: 'bar' })

And receive it in beforeOpen event handler:

并在beforeOpen事件处理程序中接收它：

<modal name="hello-world" @before-open="beforeOpen"/>

methods: {
  beforeOpen (event) {
    console.log(event.params.foo);
  }
}

对话 (Dialog)

In version 1.2.8, the <v-dialog/> component was added.

在版本1.2.8 ，添加了<v-dialog/>组件。

It is a simplified version of the modal, which has most parameters set by default and is pretty useful for quick prototyping, showing alerts or creating mobile-like modals.

它是模式的简化版本，默认情况下设置了大多数参数，对于快速原型制作，显示警报或创建类似移动设备的模式非常有用。

To start using <v-dialog/> you must set dialog: true in plugin configuration:

要开始使用<v-dialog/> ，必须在插件配置中设置dialog: true ：

Vue.use(VModal, { dialog: true })

And include it in your project:

并将其包含在您的项目中：

<v-dialog/>

Call it (all params except of “text” are optional):

调用它(“文本”以外的所有参数都是可选的)：

this.$modal.show('dialog', {
  title: 'Alert!',
  text: 'You are too awesome',
  buttons: [
    { title: 'Deal with it', handler: () => { alert('Woot!') } },
    { title: 'Close' }
 ]
})