弹框组件

src/pages/main/performance/components/dialog.vue

@@ -0,0 +1,100 @@
+<template>
+  <div>
+    <el-dialog
+      :title="title"
+      :visible.sync="visible"
+      :key="reload"
+      :before-close="handleCancel"
+      width="700px"
+    >
+      <!-- 表格主体部分 -->
+      <div>
+        <el-row
+          v-for="({ label, props, type, options }, index) in content"
+          :key="index"
+          :gutter="24"
+          class="padding-bottom-20"
+          ><el-col :span="2" />
+          <el-col :span="6">
+            <!-- 标签 -->
+            {{ label }} + {{ props }}
+          </el-col>
+          <el-col :span="12">
+            <el-input v-if="type === 'input'" v-model="object[props]" />
+            <el-select
+              v-if="type === 'select'"
+              v-model="object[props]"
+              @change="changeSelect"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              ></el-option>
+            </el-select>
+          </el-col>
+        </el-row>
+      </div>
+      <!-- 表格底部 -->
+      <div slot="footer">
+        <el-button @click="handleCancel" size="small">取消</el-button>
+        <el-button @click="handleConfirm" type="primary" size="small"
+          >确定</el-button
+        >
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+    reload: {
+      type: Number,
+      default: 0,
+    },
+    reload: {
+      type: Number,
+      default: 0,
+    },
+    content: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data: () => ({
+    object: {},
+  }),
+  mounted() {
+    console.log("我被初始化了");
+  },
+  methods: {
+    //   change事件
+    changeSelect(props) {
+      console.log(props);
+    },
+    //   确定的回调
+    handleConfirm() {
+      this.object = {};
+      this.$emit("confirm", { params: this.object, visible: false });
+    },
+    //   取消的回调
+    handleCancel() {
+      this.object = {};
+      this.$emit("cancel", false);
+    },
+  },
+};
+</script>
+
+<style>
+</style>