发布页面

官网
https://vkuviewdoc.fsq.pub/components/form.html

复制官网中的内容

代码

write.vue

<template><view class="u-wrap u-p-l-20 u-p-r-20"><u-form :model="addModel" ref="form1"><u-form-item label="类型:" prop="radio"><u-radio-group v-model="addModel.type"><u-radio activeColor="#74a9ff" v-for="(item, index) in list" :key="index" :name="item.name" :disabled="item.disabled">{{ item.name }}</u-radio></u-radio-group></u-form-item><u-form-item label="姓名:" prop="name"><u-input placeholder="请输入名称" v-model="addModel.title" /></u-form-item><u-form-item  label="简介:" prop="intro"><u-input placeholder="请输入简介" v-model="addModel.introduce" /></u-form-item><u-form-item label="价格:"><u-input placeholder="请输入价格" v-model="addModel.price" /></u-form-item><u-form-item label-width="auto" label="联系人:"><u-input placeholder="请输入联系人" v-model="addModel.userName" /></u-form-item><u-form-item label-width="auto" label="联系电话:"><u-input placeholder="请输入联系电话" v-model="addModel.phone" /></u-form-item><!-- 图片上传 --><u-form-item label="图片:"></u-form-item><u-upload :action="action" :file-list="fileList" ></u-upload></u-form><u-button :custom-style="customStyle">发布</u-button></view>
</template><script setup>import {reactive,ref} from 'vue';const addModel = reactive({type: '',title: '',introduce: '',price: '',userName: '',phone: '',image: ''})const list = [{name: '闲置',disabled: false}, {name: '求购',disabled: false}]const value = ref('')// 图片上传地址const action = ref('')const fileList = ref([])const customStyle = reactive({background: '#00449e',color: '#fff',marginTop: '80px',width:'130px'})
</script><style></style>

效果图

修改

<template><view class="u-wrap u-p-l-20 u-p-r-20 form-text"><!-- error-type="errorType"  --><u-form  label-position="left"  :model="addModel" ref="form1"><u-form-item  label-width="auto" label="类型:" prop="radio"><u-radio-group v-model="addModel.type"><u-radio activeColor="#74a9ff" v-for="(item, index) in list" :key="index" :name="item.name" :disabled="item.disabled">{{ item.name }}</u-radio></u-radio-group></u-form-item><u-form-item label-width="auto" label="标题:" prop="name"><u-input placeholder="请输入标题"  v-model="addModel.title" /></u-form-item><u-form-item label-width="auto" label="简介:" prop="intro"><u-input placeholder="请输入简介" v-model="addModel.introduce" /></u-form-item><u-form-item label-width="auto" label="价格:"><u-input placeholder="请输入价格" v-model="addModel.price" /></u-form-item><u-form-item label-width="auto" label="联系人:"><u-input placeholder="请输入联系人" v-model="addModel.userName" /></u-form-item><u-form-item label-width="auto" label="联系电话:"><u-input placeholder="请输入联系电话" v-model="addModel.phone" /></u-form-item><!-- 图片上传 --><!-- border-bottom	是否显示下边框，如不需要下边框，需同时将u-form的同名参数设置为false --><u-form-item label-width="auto" label="图片:" :border-bottom="false"></u-form-item><u-upload :action="action" :file-list="fileList" ></u-upload></u-form><u-button :custom-style="customStyle">发布</u-button></view>
</template><script setup>import {reactive,ref} from 'vue';const addModel = reactive({type: '',title: '',introduce: '',price: '',userName: '',phone: '',image: ''})const list = [{name: '闲置',disabled: false}, {name: '求购',disabled: false}]const value = ref('')// 图片上传地址const action = ref('')const fileList = ref([])const customStyle = reactive({background: '#00449e',color: '#fff',marginTop: '80px',width:'130px'})// const errorType= ref(['message'])
</script><style lang="scss"></style>

效果图