DIY官网可视化工具打造UNIAPP-uviewUI可视化

DIY官网可视化工具打造UNIAPP-uviewUI可视化一键生成导出致力为UNIAPP-uviewUI开发者加速开发
快速生成基于Vue开发前端应用的框架，减少前端开发者80%工作量

UNIAPP-uviewUI可视化设计工具一键生成UNIAPP-uviewUI应用代码可视化组件打造你的UNIAPP-uviewUI，丰富的组件可视化拖拉生成UNIAPP-uviewUI，减少前端开发者80%工作量\

<template>
	<view class="container">
		<u-form :model="form" :rules="formRules" ref="formRef" class="flex diygw-form diygw-col-24">
			<u-form-item class="diygw-col-24" label="标题" prop="input">
				<u-input class="" placeholder="请输入提示信息" v-model="form.input" type="text"></u-input>
			</u-form-item>
			<u-form-item class="diygw-col-24" label="标题" prop="radio">
				<u-radio-group class="flex flex-wrap diygw-col-24 justify-between" activeColor="#39b54a" v-model="form.radio" @change="changeFormRadio">
					<u-radio shape="circle" v-for="(item, index) in formData.radioDatas" :key="index" :name="item.value">
						{{ item.label }}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item class="diygw-col-24" label="下拉" prop="sct">
				<u-input @click="formData.showSct = true" class="" placeholder="请选择" v-model="form.sctLabel" type="select"></u-input>
			</u-form-item>
			<u-select mode="single-column" :list="formData.sctDatas" v-model="formData.showSct" @confirm="changeFormSct"></u-select>
			<u-form-item class="diygw-col-24" label="时间" prop="udate">
				<u-input @click="formData.showUdate = true" class="" placeholder="请选择" v-model="form.udate" type="select"></u-input>
			</u-form-item>
			<u-picker v-model="formData.showUdate" mode="time" :params="formData.paramsUdate" @confirm="changeFormUdate"></u-picker>
			<u-form-item class="diygw-col-24" label="地区" prop="uregion">
				<u-input @click="formData.showUregion = true" class="" placeholder="请选择" v-model="form.uregionLabel" type="select"></u-input>
			</u-form-item>
			<u-picker v-model="formData.showUregion" mode="region" :params="form.paramsUregion" @confirm="changeFormUregion"></u-picker>
			<u-form-item label="复选" prop="checkbox">
				<u-checkbox-group class="flex flex-wrap diygw-col-24 justify-between" activeColor="#39b54a" v-model="form.checkbox" @change="changeFormCheckbox">
					<u-checkbox v-model="item.checked" v-for="(item, index) in formData.checkboxDatas" :key="index" :name="item.value">
						{{ item.label }}
					</u-checkbox>
				</u-checkbox-group>
			</u-form-item>
		</u-form>
		<view class="clearfix"></view>
	</view>
</template>

