自定义优雅模态对话框组件– Eagle Modal

自定义优雅模态对话框组件– Eagle Modal
插件名称 Eagle Modal
发布时间 2020年4月15日
插件作者 danialdezfouli

Eagle Modal是Vue.js组件,用于在应用程序上创建可自定义的,动态的,灵活的,非常漂亮且干净的模态窗口和对话框。

特征

  • RTL支持
  • 简单轻巧(压缩后约20kB)
  • 连接到您的Api
  • 多个主题
  • 表单生成器
  • 您自己的自定义组件
  • 有用的插件API
  • ES6文件
  • 兼容IE10 +

安装和下载:

# NPM
$ npm install vue-eagle-modal --save

使用:

1.安装软件包并导入并注册Eagle Modal模块。

import {EagleModal} from 'vue-eagle-modal' 
Vue.use(EagleModal);

2.创建一个基本的模态窗口。

<template>
  <eModal v-model='modal' ref='modal'></eModal>
</template>
<script>
  export default {
    components: {eModal},
    data(){
      return {
        modal:{
          title: 'Modal Title',
          items: [
            {
              label: 'Test',
              type:'text',
              name: 'e1',
              value: 'test'
            }
          ],
        }
      }
    },
    mounted(){
      this.$refs.modal.open();
    },
  }
</script>

3.或创建一个警报对话框。

mounted(){
  this.$modals.alert({
    title: 'Custom Alert',
    text: "Alert Text",
  }).open();
}