vue dialog及detail封装

最新推荐文章于 2024-09-24 09:04:40 发布

小山羊~

最新推荐文章于 2024-09-24 09:04:40 发布

阅读量842

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/qq_21747731/article/details/118490483

版权

vue 专栏收录该内容

35 篇文章

订阅专栏

本文介绍了如何在Vue.js中封装对话框（Dialog）和详情（Detail）组件。首先，详细讲解了Dialog的封装过程，包括父组件的设置，view-module.js模块的实现，以及add-or-update.vue子组件的创建。接着，转向Detail封装，阐述了在父组件和子组件sub-detail中的具体实现步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、dialog封装

1.父组件

  <!-- 弹窗, 新增 / 修改 -->
  <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" 
       @refreshDataList="getDataList"></add-or-update>

 // 引入
 import mixinViewModule from '@/mixins/view-module'
 import AddOrUpdate from './add-or-update'

 components: {
    AddOrUpdate
  },

2.view-module.js

  // 新增 / 修改
    addOrUpdateHandle (id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.dataForm.id = id
        this.$refs.addOrUpdate.init()
      })
    },

3.add-or-update.vue

<el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()"
               label-width="100px">
          <el-form-item label="主题名称" prop="name">
              <el-input v-model="dataForm.name" placeholder="单行输入" maxlength="4" auto-complete="false" clearable v-bind:disabled="edit">
              </el-input>
          </el-form-item>
      </el-form>
    <template slot="footer">
      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
      <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
    </template>
  </el-dialog>

 data () {
    return {
      visible: false,
      dataForm: {
        id: '',
        name: ''
      }
    }

 computed: {
    edit () {
      if (this.dataForm.id) {
        return true
      }
      return false
    }
  },

  methods: {
    init () {
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        if (this.dataForm.id) {
          // this.getInfo()
        }
        // this.getCustomerInfo()
      })
    },
}

// 成功后  
this.$emit('refreshDataList')

二、detail封装

1.父组件中：

 <detail v-show="detailVisiable" ref="detail"></detail>

// 引入
import mixinViewModule from '@/mixins/view-module'

  components: {
    AddOrUpdate,
    Detail
  },

data() {
 detailVisiable: false
},

 showDetail(id, type) {
      // console.log('detail id: ' + id)
      this.detailVisiable = true
      this.$nextTick(() => {
        this.$refs.detail.id = id
        this.$refs.detail.prdType = type
        this.$refs.detail.init()
      })
    },

2.sub-detail组件中：

<template>
  <el-dialog
    :visible.sync="visible"
    title="子订单详情"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :append-to-body="true"
    class="allow-dialog"
  >
    <el-card shadow="never" class="box-card mb20">


 data() {
    return {
      visible: false,
      priceInfoArr: [],
      id: '',
      prdType: ''
    }
  },

 methods: {
    init() {
      console.log('detail init...')
      // console.log(this.id, 'this.id')
      // console.log(this.prdType, 'this.prdType-service')
      this.visible = true
      this.$nextTick(() => {
        if (this.id) {
          this.priceInfoArr = []
          this.getSubInfo(this.id, this.prdType)
        }
      })
    },