表单组件使用示例
<!-- 文本输入框 -->
<div class="form-group">
<label class="form-label">姓名：</label>
<input type="text"
class="form-input"
data-field="userName"
value="{{userName}}"
placeholder="请输入姓名">
</div>
<!-- 数字输入框 -->
<div class="form-group">
<label class="form-label">年龄：</label>
<input type="number"
class="form-input"
data-field="userAge"
value="{{userAge}}"
placeholder="请输入年龄">
</div>
<!-- 邮箱输入框 -->
<div class="form-group">
<label class="form-label">邮箱：</label>
<input type="email"
class="form-input"
data-field="userEmail"
value="{{userEmail}}"
placeholder="请输入邮箱">
</div>
<!-- 多行文本域 -->
<div class="form-group">
<label class="form-label">备注：</label>
<textarea class="form-textarea"
data-field="userRemark"
placeholder="请输入备注">{{userRemark}}</textarea>
</div>
<!-- 下拉选择框 -->
<div class="form-group">
<label class="form-label">性别：</label>
<select class="form-select" data-field="userGender">
<option value="">请选择性别</option>
<option value="男" {{#if userGender == "男"}}selected{{/if}}>男</option>
<option value="女" {{#if userGender == "女"}}selected{{/if}}>女</option>
</select>
</div>
<!-- 复选框组 -->
<div class="form-group">
<label class="form-label">爱好：</label>
<div class="checkbox-group">
<div class="checkbox-item">
<input type="checkbox"
data-field="hobby_reading"
{{#if hobby_reading}}checked{{/if}}>
<span>阅读</span>
</div>
<div class="checkbox-item">
<input type="checkbox"
data-field="hobby_sports"
{{#if hobby_sports}}checked{{/if}}>
<span>运动</span>
</div>
<div class="checkbox-item">
<input type="checkbox"
data-field="hobby_music"
{{#if hobby_music}}checked{{/if}}>
<span>音乐</span>
</div>
</div>
</div>
<!-- 单选框组 -->
<div class="form-group">
<label class="form-label">学历：</label>
<div class="radio-group">
<div class="radio-item">
<input type="radio"
data-field="education"
value="高中"
name="education"
{{#if education == "高中"}}checked{{/if}}>
<span>高中</span>
</div>
<div class="radio-item">
<input type="radio"
data-field="education"
value="大专"
name="education"
{{#if education == "大专"}}checked{{/if}}>
<span>大专</span>
</div>
<div class="radio-item">
<input type="radio"
data-field="education"
value="本科"
name="education"
{{#if education == "本科"}}checked{{/if}}>
<span>本科</span>
</div>
</div>
</div>
表单组件CSS样式
/* 表单组样式 */
.form-group {
margin-bottom: 16px;
}
.form-label {
display: block;
font-size: 14px;
font-weight: 500;
color: #333;
margin-bottom: 6px;
}
/* 输入框样式 */
.form-input, .form-select, .form-textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 14px;
transition: border-color 0.3s, box-shadow 0.3s;
box-sizing: border-box;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
}
.form-textarea {
resize: vertical;
min-height: 80px;
}
/* 复选框和单选框组样式 */
.checkbox-group, .radio-group {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 6px;
}
.checkbox-item, .radio-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 14px;
color: #555;
}
.checkbox-item input[type="checkbox"],
.radio-item input[type="radio"] {
margin: 0;
width: 16px;
height: 16px;
}
/* 响应式设计 */
@media (max-width: 768px) {
.checkbox-group, .radio-group {
flex-direction: column;
gap: 8px;
}
.form-input, .form-select, .form-textarea {
padding: 8px 10px;
font-size: 16px; /* 移动端避免缩放 */
}
}
活字格命令中使用表单数据（包含事件冲突处理）
// 获取表单数据
const formData = Forguncy.Helper.SpecialName.getSpecialNameValue("formData");
const action = Forguncy.Helper.SpecialName.getSpecialNameValue("action");
const cardArray = Forguncy.Helper.SpecialName.getSpecialNameValue("cardArray");
const cardIndex = Forguncy.Helper.SpecialName.getSpecialNameValue("cardIndex");
// 事件冲突处理：通过action参数区分事件来源
if (action && action !== "") {
// 这是按钮操作事件
console.log("按钮操作事件:", action);
switch (action) {
case "save":
console.log("保存用户信息:", {
name: formData.userName,
age: formData.userAge,
email: formData.userEmail,
remark: formData.userRemark,
gender: formData.userGender,
hobbies: {
reading: formData.hobby_reading,
sports: formData.hobby_sports,
music: formData.hobby_music
},
education: formData.education
});
// 合并原始数据和用户输入数据
const mergedData = {
...cardArray,
...formData
};
console.log("完整数据:", mergedData);
// 执行保存逻辑...
break;
case "preview":
console.log("预览数据:", formData);
// 执行预览逻辑...
break;
case "cancel":
console.log("取消操作");
// 执行取消逻辑...
break;
default:
console.log("未知按钮操作:", action);
break;
}
} else {
// 这是卡片点击事件（action为空或undefined）
console.log("卡片点击事件");
console.log("当前表单数据:", formData);
console.log("卡片数据:", cardArray);
console.log("卡片索引:", cardIndex);
// 执行卡片点击逻辑...
// 例如：显示详情、编辑模式等
}