vue-ya-semantic-modal-Vue2的另一个语义-ui模态组件,没有Jquery但有Vue转换-Vue.js开发

  • v4_487061
    了解作者
  • 88.9KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-06-14 05:30
    上传日期
vue-ya-semantic-modal Vue2的另一个语义UI模态组件,不带Jquery,但具有纯Vue转换该组件仅提供一个框架vue-ya-semantic-modal,另一个Vue-ya-semantic-modal组件,不带Jquery,但具有纯净的Vue Vue过渡该组件仅提供模态的框架和过渡。 内部模态的配置是您自己决定的,它应该与语义UI的通常方式几乎相同。 如果不确定如何配置,请按照官方示例演示源进行设置。全局设置从'vue-ya-semantic-modal'Vue.use(YaModal)本地为每个组件im设置import YaModal。
vue-ya-semantic-modal-master.zip
  • vue-ya-semantic-modal-master
  • .gitignore
    137B
  • .babelrc
    168B
  • .eslintrc
    209B
  • package.json
    2.5KB
  • src
  • YaModal.vue
    3.3KB
  • index.js
    292B
  • common
  • common.js
    263B
  • mixins.js
    1.9KB
  • utils.js
    426B
  • globalSingleKeyHandler.js
    1.4KB
  • dist
  • vue-ya-semantic-modal.js
    8.8KB
  • vue-ya-semantic-modal.common.js
    8.6KB
  • vue-ya-semantic-modal.esm.js
    8.5KB
  • README.md
    1.1KB
  • vue-ya-semantic-modal.min.js
    4.7KB
  • LICENSE
    1KB
  • CHANGELOG.md
    0B
  • .github
  • PULL_REQUEST_TEMPLATE.md
    0B
  • README.md
    2.6KB
  • circle.yml
    32B
  • config
  • .eslintrc
    149B
  • package.json
    65B
  • karma.sauce.conf.js
    2.1KB
  • karma.base.conf.js
    619B
  • build.js
    459B
  • karma.cover.conf.js
    417B
  • nightwatch.conf.js
    1.3KB
  • entry.js
    1.7KB
  • banner.js
    285B
  • webpack.dev.conf.js
    524B
  • karma.unit.conf.js
    211B
  • bundle.js
    1.9KB
  • release.sh
    453B
  • .eslintignore
    12B
  • .npmignore
    68B
  • test
  • .eslintrc
    182B
  • unit
  • index.js
    255B
  • index.html
    228B
  • add.test.js
    290B
  • helpers
  • wait-for-update.js
    2.4KB
  • entry.js
    174B
  • assert.js
    52B
  • .editorconfig
    147B
  • yarn.lock
    205.3KB
内容介绍
# vue-ya-semantic-modal [![npm](https://img.shields.io/npm/v/vue-ya-semantic-modal.svg)](https://www.npmjs.com/package/vue-ya-semantic-elements) [![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/) Yet another semantic-ui modal component for Vue2 without Jquery but with pure Vue transition 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. If your are not sure of how configure it, follow [official examples](https://semantic-ui.com/modules/modal.html#/examples) [demo](http://vue-ya-semantic.netlify.com/#/modal) [source](https://github.com/qgp9/vue-ya-semantic-demo/blob/master/src/components/Modal.vue) ## Set Up * Global set up ```js import YaModal from 'vue-ya-semantic-modal' Vue.use(YaModal) ``` * Local set up for each component ```js 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 ```html <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> ``` ![BOOYAH](http://i.imgur.com/JoeKDOC.png) * When you want modal without transition, use `:transition="false"` * `inverted` attribute will be applied dimmer container * A transition of dimmer container is always `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 ``` ## props * `clickAway` : When `true`, modal will be turned off with outer click. default is `true` * `escEscape` : When `true`, modal will be turned off with `esc` key down. default is `true` * `leaveDelay` : Dealy time of transition of dimmer class after transition of a modal start while leaving. default is 300ms * `modalClass` : Additional classes for an inner modal. Values should be an object like binded class * `transition`: Turn on and off transition effect. default is true` ## :scroll: Changelog ## Acknowledge ## :copyright: License [MIT](http://opensource.org/licenses/MIT)
评论
    相关推荐