DIY可视化可视化表单可视化是一种高效、灵活、易用的表单设计工具。它通过拖拽式操作、属性配置、所见即所得等特性降低了表单设计的门槛，提高了开发效率和灵活性。
拖拽式操作
用户可以通过拖拽组件到设计区域，快速构建表单布局。这种操作方式简单直观，降低了表单设计的门槛。
属性配置
支持对表单组件进行属性配置，如字段名、数据类型、验证规则等。用户可以根据自己的需求，灵活设置表单组件的属性。
表单默认支持表单及JSON两种数据格式数据的提交，其中表单提交地址是必须的，它会当你发起表单提交数据时，请求此地址。
所见即所得
在设计过程中，用户可以直接看到表单的渲染效果，便于及时调整和优化。这种所见即所得的特性，提高了设计的准确性和效率。
表单提前后逻辑加工
在实际操作过程中，表单可能涉及到表单数据的二次加工，此时我们支持在提交前增加自己的逻辑代码，同样支持提交后逻辑处理。
表单提交前后处理举例
可以结合生成的表单代码进行增加自己的逻辑代码。以页面模板里，表单提交为例。
设置表单提交按钮
拖个按钮组件或者其他类型的组件，在组件上配置点击事件，选择表单提交事件。有个重点，必须是把此组件同样放在表单组件里。
表单外部配置点击提交事件
可以先拖个按钮组件进表单组件，配置上点击事件提交表单，点击查看源码。
表单验证
输入组件非空判断
我们找到验证规则里增加非空判断。
密码一致性判断
经常见到密码一致性判断，采用一致性判断，数值为字段标识路径
自定义验证
这里支持非空判断及自定义验证，支持提交API进行唯一性判断 。
自定义验证代码参考，大家根据自己的自定义验证规则来改变下面的代码即可。
validator: async (rule, val, callback) => {
if (!val) {
return Promise.reject("用户名不能为空");
}
let http_url = '验证地址';
let http_header = {};
let data = await this.$http.post(http_url, http_data, http_header, 'json');
//验证通过用Promise.resolve(),不通过用Promise.reject("用户名已存在")
if (data.code=200) {
return Promise.resolve();
}else {
return Promise.reject("用户名已存在");
}
}
至此，表单组件常规用法就到这里了，表单里输入组件更多的配置属性大家根据自己需求来设置。
DIY可视化表单优势
提高开发效率：通过拖拽、配置等操作，快速生成表单，减少开发时间。
降低开发成本：无需专业开发人员，降低人力成本。
灵活性强：支持自定义表单组件和属性，满足不同场景的需求。
易于维护：表单设计与代码分离，便于后续维护和升级。
组件丰富：提供了丰富表单组件库以满足多样化需求。
表单代码生成多样化
设计好的可以一键生成Vue代码、Uniapp、uView代码、微信小程序原生代码、支付宝小程序原生代码等。 其中生成的Uniapp源码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/FinClip）等多个平台
生成Uniapp uView代码
<template>
<view class="container container327193">
<view class="flex flex-wrap diygw-col-24 flex-direction-column items-center flex7-clz">
<!-- #ifdef MP-WEIXIN -->
<view class="flex flex-wrap diygw-col-24 flex-direction-column flex8-clz"> </view>
<!-- #endif -->
</view>
<u-form :model="form" :rules="formRules" :errorType="['message', 'toast']" ref="formRef" class="flex diygw-form diygw-col-24">
<view class="flex diygw-col-24">
<!-- #ifdef MP-WEIXIN -->
<button open-type="chooseAvatar" class="diygw-avatar diygw-avatar-button avatar-avatar radius" @chooseavatar="chooseFormAvatar">
<image mode="aspectFit" class="diygw-avatar-img radius" :src="form.avatar"></image>
</button>
<!-- #endif -->
<!-- #ifndef MP-WEIXIN -->
<view class="diygw-avatar diygw-avatar-button radius" @tap="uploadFormAvatar">
<image mode="aspectFit" class="diygw-avatar-img radius" :src="form.avatar"></image>
</view>
<!-- #endif -->
</view>
<text class="diygw-col-24 text-clz"> 点击上方图标设置头像 </text>
<u-form-item class="diygw-col-24 username-clz" labelPosition="top" prop="username">
<text class="diy-icon-people margin-right-xs" style="color: #676767; font-size: 32rpx"></text>
<u-input :focus="formData.usernameFocus" placeholder="请输入登录名" v-model="form.username"></u-input>
</u-form-item>
<u-form-item class="diygw-col-24 nickname-clz" labelPosition="top" prop="nickname">
<text class="diy-icon-people margin-right-xs" style="color: #636363; font-size: 32rpx"></text>
<u-input :focus="formData.nicknameFocus" placeholder="请输入显示名" v-model="form.nickname"></u-input>
</u-form-item>
<u-form-item class="diygw-col-24 password-clz" labelPosition="top" prop="password">
<text class="diy-icon-lock margin-right-xs" style="color: #636363; font-size: 32rpx"></text>
<u-input :focus="formData.passwordFocus" placeholder="请输入密码" v-model="form.password" type="password" :password-icon="true"></u-input>
</u-form-item>
<u-form-item class="diygw-col-24 confirmpassword-clz" labelPosition="top" prop="confirmpassword">
<text class="diy-icon-lock margin-right-xs" style="color: #636363; font-size: 32rpx"></text>
<u-input :focus="formData.confirmpasswordFocus" placeholder="请输入确认密码" v-model="form.confirmpassword" type="password" :password-icon="true"></u-input>
</u-form-item>
<view class="flex diygw-col-24 justify-between flex-nowrap flex1-clz">
<view class="flex flex-wrap diygw-col-0" @tap="navigateTo" data-type="page" data-url="/pages/null" data-redirect="1">
<text class="diygw-col-0"> 已有账号，立即登录。 </text>
<text @tap="navigateTo" data-type="page" data-url="/pages/login" class="diygw-col-0 text2-clz"> 登录 </text>
</view>
</view>
<text @click="submitForm" class="diygw-col-24 gradual-green text4-clz"> 注册 </text>
<view class="flex flex-wrap diygw-col-0 items-center flex3-clz">
<view class="flex flex-wrap diygw-col-0 items-center" @tap="navigateTo" data-type="agreeFunction">
<text v-if="globalData.agree == '1'" class="flex icon3 diygw-col-0 icon3-clz diy-icon-roundcheck"></text>
<text v-if="globalData.agree != '1'" class="flex icon2 diygw-col-0 icon2-clz diy-icon-round"></text>
<text class="diygw-col-0"> 注册即同意并接受 </text>
</view>
<text @tap="navigateTo" data-type="page" data-url="/pages/null" data-newstype="privacy" class="diygw-col-0 text11-clz"> 《隐私权政策》 </text>
<text class="diygw-col-0"> 和 </text>
<text @tap="navigateTo" data-type="page" data-url="/pages/null" data-newstype="user" class="diygw-col-0 text13-clz"> 《用户协议》 </text>
</view>
</u-form>
<view class="clearfix"></view>
</view>
</template>
<script>
export default {
data() {
return {
//用户全局信息
userInfo: {},
//页面传参
globalOption: {},
//自定义全局变量
globalData: { logintype: '0', agree: '0' },
form: {
avatar: '/static/avatar.png',
username: '',
nickname: '',
password: '',
confirmpassword: ''
},
formRules: {
username: [
{
trigger: ['change', 'blur'],
required: true,
validator: async (rule, val, callback) => {
if (!val) {
return Promise.reject('用户名不能为空');
}
let http_url = '验证地址';
let http_header = {};
let data = await this.$http.post(http_url, http_data, http_header, 'json');
//验证通过用Promise.resolve(),不通过用Promise.reject("用户名已存在")
if ((data.code = 200)) {
return Promise.resolve();
} else {
return Promise.reject('用户名已存在');
}
}
}
],
nickname: [
{
trigger: ['change', 'blur'],
required: true,
message: '显示名不能为空'
}
],
password: [
{
trigger: ['change', 'blur'],
required: true,
message: '密码不能为空'
}
],
confirmpassword: [
{
trigger: ['change', 'blur'],
required: true,
message: '确认密码不能为空'
},
{
trigger: ['change', 'blur'],
message: '请输入相同密码',
validator: (rule, val, callback) => {
return val == this.form.password;
}
}
]
},
formData: {
usernameFocus: false,
nicknameFocus: false,
passwordFocus: false,
confirmpasswordFocus: false
}
};
},
onShow() {
this.setCurrentPage(this);
},
onLoad(option) {
this.setCurrentPage(this);
if (option) {
this.setData({
globalOption: this.getOption(option)
});
}
this.init();
},
onReady() {
this.$refs.formRef?.setRules(this.formRules);
},
methods: {
async init() {
await this.initResetform();
},
// 同意或不同意 自定义方法
async agreeFunction(param) {
let thiz = this;
//如果不同意，改为同意
this.globalData.agree = this.globalData.agree == '1' ? '0' : '1';
},
// 验证码登录或密码登录 自定义方法
async codeFunction(param) {
let thiz = this;
//如果1表示验证码登录，0表进密码登录
this.globalData.logintype = this.globalData.logintype == '1' ? '0' : '1';
},
chooseFormAvatar(e) {
const { avatarUrl } = e.detail;
let baseavatarUrl = 'data:image/png;base64,' + wx.getFileSystemManager().readFileSync(avatarUrl, 'base64');
this.form.avatar = baseavatarUrl;
},
async uploadFormAvatar(e) {
await this.uploadImage(this, 'form.avatar', 'formData.avatarDatas', '/sys/storage/upload', 1, 'avatar');
},
initResetform() {
this.initform = JSON.stringify(this.form);
},
resetForm() {
this.form = JSON.parse(this.initform);
},
async submitForm(e) {
this.$refs.formRef?.setRules(this.formRules);
this.$nextTick(async () => {
let valid = await this.$refs.formRef.validate();
if (valid) {
//保存数据
let param = this.form;
let header = {};
let url = '/admin/login/register';
if (this.globalData.agree != '1') {
this.showToast('请点击同意授权协议');
return;
}
param.logintype = this.globalData.logintype;
let res = await this.$http.post(url, param, header, 'json');
if (res.code == 200) {
this.$session.setUser(res.data);
this.showToast(res.msg, 'success');
this.navigateTo({
type: 'page',
url: 'index'
});
} else {
this.showToast(res.msg, 'error');
}
if (res.code == 200) {
this.showToast(res.msg, 'success');
} else {
this.showModal(res.msg, '提示', false);
}
} else {
console.log('验证失败');
}
});
}
}
};
</script>
<style lang="scss" scoped>
.flex7-clz {
padding-top: 80rpx;
padding-left: 10rpx;
padding-bottom: 40rpx;
padding-right: 10rpx;
}
.flex8-clz {
height: 120rpx;
}
.text-clz {
color: #717070;
text-align: center;
}
.username-clz {
margin-left: 10rpx;
width: calc(100% - 10rpx - 10rpx) !important;
font-size: 28rpx !important;
margin-top: 10rpx;
margin-bottom: 10rpx;
margin-right: 10rpx;
}
.nickname-clz {
margin-left: 10rpx;
width: calc(100% - 10rpx - 10rpx) !important;
font-size: 28rpx !important;
margin-top: 10rpx;
margin-bottom: 10rpx;
margin-right: 10rpx;
}
.password-clz {
margin-left: 10rpx;
width: calc(100% - 10rpx - 10rpx) !important;
font-size: 28rpx !important;
margin-top: 10rpx;
margin-bottom: 10rpx;
margin-right: 10rpx;
}
.confirmpassword-clz {
margin-left: 10rpx;
width: calc(100% - 10rpx - 10rpx) !important;
font-size: 28rpx !important;
margin-top: 10rpx;
margin-bottom: 10rpx;
margin-right: 10rpx;
}
.flex1-clz {
padding-top: 16rpx;
padding-left: 30rpx;
padding-bottom: 16rpx;
padding-right: 30rpx;
}
.text2-clz {
color: #39b54a;
}
.text4-clz {
padding-top: 20rpx;
border-bottom-left-radius: 120rpx;
color: #ffffff;
font-weight: bold;
letter-spacing: 6rpx !important;
padding-left: 10rpx;
font-size: 32rpx !important;
padding-bottom: 20rpx;
border-top-right-radius: 120rpx;
margin-right: 30rpx;
margin-left: 30rpx;
box-shadow: 0rpx 6rpx 14rpx rgba(64, 195, 3, 0.35);
overflow: hidden;
width: calc(100% - 30rpx - 30rpx) !important;
border-top-left-radius: 120rpx;
margin-top: 10rpx;
border-bottom-right-radius: 120rpx;
margin-bottom: 10rpx;
text-align: center;
padding-right: 10rpx;
}
.flex3-clz {
padding-top: 16rpx;
padding-left: 30rpx;
padding-bottom: 16rpx;
padding-right: 30rpx;
}
.icon3-clz {
color: #39b54a;
}
.icon3 {
font-size: 40rpx;
}
.icon2-clz {
color: #39b54a;
}
.icon2 {
font-size: 40rpx;
}
.text11-clz {
color: #39b54a;
}
.text13-clz {
color: #39b54a;
}
.container327193 {
background-image: url(/static/mbz704.png);
background-position: top center;
background-size: contain;
background-repeat: no-repeat;
}
</style>
扫一扫
2258
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
