8.发布页面

发布页面

官网
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>

效果图