可堆叠滚动对话框组件– v-easy-dialog

可堆叠滚动对话框组件– v-easy-dialog
插件名称 v-easy-dialog
发布时间 2020年11月27日
插件作者 WoodyDark

Vue.js的一个简单但可配置的对话框组件。

特征:

  • 可堆叠。
  • 可卷动
  • 全屏模式就像模式
  • 自动对焦陷阱
  • 平滑的打开/关闭过渡。

如何使用它:

1.导入并注册组件。

import VEasyDialog form 'v-easy-dialog'
export default {
    components: {
      VEasyDialog
    }
}

2.使用关闭按钮创建一个基本对话框。

<v-easy-dialog v-model="simpleDialog">
  Dialog Content Here
  <button @click="simpleDialog = false">Close</button>
</v-easy-dialog>

3.可能的组件道具来配置对话框。

value: { type: Boolean, default: false },
width: { type: String, default: '600px' },
growContent: { type: Boolean, default: true },
maxHeight: { type: String, default: '90%' },
fullscreen: { type: Boolean, default: false },
backgroundBtnTag: { type: String, default: 'button' },
persistent: { type: Boolean, default: false },
backdropClass: { type: undefined },
backdropStyle: { type: undefined },
focusOn: { type: String, default: undefined }

安装和下载:

# Yarn
$ yarn add v-easy-dialog

# NPM
$ npm i v-easy-dialog --save