vue 模态框组件

唯雅语义模态 (vue-ya-semantic-modal)

Yet another semantic-ui modal component for Vue2 without Jquery but with pure Vue transition

Vue2的另一个语义UI模态组件，无需Jquery但具有纯Vue转换

This component only provide a frame and transitions for modal. Configurations of an inner modal is on your own, and it should be almost identical with usual way of semantic-ui.

该组件仅提供模态的框架和过渡。 内部模态的配置由您自己决定，它应该与语义UI的通常方式几乎相同。

建立 (Set Up)

• Global set up

  全球设立

import YaModal from 'vue-ya-semantic-modal'

Vue.use(YaModal)

• Local set up for each component

  每个组件的本地设置

import YaModal from `vue-ya-semantic-modal'

export default {
  name: 'MyComponent',
  props: ['myProp'],
  ...
  components: {
    YaModal: Yamodal() // It's important to use as function
  }

用法 (Usage)

• Basic usage

  基本用法

<button class="ui primary button" @click="activeModal=true">Show Modal</button>

<ya-modal verticla flip inverted v-model="activeModal">
  <div class="ui header">Title</div>
  <div class="content">
    <p>Any content for your modal</p>
  </div>
  <div class="actions">
    <div class="ui red basic cancel inverted button" @click="activeModal=false">
      <i class="remove icon> No
    </div>
    <div class="ui green ok inverted button @click="activeModal="false">
      <i class="checkmark icon></i> yes
    </div>
  </div>
</ya-modal>

• When you want modal without transition, use :transition="false"

  当您想要模态而不过渡时，请使用:transition="false"

• inverted attribute will be applied dimmer container

  inverted属性将应用于调光容器

• A transition of dimmer container is always fade

  调光器容器的过渡总是fade

• Possible class words for a inner modal are

  内部模态可能的类词是

bounce browser drop fade flash flip fly jiggle scale slide swing tada
vertical horizontal left right up down
basic mini tiny small medium big large

作者 (Author)

qgp9

翻译自: https://vuejsexamples.com/semantic-ui-modal-component-for-vue2-without-jquery/

vue 模态框组件