使用说明
安装
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>
