officialblock 1.0.8 → 1.0.9

package/src/components/TableTwo/index.vue

@@ -0,0 +1,232 @@
+<template>
+  <div
+    style="margin-top: 30px; margin-bottom: 30px"
+    class="table-two-container"
+    :style="{ backgroundColor: modelValue?.bgColor }"
+    @mouseenter="isHover = true"
+    @mouseleave="isHover = false"
+  >
+    <div class="count-down">
+      <div class="table-two">
+        <div class="table-two__wrapper container-content">
+          <table class="tableTwo">
+            <thead>
+              <tr
+                class="tableTwo__th"
+                v-if="
+                  modelValue && modelValue.headers && modelValue.headers.length
+                "
+              >
+                <th v-for="item in modelValue.headers">
+                  <p>{{ item.title }}</p>
+                </th>
+              </tr>
+            </thead>
+            <tbody
+              v-if="modelValue && modelValue.rows && modelValue.rows.length"
+            >
+              <tr class="tableTwo__row" v-for="itemRow in modelValue.rows">
+                <td>{{ itemRow.title }}</td>
+                <td>{{ itemRow.first }}</td>
+                <td>{{ itemRow.second }}</td>
+                <td>{{ itemRow.third }}</td>
+                <td>{{ itemRow.forth }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+    <Operate
+      v-if="!modelValue?.readOnly"
+      v-model:show="isHover"
+      @handle-edit="showSetting = true"
+      @handle-delete="handleDelete"
+      @handle-copy="handleCopy"
+    ></Operate>
+  </div>
+
+  <Setting v-model:show="showSetting" :data="modelValue"></Setting>
+</template>
+
+<script lang="ts" setup>
+import { computed, nextTick, ref } from "vue";
+import { randomString } from "@/utils/common";
+import Setting from "./setting.vue";
+import Operate from "@/components/Operate/index.vue";
+
+// 定义组件名称
+defineOptions({
+  name: "TableTwo",
+});
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    default: () => {},
+  },
+
+  // 是否预览
+  isPreview: {
+    type: Boolean,
+    default: false,
+  },
+});
+console.log("!!!!", props.modelValue);
+const emit = defineEmits(["update:modelValue", "handleDelete", "handleCopy"]);
+
+const isHover = ref<boolean>(false);
+const showSetting = ref<boolean>(false);
+
+const handleDelete = () => {
+  emit("handleDelete", props.modelValue.id);
+};
+
+const handleCopy = () => {
+  emit("handleCopy", props.modelValue);
+};
+
+const handleInit = () => {
+  if (props.modelValue && props.modelValue.data) return; // 有数据不用初始化
+  const data = {
+    id: props.modelValue?.id || randomString(),
+    type: "TableTwo",
+    readOnly: props.modelValue?.readOnly || false,
+    headers: [
+      { title: 1 },
+      { title: 2 },
+      { title: 3 },
+      { title: 4 },
+      { title: 5 },
+    ],
+
+    rows: [
+      {
+        title: "1",
+        first: "1",
+        second: "1",
+        third: "1",
+        forth: "1",
+      },
+      {
+        title: "2",
+        first: "2",
+        second: "2",
+        third: "2",
+        forth: "2",
+      },
+    ],
+  };
+  emit("update:modelValue", data);
+};
+
+handleInit();
+</script>
+
+<style lang="scss" scoped>
+.table-two-container {
+  position: relative;
+}
+.tableTwo__row td {
+  vertical-align: middle;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.25;
+}
+.tableTwo__row td:first-child {
+  background-color: #f2f8ff;
+  padding: 10px 16px;
+}
+.tableTwo {
+  width: 100%;
+}
+
+.tableTwo__th th p {
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 1.33;
+}
+
+@media (max-width: 1023.98px) {
+  .tableTwo__th th p {
+    font-size: 16px;
+    line-height: 1.25;
+    letter-spacing: 0.01em;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .tableTwo__th th p {
+    line-height: 1.5;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 1.25;
+    letter-spacing: 0.01em;
+  }
+}
+
+@media (max-width: 767.98px) and (max-width: 1023.98px) {
+  .tableTwo__th th p {
+    font-size: 14px;
+    line-height: 1.285;
+    letter-spacing: 0.01em;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .tableTwo__th th:first-child p {
+    display: none;
+  }
+}
+
+.tableTwo th {
+  background-color: #0032a0;
+  color: #fff;
+  padding: 8px 16px;
+  vertical-align: middle;
+}
+
+@media (max-width: 575.98px) {
+  .tableTwo th {
+    padding: 8px 10px 8px 12px;
+  }
+}
+
+.tableTwo tr {
+  background-color: #fff;
+}
+
+.tableTwo__row td {
+  vertical-align: middle;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.25;
+  letter-spacing: 0.01em;
+  padding: 10px 16px;
+}
+
+@media (max-width: 1023.98px) {
+  .tableTwo__row td {
+    font-size: 14px;
+    line-height: 1.285;
+    letter-spacing: 0.01em;
+  }
+}
+
+@media (max-width: 575.98px) {
+  .tableTwo__row td {
+    padding: 10px 10px 10px 12px;
+  }
+}
+
+.tableTwo__row td:first-child {
+  background-color: #f2f8ff;
+  padding: 10px 16px;
+}
+
+@media (max-width: 767.98px) {
+  .tableTwo__row td:first-child {
+    padding: 10px 6px 10px 8px;
+  }
+}
+</style>