支持动态滑出效果的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

示例

    <el-button @click="visible=true">点击显示弹出框</el-button>
    <elp-dialog :visible.sync="visible" title="标题" slideOutType="rightSide">弹出框内容</elp-dialog>
复制代码

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

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