minya
/
vue3-mgt-template
mirror of https://github.com/LCJ-MinYa/vue3-mgt-template.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
master
LCJ-MinYa 1 year ago
parent 767f8f9095
commit 18a3e21b95
3 changed files with 258 additions and 0 deletions
Show Stats Download Patch File Download Diff File

20
src/router/modules/demo.ts
Unescape Escape View File

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

44
src/views/demo/borderArrow.vue
Unescape Escape View File

@ -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>

194
src/views/demo/nestedFormVaild.vue
Unescape Escape View File

@ -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>
Write Preview
Loading…
Cancel
Save