支持動態滑出效果的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-…