<script>
	//create by: 邓志锋 <280160522@qq.com> <https://www.diygw.com> DIYGW可视化设计一键生成源码
	export default {
		data() {
			return {
				//用户全局信息
				userInfo: {},
				globalData: {},
				test: {
					code: 200,
					msg: '获取数据成功',
					data: [
						{
							title: 'sdfasdf标题1111221111',
							id: 1,
							attr: {
								title: '标题11122211111'
							},
							img: 'https://lib.diygw.com/static/icon/icon1/icon1_zy.png'
						},
						{
							title: 'sdfasdf标题1111221112',
							id: 2,
							attr: {
								title: '标题11122211112'
							},
							img: 'https://lib.diygw.com/static/icon/icon1/icon1_zy.png'
						},
						{
							title: 'sdfasdf标题1111221113',
							id: 3,
							attr: {
								title: '标题11122211113'
							},
							img: 'https://lib.diygw.com/static/icon/icon1/icon1_zy.png'
						},
						{
							title: 'sdfasdf标题1111221114',
							id: 4,
							attr: {
								title: '标题11122211114'
							},
							img: 'https://lib.diygw.com/static/icon/icon1/icon1_zy.png'
						},
						{
							title: 'sdfasdf标题1111221115',
							id: 5,
							attr: {
								title: '标题11122211115'
							},
							img: 'https://lib.diygw.com/static/icon/icon1/icon1_zy.png'
						}
					]
				},
				formRules: {
					input: [
						{
							trigger: 'change',
							required: true,
							message: '不能为空哟'
						},
						{
							trigger: ['chanage', 'blur'],
							message: '请输入18位的有效身份证',
							pattern: /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/
						}
					]
				},
				form: {
					input: '',
					radio: '1',
					radioLabel: '选项一',
					sctIndex: 0,
					sct: '1',
					sctLabel: '选项一',
					udate: '',
					uregion: '',
					uregionLabel: '',
					checkbox: ['1', '2'],
					checkboxLabel: `选项一,选项二`
				},
				formData: {
					radioDatas: [
						{ value: '1', label: '选项一', checked: true },
						{ value: '2', label: '选项二', checked: false },
						{ value: '3', label: '选项三', checked: false }
					],
					showSct: false,
					sctDatas: [
						{ value: '1', label: '选项一' },
						{ value: '2', label: '选项二' },
						{ value: '3', label: '选项三' }
					],
					paramsUdate: {
						year: true,
						month: true,
						day: true,
						hour: false,
						minute: false,
						second: false
					},
					showUdate: false,
					paramsUregion: {
						province: true,
						city: true,
						area: true
					},
					showUregion: false,
					checkboxDatas: [
						{ value: '1', label: '选项一', checked: true },
						{ value: '2', label: '选项二', checked: true },
						{ value: '3', label: '选项三', checked: 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() {},
			// 新增接口 API请求方法
			async testApi(param) {
				param = param || {};
				let test = await this.$http.post('https://php.diygw.com/article.php', {}, {}, 'json');

				this.test = test;
			},
			async submitForm(e) {
				let valid = await this.$refs.formRef.validate();
				if (valid) {
					//保存数据
					let param = this.form;
					let url = '';
					if (!url) {
						this.showToast('请先配置表单提交地址', 'none');
						return false;
					}

					let res = await this.$http.post('', param, {}, 'json');

					if (res.code == 200) {
						this.showToast(res.msg, 'success');
					} else {
						this.showModal(res.msg);
					}
				} else {
					console.log('验证失败');
				}
			},
			changeFormRadio(evt) {
				let value = evt;
				let radioDatas = this.formData.radioDatas;

				let radioLabel = this.form.radioLabel;
				for (var i = 0, len = radioDatas.length; i < len; ++i) {
					radioDatas[i].checked = radioDatas[i].value == value;
					if (radioDatas[i].checked) {
						radioLabel = radioDatas[i].label;
					}
				}
				this.form.radioLabel = radioLabel;
				this.formData.radioDatas = radioDatas;
			},
			changeFormSct(e) {
				e.map((val, index) => {
					this.sctLabel = val.label;
					this.sct = val.value;
				});
			},
			changeFormUdate(e) {
				this.form.udate = e.year + '-' + e.month + '-' + e.day;
			},
			changeFormUregion(evt) {
				let value = [];
				let name = [];
				name.push(evt.province.name);
				name.push(evt.city.name);
				name.push(evt.area.name);

				value.push(evt.province.code);
				value.push(evt.city.code);
				value.push(evt.area.code);

				this.form.uregionLabel = name.join('-');
				this.form.uregion = value.join('-');
			},
			changeFormCheckbox(evt) {
				let values = evt;
				let checkboxDatas = this.formData.checkboxDatas;
				let checkboxLabels = [];
				let checkbox = [];
				for (var i = 0, len = checkboxDatas.length; i < len; ++i) {
					const item = checkboxDatas[i];

					if (values.includes(item.value)) {
						this.$set(item, 'checked', true);
					} else {
						this.$set(item, 'checked', false);
					}
					if (item['checked']) {
						checkboxLabels.push(item['label']);
						checkbox.push(item['value']);
					}
				}
				let checkboxLabel = checkboxLabels.join(',');
				this.form.checkboxLabel = checkboxLabel;
				this.form.checkbox = checkbox;
				this.formData.checkboxDatas = checkboxDatas;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		padding-left: 0px;
		padding-right: 0px;

		font-size: 12px;
	}
	.container {
	}
</style>

可视化生成UNIAPP-uviewUI框架源码,一个使用 Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台

多平台快速开发的UI框架
uView UI，是uni-app生态最优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水
四大利器，为您保驾护航

指南
涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川


组件
众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用


工具库
众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨


布局
收集众多的常用页面和布局，减少开发者的重复工作，让您专注逻辑，事半功倍

一次编写，多端发布

安卓
Android

Apple
IOS

微信小程序
Mini Program

H5
Mobile Web

QQ小程序
QQ Miniprogram

百度小程序
Smart Program

支付宝小程序
Alipay MiniProgram

头条小程序\

Toutiao MiniProgram