vue 封装 dialog通过js 调用

Vue封装Dialog是一种常见的前端开发技术，通过JavaScript调用它可以实现诸如弹出窗口、提示框等功能。

首先，在Vue中封装Dialog，我们可以创建一个组件来实现它。组件中包括一个模态框和相关的逻辑代码，用来显示内容、关闭窗口等。我们可以为组件定义一些属性，如标题、内容、按钮等，使得在调用时可以灵活地传入不同的值。

接下来，通过JavaScript调用Vue封装的Dialog，我们需要在所需的地方引入该组件。可以在主文件（如main.js）中引入组件，并注册它作为全局组件，这样可以在整个项目中都可以使用。

然后，在需要使用Dialog的地方，我们可以直接在JavaScript代码中调用该组件。通过创建一个Vue实例，并将Dialog组件作为其子组件，在需要的时候调用该子组件的方法来显示弹窗。方法可以是点击触发的事件，也可以是异步请求后的回调函数。

最后，在调用Dialog的时候，我们可以通过传入不同的参数来动态改变弹窗的内容，比如标题、文本、按钮文字等。这样就可以实现根据不同的需求来灵活地弹出不同的Dialog，并根据用户的交互进行相应的操作和处理。

总之，通过Vue封装Dialog，并通过JavaScript调用，可以实现弹窗等功能的灵活使用，方便开发人员根据需求来定制和使用不同的弹窗组件。

相关问题

vue admin 封装dialog

在 Vue Admin 中封装一个通用的 Dialog 组件可以提高代码的复用性，这里提供一个示例代码：

<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" :before-close="beforeClose">
    <el-form ref="form" :model="formData" :rules="rules" label-position="left" label-width="80px" style="padding: 20px;">
      <el-form-item v-for="item in formItems" :key="item.prop" :label="item.label" :prop="item.prop" :rules="item.rules">
        <el-input v-if="item.type === 'input'" v-model="formData[item.prop]" :placeholder="item.placeholder"></el-input>
        <el-select v-else-if="item.type === 'select'" v-model="formData[item.prop]" :placeholder="item.placeholder" :options="item.options"></el-select>
        <!-- 其他表单控件 -->
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="submit" :loading="submitting">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'CommonDialog',
  props: {
    title: {
      type: String,
      default: ''
    },
    formItems: {
      type: Array,
      default: () => []
    },
    formData: {
      type: Object,
      default: () => ({})
    },
    rules: {
      type: Object,
      default: () => ({})
    },
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      submitting: false
    }
  },
  methods: {
    // 取消保存
    cancel() {
      this.$emit('update:dialogVisible', false)
    },
    // 保存数据
    async submit() {
      const valid = await this.$refs.form.validate()
      if (!valid) {
        return
      }
      this.submitting = true
      try {
        await this.$emit('submit', this.formData)
        this.$emit('update:dialogVisible', false)
      } catch (e) {
        console.error(e)
        this.$message.error('保存失败')
      } finally {
        this.submitting = false
      }
    },
    // 关闭对话框前的操作
    beforeClose(done) {
      this.$confirm('确定要关闭吗？')
        .then(() => {
          done()
        })
        .catch(() => {})
    }
  }
}
</script>

<style>
.dialog-footer {
  text-align: right;
  padding-top: 10px;
}
</style>

该组件接收以下 props：

- `title`：对话框的标题。
- `formItems`：表单项数组，每个元素包含 `label`、`prop`、`type`、`placeholder` 和 `options` 等属性。
- `formData`：表单数据对象。
- `rules`：表单验证规则对象。
- `dialogVisible`：对话框的显示状态。

该组件发出以下事件：

- `update:dialogVisible`：更新对话框的显示状态。
- `submit`：保存数据事件，传递一个参数 `formData`。

在使用时，可以先定义一个表单项数组，然后在需要显示对话框的地方引入该组件并传递相应的 props 和事件，例如：

