支持动态滑出效果的vue-dynamic-dialog的使用说明

使用说明

安装

npm i vue-dynamic-dialog -D
复制代码

在 main.js 中写入以下内容:

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'
import VueDynamicDialog from 'vue-dynamic-dialog'
import 'vue-dynamic-dialog/lib/vue-dynamic-dialog.css'
Vue.use(VueDynamicDialog)
Vue.use(ElementUI)

new Vue({
  el: '#app',
  render: h => h(App)
})
复制代码

使用与el-dialog的使用方法一致,只是增加了滑出效果的属性slideOutType

  • 默认显示方式,居中显示:center
  • 从顶部滑出,居中显示:top
  • 从底部滑出,居中显示:bottom
  • 从右侧滑出,居中显示:right
  • 从左侧滑出,居中显示:left
  • 从右侧滑出,贴近边缘:rightSide
  • 从左侧滑出,贴近边缘:leftSide
  • 从顶部滑出,贴近边缘:topSide

示例

    点击显示弹出框
    弹出框内容
复制代码

源码:github.com/logmei/vue-…

转载于:https://juejin.im/post/5d52914e6fb9a06b1417d9f2

你可能感兴趣的:(支持动态滑出效果的vue-dynamic-dialog的使用说明)