发布页面
官网
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>