<template>
  <div>
    <el-button @click="showDialog">添加数据</el-button>
    <common-dialog
      :title="dialogTitle"
      :form-items="formItems"
      :form-data="formData"
      :rules="formRules"
      :dialog-visible.sync="dialogVisible"
      @submit="saveData"
    />
  </div>
</template>

<script>
import CommonDialog from '@/components/CommonDialog'

export default {
  components: {
    CommonDialog
  },
  data() {
    return {
      dialogTitle: '',
      dialogVisible: false,
      formItems: [
        { label: '名称', prop: 'name', type: 'input', placeholder: '请输入名称', rules: [{ required: true, message: '请输入名称' }] },
        { label: '数值', prop: 'value', type: 'input', placeholder: '请输入数值', rules: [{ required: true, message: '请输入数值' }] }
      ],
      formData: {},
      formRules: {}
    }
  },
  methods: {
    // 显示对话框
    showDialog() {
      this.dialogTitle = '添加数据'
      this.formData = {}
      this.dialogVisible = true
    },
    // 保存数据
    async saveData(data) {
      // 保存数据的逻辑
    }
  }
}
</script>

这样就可以在需要显示对话框的地方直接调用组件的 `showDialog` 方法，然后在 `saveData` 方法中处理保存数据的逻辑。

vue element 封装dialog 组件

以下是一个简单的 Vue Element 封装 dialog 组件的示例：

<template>
  <el-dialog :visible.sync="dialogVisible" :title="title" :width="width" :height="height" :before-close="beforeClose">
    <slot></slot>
    <div slot="footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="confirm">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'MyDialog',
  props: {
    title: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '50%'
    },
    height: {
      type: String,
      default: 'auto'
    }
  },
  data() {
    return {
      dialogVisible: false
    }
  },
  methods: {
    // 打开对话框
    open() {
      this.dialogVisible = true
    },
    // 关闭对话框
    close() {
      this.dialogVisible = false
    },
    // 确定操作
    confirm() {
      this.$emit('confirm')
      this.close()
    },
    // 取消操作
    cancel() {
      this.$emit('cancel')
      this.close()
    },
    // 关闭前的操作
    beforeClose(done) {
      this.$emit('beforeClose', done)
    }
  }
}
</script>

使用示例：

<template>
  <div>
    <el-button @click="openDialog">打开对话框</el-button>
    <my-dialog :title="dialogTitle" :width="dialogWidth" :height="dialogHeight" @confirm="handleConfirm" @cancel="handleCancel" @beforeClose="handleBeforeClose">
      <div>这是对话框内容</div>
      <div>可以放置任何内容</div>
    </my-dialog>
  </div>
</template>

<script>
import MyDialog from '@/components/MyDialog'

export default {
  name: 'MyPage',
  components: {
    MyDialog
  },
  data() {
    return {
      dialogTitle: '对话框标题',
      dialogWidth: '60%',
      dialogHeight: 'auto'
    }
  },
  methods: {
    openDialog() {
      this.$refs.dialog.open()
    },
    handleConfirm() {
      console.log('点击了确定')
    },
    handleCancel() {
      console.log('点击了取消')
    },
    handleBeforeClose(done) {
      console.log('关闭前的操作')
      done()
    }
  }
}
</script>

在该组件中，我们使用了 Vue Element 中的 dialog 组件，并在其基础上封装了一些常用的功能，例如：

- 可以通过 props 自定义对话框的标题、宽度和高度；
- 可以通过默认插槽放置任何内容；
- 可以通过事件监听点击确定和取消按钮的操作，并在关闭对话框前执行一些操作。

在使用时，只需要像使用 Vue Element 中的 dialog 组件一样，在需要使用对话框的地方加入 `MyDialog` 组件，并通过 props 自定义对话框的样式和标题，然后在需要打开对话框的地方调用 `open()` 方法即可。同时，我们也可以在父组件中监听对话框的确认、取消、关闭前等事件，并执行相应的操作。