本收集的主要是表单里常用组件，包括文本框、文本毓、富文本编辑器、颜色选择、下拉单选、下拉多选、开关、单选框、多选框、日期框、数字框、动态标签框、动态文本框。如下图效果：
<template>
<div style="padding: 10px;">
<n-form ref="formRef" :model="model" :rules="rules" label-placement="top">
<div class="sy-flex">
<div class="sy-flex-grow">
<n-grid :cols="24" :x-gap="20">
<n-form-item-gi :span="24" label="标题" path="title">
<n-input-group>
<n-input v-model:value="model.title" />
<n-popover trigger="hover">
<template #trigger>
<n-color-picker v-model:value="model.color" :modes="['hex']"
:actions="['confirm', 'clear']" :show-alpha="false" style="width: 105px;" />
</template>
<span>设置标题颜色</span>
</n-popover>
</n-input-group>
</n-form-item-gi>
<n-form-item-gi :span="24" label="副标题">
<n-input v-model:value="model.titleSub" />
</n-form-item-gi>
<n-form-item-gi :span="24">
<template #label>
缩略图<span class="sy-font-12 sy-font-gray">（限1张，支持格式 jpg,png）</span>
</template>
<sy-up-image :max="1" v-model:value="model.thumbnail" />
</n-form-item-gi>
<n-form-item-gi :span="24">
<template #label>
组图<span class="sy-font-12 sy-font-gray">（限9张，支持格式 jpg,png）</span>
</template>
<sy-up-image :max="9" :multiple="true" v-model:value="model.images" />
</n-form-item-gi>
<n-form-item-gi :span="24">
<template #label>
附件<span class="sy-font-12 sy-font-gray">（限10个，支持格式
jpg,png,txt,pdf,docx,xlsx,pptx,rar,zip,7z）</span>
</template>
<sy-up-files :max="10" v-model:value="model.files" />
</n-form-item-gi>
<n-form-item-gi label="日期" :span="8">
<n-date-picker v-model:formatted-value="model.date" value-format="yyyy-MM-dd" type="date"
class="sy-w-100" />
</n-form-item-gi>
<n-form-item-gi label="排序" :span="8">
<n-input-number v-model:value="model.paixu" class="sy-w-100" />
</n-form-item-gi>
<n-form-item-gi :span="8" label="状态">
<n-switch v-model:value="model.status" :rail-style="railStyle">
<template #checked>
正常
</template>
<template #unchecked>
禁止
</template>
</n-switch>
</n-form-item-gi>
<n-form-item-gi :span="12" label="性别">
<n-radio-group v-model:value="model.sex" name="radioSex">
<n-radio value="男">男</n-radio>
<n-radio value="女">女</n-radio>
</n-radio-group>
</n-form-item-gi>
<n-form-item-gi :span="12" label="爱好">
<n-checkbox-group v-model:value="model.hobby">
<n-space>
<n-checkbox value="篮球">篮球</n-checkbox>
<n-checkbox value="羽毛球">羽毛球</n-checkbox>
<n-checkbox value="兵乓球">兵乓球</n-checkbox>
</n-space>
</n-checkbox-group>
</n-form-item-gi>
</n-grid>
</div>
<div style="width: 900px; padding-left: 10px;">
<sy-editor v-model:value="model.content" />
<div style="padding-top: 20px;">
<n-grid :cols="24" :x-gap="20">
<n-form-item-gi :span="24" label="描述">
<n-input v-model:value="model.desc" type="textarea" />
</n-form-item-gi>
<n-form-item-gi :span="12" label="选择（单选）">
<n-select v-model:value="model.select" :options="generalOptions" placeholder="请选择" />
</n-form-item-gi>
<n-form-item-gi :span="12" label="选择（多选）">
<n-select v-model:value="model.multipleSelect" :options="generalOptions" multiple />
</n-form-item-gi>
<n-form-item-gi :span="24" label="标签">
<n-dynamic-tags v-model:value="model.tags" />
</n-form-item-gi>
<n-form-item-gi :span="24" label="动态添加字段">
<n-dynamic-input v-model:value="model.dynamicInputValue" item-style="margin-bottom: 0;"
:on-create="onCreate" #="{ index }">
<div style="display: flex">
<n-form-item ignore-path-change :show-label="false" style="width: 110px;">
<n-input v-model:value="model.dynamicInputValue[index].name"
placeholder="Name" @keydown.enter.prevent />
</n-form-item>
<div style="height: 34px; line-height: 34px; margin: 0 8px">
=
</div>
<n-form-item ignore-path-change :show-label="false" style="width: 450px;">
<n-input v-model:value="model.dynamicInputValue[index].value"
placeholder="Value" @keydown.enter.prevent />
</n-form-item>
</div>
</n-dynamic-input>
</n-form-item-gi>
</n-grid>
</div>
</div>
</div>
</n-form>
</div>
<div style="padding: 20px;">表单内容
<div>{{ model }}</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { sy } from "@/utils/shiyun";
let model = ref({ title: '', color: '', titleSub: '', thumbnail: '', images: '', files: '', date: sy.formatDate(new Date()), paixu: 0, desc: '', status: true, sex: '男', hobby: [], content: '', select: '苹果', multipleSelect: [], tags: ["教师", "程序员"], dynamicInputValue: [{ name: "", value: "" }] });
//下拉选择选项
const generalOptions = ["苹果", "西柚", "火龙果", "榴莲"].map(
(v) => {
return {
label: v,
value: v
};
}
);
//验证
const rules = {
title: {
required: true,
trigger: ["blur", "input"],
message: "请输入标题"
}, paixu: {
type: "number",
required: true,
trigger: ["blur", "input"],
message: "请输入排序，只能为整数"
}
};
//设置开关颜色
function railStyle({
focused,
checked
}) {
const style = {};
if (!checked) {
style.background = "#d03050";
if (focused) {
style.boxShadow = "0 0 0 2px #d0305040";
}
}
return style;
}
//动态添加字段
function onCreate() {
return {
name: "",
value: ""
};
}
</script>
