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>

效果图

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/468922.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

SegFormer 项目排坑记录

SegFormer 项目排坑记录 任务记录创建conda环境 准备数据库和预训练参数程序配置修改测试可视化训练 任务 需要复现SegFormer分割项目&#xff0c;似乎还有点麻烦&#xff0c;参考这几个进行复现&#xff0c;记录下过程&#xff1a; SegFormer mmsegmentation CSDN博客 知乎博…

CentOS的安装

一、打开VMware的WorkStation的软件界面。点击创建新的虚拟机。 二、我们选择自定义&#xff0c;下一步。 三、这个界面不用动&#xff0c;直接进入下一步。 四、点击稍后安装操作系统&#xff0c;下一步。 五、选择Linux操作系统&#xff0c;版本为CentOS 7 64位。 六、虚拟机…

备战蓝桥杯Day31 - 真题-管道

题目描述 解题思路 这个问题可以视为一个水波在管道中传播的问题&#xff0c;其中水波以单位速度传播。阀门在 S 时刻打开&#xff0c;水流以单位速度流向管道的右侧&#xff0c;每个传感器位于每段管道的中心。对于位于 Li 的阀门&#xff0c;在 Ti 时刻打开时&#xff0c;水…

Docker Desktop 安装 ClickHouse 超级简单教程

Docker desktop 安装 clickhouse 超级简单 文章目录 Docker desktop 安装 clickhouse 超级简单 什么是 Docker &#xff1f;安装下准备安装Docker配置安装 ClickHouse配置数据库密码DBeaver 测试创建表总结 什么是 Docker &#xff1f; 下载 Docker desktop Docker Desktop …

网络编程:多点通信+域套接字

一、多点通信 1.网络属性 getsockopt和setsockopt int getsockopt(int sockfd, int level, int optname, void *optval, socklen_t *optlen); int setsockopt(int sockfd, int level, int optname, const void *optval, socklen_t optlen); 功能&#xff1a;获取或设置套接字…

【Pt】ID贴图的基本使用

目标 将小白人样本的脸部区域填充为红色&#xff0c;如下 步骤 1. 首先这里打开一个软件自带的样本 2. 添加一个填充图层 3. 设置Base Color为红色 4. 添加黑色遮罩 5. 鼠标右键点击遮罩&#xff0c;然后添加颜色选择 6. 点击选取颜色就可以看到不同的ID部分 此时鼠标会变为滴…

个人信息的动态表单

有一系列需要勾选的内容&#xff0c;勾选完内容后&#xff0c;会根据勾选内容自动生成一个对应的表单。 不同的勾选内容&#xff0c;生成的表单内容是不一样的。 checkbox勾选方法&#xff1a; private void checkBox1_CheckedChanged(object sender, EventArgs e){this.te…

深入理解nginx连接数限制模块[下]

目录 4 源码分析4.1 配置指令源码分析4.1.1 limit_conn_zone4.1.2 limit_conn4.1.3 limit_conn_log_level4.1.4 limit_conn_status4.1.5 limit_conn_dry_run 4.2 共享内存初始化4.3 模块初始化4.4 请求处理4.5 红黑树的查找4.6 请求关闭的析构函数 关注我的微信公众号: 上接 …

DBSCAN聚类原理及Python实现

文章目录 一、相关术语二、DBSCAN原理2.1 算法思想及步骤2.2 优缺点分析2.3 Python代码 三、运行效率加速 一、相关术语 密度&#xff1a;指定半径内点的个数&#xff1b;核心点&#xff1a;如果某个点的半径邻域epsilon内至少包含minPts个点数&#xff0c;它就是核心点&#…

Spring Security的开发

文章目录 1,介绍2, 核心流程3, 核心原理3.1 过滤器链机制3.2 主体3.3 认证3.4 授权3.5 流程图4, 核心对象4.1 UserDetailsService 接口4.2 PasswordEncoder 接口4.3 hasAuthority方法4.4 hasAnyAuthority方法4.5 hasRole方法4.5 hasAnyRole方法5, 核心注解5.1 @PreAuthorize5.1…

