%20(2).svg)
项目简介
vue-dialog-yy 是一个基于 Vue 框架开发的对话框组件库，为开发者提供丰富配置选项与钩子函数，能快速构建对话框界面，还支持自定义对话框样式与行为，极大提升开发效率与灵活性。
项目的主要特性和功能
- 丰富配置选项：涵盖标题、宽高、关闭按钮、自定义按钮等一系列选项，可按需定制对话框样式与行为。
- 多样钩子函数：提供打开、关闭、拖拽、改变尺寸等钩子，方便在对话框不同状态下执行自定义逻辑。
- 模板语法支持：支持使用插槽自定义对话框的标题、操作按钮、内容及底部内容。
- 组件化设计：可将对话框内容拆分为独立组件，通过引入方式展示，便于维护与复用。
安装使用步骤
安装
假设用户已经下载了本项目的源码文件，可通过 npm 安装 vue-dialog-yy 组件：
bash
npm i vue-dialog-yy
引入
在项目中引入 vue-dialog-yy 组件，确保传入 store 和 router，若需注册为组件可声明 registerComponent 并定义组件名：
```javascript
import Vue from 'vue'
import Dialog from 'vue-dialog-yy'
import { store, router } from './path/to/store-and-router'
Vue.use(Dialog, { store, router, registerComponent: 'CustomDialog' }) ```
使用
在需要使用对话框的地方调用 $dialog 方法，传入相应参数和配置：
javascript
this.$dialog(
'title',
import('components/dialog/testValidate'),
{
id: 'testValidate',
minimizable: true,
maximizable: true,
appendToBody: true,
inline: false,
showCancelButton: false,
cancelButtonText: '取消',
showConfirmButton: false,
confirmButtonText: '确认',
customClass: 'custom',
customButtons: [
{
text: '立即创建',
type: 'primary',
loading: false,
click: (child, done, button) => {
button.loading = true
child.resetForm()
button.loading = false
button.text = '完成'
}
},
{
text: '充值',
click: (child, done, button) => {
child.resetForm(this.data1)
}
}
],
onOpen: child => {
child.search()
},
onBeforeClose: (child, done, action) => {
console.log(action)
done()
}
},
{
type: 'edit',
onSearch: (data) => {
console.log(data)
}
}
).then(action => {
console.log(action)
})
自定义
根据需求自定义对话框样式和行为，可使用插槽和钩子函数实现。也可直接复制 /node_modules/vue-dialog-yy/src/Dialog.vue 作为组件使用。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】