多模态语义红狗_基于语义UI设计的模态窗口组件

多模态语义红狗

伏达 (Vudal)

Modal window component based on Semantic UI design. (Does not require semantic ui, it is completely independent)

基于语义UI设计的模态窗口组件。 (不需要语义ui，它是完全独立的)

Install plugin

安装插件

import { VudalPlugin } from 'vudal';

Vue.use(VudalPlugin);

Possible options:

可能的选择：

• hideModalsOnDimmerClick (defaults to true) lets control whether clicking on dimmer will hide opened modals

  hideModalsOnDimmerClick (默认为true)可控制单击调光器是否隐藏打开的模态

Inside your component make preparations

在组件内部进行准备

import Vudal from 'vudal';

...
components: { Vudal }
...

Component usage example

组件用法示例

<vudal name="myModal">
  <div class="header">
    <i class="close icon"></i>
    Title
  </div>
  <div class="content">
    Content
  </div>
  <div class="actions">
    <div class="ui cancel button">Cancel</div>
    <div class="ui button">Ok</div>
  </div>
</vudal>

Params:

参数：

• name modal name

  名称模式名称

• parent parent modal name (if any)

  父代父模式名称(如果有)

Parent-child relationship is needed when second (child) modals is opened, but you close first modal (parent), child should also be closed. Also parent modal is blurred when child is opened.

打开第二个(子)模态时需要父子关系，但是关闭第一个(父)模态时，也应该关闭子代。 当打开子代时，父代模态也会模糊。

Events:

大事记：

• show fired when modal is starting to show

  当模态开始显示时触发

• hide fired when modal is starting to hide

  当模态开始隐藏时触发隐藏

• hidden fired when modal finished hiding animation

  隐藏发射时态成品隐藏动画

• visible fired when modal finished show animation

  模态完成的动画显示时触发可见

Methods:

方法：

• $toggle toggle visibility

  $ toggle切换可见性

• $show self explanatory

  $ show自我解释

• $hide self explanatory

  隐藏自我解释

• $isActive check whether modal is visible

  $ isActive检查模式是否可见

• $remove destroy modal

  $删除破坏模态

Selector '.actions .cancel' call method $hide on click.

单击时选择器'.actions .cancel'调用方法$ hide 。

Also global $modals object is available to control modals.

全局$modals对象也可用于控制模态。

You can access modals by name, for example this.$modals.myModal.

您可以按名称访问模态，例如this.$modals.myModal 。

Example: this.$modals.myModal.$show() to show modal.

示例： this.$modals.myModal.$show()显示模态。

Use this.$modals.hideAll() to hide all active modals.

使用this.$modals.hideAll()隐藏所有活动的模态。

自定义模态 (Custom modals)

If you need to create your own custom looking modal, you can use modalMixin that will drive your modal.

如果需要创建自己的自定义外观模态，则可以使用modalMixin来驱动模态。

It adds everything specified above, except .actions selector thing.

它添加了上面指定的所有内容， .actions选择器除外。

It also adds .vudal class to root element and .show, .hide and .mobile class for visible, hidden and opened on mobile device accordingly.

它也增加了.vudal类根元素和.show ， .hide和.mobile类可见，隐藏，并相应地在移动设备打开。

作者 (Author)

Egorvah

翻译自: https://vuejsexamples.com/modal-window-component-based-on-semantic-ui-design/

多模态语义红狗