十四、ReadWriteLock

ReadWriteLock 读写锁 又叫排他锁 如果使用互斥锁&#xff0c;一个线程在读&#xff0c;其他线程也不能读也不能写 换成读写锁的时候&#xff0c;读线程是读锁&#xff0c;写线程是写锁&#xff0c;写锁是排他的 在多线程大大提高效率&#xff0c;当一个线程在读的时候&…

MybatisPlus逆向工程

目录 &#x1f9c2;1.前提说明 &#x1f37f;2.引入依赖 &#x1f32d;3.使用导入模板 1.前提说明 注意 适用版本&#xff1a;mybatis-plus-generator 3.5.1 以下版本&#xff0c;3.5.1 及以上的请参考 3.5.1以上参考官网&#xff1a;3.5.1以上逆向工程 2.引入依赖 …

用 二层口 实现三层口 IP 通信的一个实现方法

我们一般用 undo portswitch 来将二层口转为三层口&#xff0c;但如果设备不支持的话&#xff0c;那么。。。 一、拓朴图&#xff1a; 二、实现方法&#xff1a; 起一个 vlan x&#xff0c;配置 vlanif地址&#xff0c;然后二层口划分到 vlan x 下&#xff0c;对端做同样的配置…

C语言 实用调试技巧

我们的博客已经更新到了数据结构&#xff0c;但是当我在深耕数据结构时我发现我在C语言是遗漏了一个重要的东西&#xff0c;那就是C语言的使用调试技巧。这篇博客对数据结构非常重要&#xff0c;请大家耐心观看。 1. 什么是bug&#xff1f; 第一次被发现的导致计算机错误的飞蛾…

Centos虚拟机忘记密码;重置虚机密码

虚拟机是一个好用的工具&#xff0c;在本地搭建的虚拟机可以给我们提供测试&#xff0c;但时间长了也会忘记密码&#xff1b;因此这里以centos系统的虚机为例&#xff0c;提供一个重置虚机密码的方法 1.在开机页面按“E”进入编辑模式 进入后长这样&#xff1a; 2.找到ro cras…

Python面向对象——架构设计【2】

练习1&#xff1a;打电话 请使用面向对象思想描述下列情景: 小明使用手机打电话,还有可能使用座机.... class People:def __init__(self,name):self.name namedef call_up(self,tool):print(self.name,end"")tool.call()class Tools:def __init__(self,way):self.wa…

【第十三章】改进神经网络学习方式-其他正则化技术

L1正则化 除了L2正则化之外&#xff0c;还有许多正则化技术。事实上&#xff0c;已经开发出了如此多的技术&#xff0c;以至于我不可能总结它们。在本节中&#xff0c;我简要介绍了三种减少过拟合的其他方法&#xff1a;L1正则化、dropout和人为增加训练集大小。我们不会像之前…

四.流程控制(顺序,分支,循环,嵌套)

c刚刚转过来的记得写在public static void main&#xff08;String[] args&#xff09;的花括号里 一.顺序结构 二.分支结构 if &#xff0c;switch 1.if (条件判断&#xff09; 2.if else 3.if else if else if ... else(它是一个一个否定来一个个执行判断的 4.s…

Gitee 实战配置

一、Gitee 注册帐号 官网&#xff1a;https://gitee.com点击注册按钮。填写姓名。填写手机号。填写密码。点击立即注册按钮 二、安装GIT获取公钥 1.官网下载git下载地址&#xff1a;https://git-scm.com/download/win 2.安装git&#xff0c;双击运行程序&#xff0c;然后一直下…

Android下的匀速贝塞尔

画世界pro里的画笔功能很炫酷 其画笔配置可以调节流量&#xff0c;密度&#xff0c;色相&#xff0c;饱和度&#xff0c;亮度等。 他的大部分画笔应该是通过一个笔头图片在触摸轨迹上匀速绘制的原理。 这里提供一个匀速贝塞尔的kotlin实现&#xff1a; class EvenBezier {p…