feat: 箭头角标。嵌套表单验证

src/router/modules/demo.ts

@@ -17,6 +17,26 @@ const titleArr = [
         key: 'clickOutSide',
         title: '点击空白处关闭弹窗或者下拉菜单',
     },
+    {
+        key: 'nestedFormVaild',
+        title: '动态增减嵌套表单验证问题',
+    },
+    {
+        key: 'stepStyle',
+        title: '步骤条结构样式',
+    },
+    {
+        key: 'textAlign',
+        title: 'css文本两端对齐方式',
+    },
+    {
+        key: 'webWorker',
+        title: '创建webWorker时如何不指定特定的文件',
+    },
+    {
+        key: 'borderArrow',
+        title: 'div边框箭头和阴影问题',
+    },
 ];
 
 // @/views/demo/**/*.vue

src/views/demo/borderArrow.vue

@@ -0,0 +1,44 @@
+<template>
+    <el-card header="div边框箭头和阴影问题">
+        <div class="box">
+            <span>内容</span>
+            <div class="arrow-bottom"></div>
+            <div class="arrow-right"></div>
+        </div>
+    </el-card>
+</template>
+
+<style lang="scss" scoped>
+.box {
+    position: relative;
+    background: #ddd20b;
+    width: 300px;
+    height: 100px;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    filter: drop-shadow(0 5px 5px #999); // drop-shadow 阴影能让箭头一起包含阴影
+
+    .arrow-bottom {
+        position: absolute;
+        top: 100%;
+        left: calc(50% - 5px);
+        width: 0;
+        height: 0;
+        border-left: 10px solid transparent;
+        border-right: 10px solid transparent;
+        border-top: 10px solid #ddd20b;
+    }
+    .arrow-right {
+        position: absolute;
+        left: 100%;
+        top: calc(50% - 5px);
+        width: 0;
+        height: 0;
+        border-top: 10px solid transparent;
+        border-bottom: 10px solid transparent;
+        border-left: 10px solid #ddd20b;
+    }
+}
+</style>

src/views/demo/nestedFormVaild.vue

@@ -0,0 +1,194 @@
+<template>
+    <el-card header="动态增减嵌套表单验证问题">
+        <el-form
+            v-if="form && form.groups"
+            ref="formRef"
+            :model="form"
+            :label-width="150"
+        >
+            <template
+                v-for="(item, index) in form.groups"
+                :key="index"
+            >
+                <h3>分组：</h3>
+                <el-divider></el-divider>
+                <el-form-item
+                    label="分组名称"
+                    :prop="`groups[${index}].name`"
+                    :rules="[
+                        // 必填验证
+                        {
+                            required: true,
+                            message: '请输入分组名称',
+                            trigger: 'blur',
+                        },
+                        // 正则表达式验证
+                        {
+                            pattern: /^[\u4e00-\u9fa5a-zA-Z0-9_]+$/,
+                            message: '只能输入中文、字母、数字、下划线',
+                            trigger: 'blur',
+                        },
+                        // 函数验证，demo 验证分组名称是否唯一
+                        {
+                            validator: (rule, value, callback) => validName(index, value, callback),
+                            trigger: 'blur',
+                        },
+                    ]"
+                >
+                    <el-input
+                        v-model="item.name"
+                        placeholder="请输入分组名称"
+                    />
+                </el-form-item>
+                <template
+                    v-for="(cItem, cIndex) in item.rules"
+                    :key="cIndex"
+                >
+                    <el-divider></el-divider>
+                    <h4 class="pl-10 pb-5">规则：</h4>
+                    <el-form-item
+                        label="规则名称"
+                        :prop="`groups[${index}].rules[${cIndex}].alert`"
+                        :rules="[
+                            // 必填验证
+                            {
+                                required: true,
+                                message: '请输入规则名称',
+                                trigger: 'blur',
+                            },
+                            // 正则表达式验证
+                            {
+                                pattern: /^[\u4e00-\u9fa5a-zA-Z0-9_]+$/,
+                                message: '只能输入中文、字母、数字、下划线',
+                                trigger: 'blur',
+                            },
+                        ]"
+                    >
+                        <el-input
+                            v-model="cItem.alert"
+                            placeholder="请输入规则名称"
+                        />
+                    </el-form-item>
+                    <el-form-item
+                        label="规则表达式"
+                        :prop="`groups[${index}].rules[${cIndex}].expr`"
+                    >
+                        <el-input
+                            v-model="cItem.expr"
+                            placeholder="请输入规则表达式"
+                        />
+                    </el-form-item>
+                    <el-form-item
+                        label="待发时长"
+                        :prop="`groups[${index}].rules[${cIndex}].for`"
+                    >
+                        <el-input
+                            v-model="cItem.for"
+                            placeholder="请输入待发时长"
+                        />
+                    </el-form-item>
+                    <el-form-item
+                        label="告警标题"
+                        :prop="`groups[${index}].rules[${cIndex}].annotations.summary`"
+                    >
+                        <el-input
+                            v-model="cItem.annotations.summary"
+                            placeholder="请输入告警标题"
+                        />
+                    </el-form-item>
+                    <el-form-item
+                        label="告警详情"
+                        :prop="`groups[${index}].rules[${cIndex}].annotations.des`"
+                    >
+                        <el-input
+                            v-model="cItem.annotations.des"
+                            placeholder="请输入告警详情"
+                        />
+                    </el-form-item>
+                </template>
+            </template>
+        </el-form>
+    </el-card>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue';
+const formRef = ref(null);
+
+/**
+ * groups 可以有多个
+ * rules  可以有多个
+ * name 必填，名称唯一
+ */
+const form = ref({
+    groups: [
+        {
+            name: 'yaml规则1',
+            rules: [
+                {
+                    alert: '节点状态1',
+                    annotations: {
+                        des: '节点状态必须为正常',
+                        summary: 'IP xxxx 状态异常',
+                    },
+                    expr: 'up == 1',
+                    for: '0',
+                    labels: {
+                        severity: 'warning',
+                        status: 'firing',
+                    },
+                },
+            ],
+        },
+        {
+            name: 'yaml规则2',
+            rules: [
+                {
+                    alert: '节点状态1',
+                    annotations: {
+                        des: '节点状态必须为正常',
+                        summary: 'IP xxxx 状态异常',
+                    },
+                    expr: 'up == 1',
+                    for: '0',
+                    labels: {
+                        severity: 'warning',
+                        status: 'firing',
+                    },
+                },
+                {
+                    alert: '节点状态2',
+                    annotations: {
+                        des: '节点状态必须为正常',
+                        summary: 'IP xxxx 状态异常',
+                    },
+                    expr: 'up == 1',
+                    for: '0',
+                    labels: {
+                        severity: 'warning',
+                        status: 'firing',
+                    },
+                },
+            ],
+        },
+    ],
+});
+
+const validName = (index, value, callback) => {
+    const groups = form.value.groups;
+    if (groups.length <= 1) {
+        callback();
+    }
+    for (let i = 0; i < groups.length; i++) {
+        if (i === index) {
+            continue;
+        }
+        if (groups[i].name === value) {
+            callback(new Error('分组名称已存在'));
+            return;
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped></style>