uniapp-form表单

在这里插入图片描述

<template><view class="ptb-20 plr-30 bg min100"><view class="bg-white radius-20 pd-30"><view class="bold mt-30 mb-50 size-32">选择方式:</view><u--form labelPosition="left" :model="form" :rules="rules" ref="uForm"><u-form-item label="题量" prop="number" @click="showPop(1)"><u--input v-model="form.number" disabled disabledColor="#ffffff" placeholder="请选择做题数量"border="none"></u--input><u-icon slot="right" name="arrow-right"></u-icon></u-form-item><u-form-item label="模式" prop="mode" @click="showPop(2)"><u--input v-model="form.mode" disabled disabledColor="#ffffff" placeholder="请选择做题模式" border="none"></u--input><u-icon slot="right" name="arrow-right"></u-icon></u-form-item><u-form-item label="排序" prop="order"><u-radio-group v-model="form.order" placement="row"><u-radio class="mr-20" label="顺序" name='0'></u-radio><u-radio label="降序" name='1'></u-radio></u-radio-group></u-form-item></u--form><u-action-sheet :show="show" :actions="actions" title="请选择" @close="close" @select="confirmSelect"></u-action-sheet><view class="flex mt-120"><u-button @click="back" class="mr-120" text="返回主页"></u-button><u-button @click="toAnswer" type="primary" text="开始练习"></u-button></view></view></view>
</template><script>export default {data() {return {show: false,type: null, // 1数量 2模式form: {number: '',mode: '',order: '0'},actions: [],rules: {'number': {type: 'number',required: true,message: '请选择做题数量',trigger: ['blur', 'change']},'mode': {type: 'string',required: true,message: '请选择做题模式',trigger: ['blur', 'change']},},};},methods: {showPop(type) {this.type = typethis.show = trueif (type == 1) {this.actions = [{name: 5,},{name: 10,},{name: 15,}, {name: 20,},]} else {this.actions = [{name: '题目难度',},{name: '做错时间',},{name: '随机',},]}},close() {this.show = falsethis.type = null},confirmSelect(e) {this.form[this.type == 1 ? 'number' : 'mode'] = e.namethis.$refs.uForm.validateField(this.type == 1 ? 'number' : 'mode')},toAnswer() {this.$refs.uForm.validate().then(res => {uni.navigateTo({url: "/pages/subject/answerItem?type=3&query=" + encodeURIComponent(JSON.stringify(this.form))})}).catch(errors => {})},back() {uni.navigateBack()},},onReady() {//如果需要兼容微信小程序,并且校验规则中含有方法等,只能通过setRules方法设置规则。this.$refs.uForm.setRules(this.rules)},};
</script>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于PIC单片机篮球计分计时器

一、系统方案 本设计采用PIC单片机作为主控制器&#xff0c;矩阵键盘控制&#xff0c;比分&#xff0c;计时控制&#xff0c;24秒&#xff0c;液晶12864显示。 二、硬件设计 原理图如下&#xff1a; 三、单片机软件设计 1、首先是系统初始化 2、液晶显示程序 /*************…

系统架构合理性的思考 | 京东云技术团队

最近牵头在梳理部门的系统架构合理性&#xff0c;开始工作之前&#xff0c;我首先想到的是如何定义架构合理性&#xff1f; 从研发的角度来看如果系统上下文清晰、应用架构设计简单、应用拆分合理应该称之为架构合理。 基于以上的定义可以从以下三个方面来梳理评估&#xff1…

怎么检测UI卡顿?(线上及线下)

什么是UI卡顿&#xff1f; 在Android系统中&#xff0c;我们知道UI线程负责我们所有视图的布局&#xff0c;渲染工作&#xff0c;UI在更新期间&#xff0c;如果UI线程的执行时间超过16ms&#xff0c;则会产生丢帧的现象&#xff0c;而大量的丢帧就会造成卡顿&#xff0c;影响用…

Matlab彩色图像转索引图像

索引图像 索引图像是一种把像素值直接作为RGB调色板下标的图像。索引图像包括一个数据矩阵X&#xff0c;一个调色板矩阵map&#xff0c;也称为颜色映像矩阵。其中&#xff0c;数据矩阵X可以是8位无符号整型、16位无符号整型或双精度类型。调色板矩阵map是一个m3的数据阵列&…

亚马逊云科技CEO谈及企业领导力原则的核心:坚持顾客至上

亚马逊云科技首席执行官Adam Selipsky几乎从一开始就在那里&#xff1a;他于2005年加入&#xff0c;在效力亚马逊11年后于2016年离开&#xff0c;转而经营Tableau&#xff0c;并于2021年成为亚马逊云科技首席执行官。当时亚马逊云科技前首席执行官安迪贾西(Andy Jassy)接替杰夫…

大数据(一)定义、特性

大数据&#xff08;一&#xff09;定义、特性 本文目录&#xff1a; 一、写在前面的话 二、大数据定义 三、大数据特性 3.1、大数据的大量 (Volume) 特性 3.2、大数据的高速(Velocity)特性 3.3、大数据的多样化 (Variety) 特性 3.4、大数据的价值 (value) 特性 3.5、大…

废品回收抢单派单小程序开源版开发

废品回收抢单派单小程序开源版开发 用户注册和登录&#xff1a;用户可以通过手机号码注册和登录小程序&#xff0c;以便使用废品回收抢单派单功能。废品回收订单发布&#xff1a;用户可以发布废品回收订单&#xff0c;包括废品种类、数量、回收地点等信息。废品回收抢单&#…

React通过docx-preview预览Word文档

前言 在基于React的Web应用中&#xff0c;我们经常遇到需要预览和展示Word文档的需求。而docx-preview是一个优秀的React组件库&#xff0c;可以帮助我们实现在Web页面上预览Word文档的功能。本文将介绍如何使用docx-preview组件来实现Word文档的预览&#xff0c;并提供一个案例…

JavaScript箭头函数

Arrow Functions&#xff08;箭头函数&#xff09;是 ES6 中引入的一种新的函数表达式语法&#xff0c;它可以更简洁地定义函数&#xff0c;并且不需要像普通函数一样使用 function 关键字。 例如我们上节课的代码&#xff1a; const peopleAge function calcAge1(birthYear)…

vue3+ts+uniapp小程序端自定义日期选择器基于内置组件picker-view + 扩展组件 Popup 实现自定义日期选择及其他选择

vue3ts 基于内置组件picker-view 扩展组件 Popup 实现自定义日期选择及其他选择 vue3tsuniapp小程序端自定义日期选择器 1.先上效果图2.代码展示2.1 组件2.2 公共方法处理日期2.3 使用组件 3.注意事项3.1refSelectDialog3.1 backgroundColor"#fff" 自我记录 1.先上…

error: can‘t find Rust compiler

操作系统 win11 pip install -r requirements.txt 报错如下 Using cached https://pypi.tuna.tsinghua.edu.cn/packages/56/fc/a3c13ded7b3057680c8ae95a9b6cc83e63657c38e0005c400a5d018a33a7/pyreadline3-3.4.1-py3-none-any.whl (95 kB) Building wheels for collected p…

哲讯科技携手无锡华启动SCM定制化项目,共谋数字化转型之路

无锡华光座椅弹簧有限公司启动SCM定制化项目 近日&#xff0c;无锡华光座椅弹簧有限公司顺利举行了SCM定制化项目的启动会。本次启动会作为该项目实施的重要里程碑&#xff0c;吸引了双方项目组核心成员的共同参与&#xff0c;并见证了项目的正式启动。 无锡华光座椅弹簧有限公…

计算机网络面试题

文章目录 描述HTTP和HTTPS的区别Cookie和Session有什么区别BIO、NIO、AIOTCP三次握手和四次挥手跨域请求是什么&#xff1f;有什么问题&#xff1f;怎么解决&#xff1f;网页输入url&#xff0c;到渲染整个界面的整个过程&#xff0c;以及中间件用了什么协议Rest、RestfulTCP的…

【C语言】动态内存管理(malloc,free,calloc,realloc)-- 详解

一、动态内存分配 定义&#xff1a;动态内存分配 (Dynamic Memory Allocation) 就是指在程序执行的过程中&#xff0c;动态地分配或者回收存储空间的分配内存的方法。动态内存分配不像数组等静态内存分配方法那样&#xff0c;需要预先分配存储空间&#xff0c;而是由系统根据程…

0103水平分片-jdbc-shardingsphere-中间件

文章目录 1 准备服务器1.1 创建server-order0容器1.2 创建server-order1容器 2、基本水平分片2.1、基本配置2.2、数据源配置2.3、标椎分片表配置2.4、行表达式2.5、分片算法配置2.6、分布式序列算法 3、多表关联3.1、创建关联表3.2、创建实体类3.3、创建Mapper3.4、配置关联表3…

【C++设计模式】用动画片《少年骇客》(Ben10)来解释策略模式

2023年8月25日&#xff0c;周五上午 今天上午学习设计模式中的策略模式时&#xff0c;发现这个有点像很多卡通片里面的变身器... #include<iostream>//alien hero是外星英雄的意思 //在《少年骇客》中&#xff0c;主角可以通过变身器变成10种外星英雄 class AlienHero{ …

手机盖板IR油墨透光率检测仪T03

手机盖板作为手机最外层玻璃面板&#xff0c;其加工一般有落料、倒边、抛光、镀膜、丝印等多道加工工序组成&#xff0c;其中任何一个工序出现差错&#xff0c;都有可能导致手机盖板产生缺陷&#xff0c;例如漏油、透光、IR孔不良、视窗划伤、油墨区划伤、內污、边花等&#xf…

CSS中如何实现元素之间的间距(Margin)合并效果?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 外边距合并的示例&#xff1a;⭐ 如何控制外边距合并&#xff1a;⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅&#xff…

C语言实现状态机

关于状态机&#xff0c;基础的知识点可以自行理解&#xff0c;讲解的很多&#xff0c;这里主要是想写一个有限状态机FSM通用的写法&#xff0c;目的在于更好理解&#xff0c;移植&#xff0c;节省代码阅读与调试时间&#xff0c;体现出编程之美。 传统的实现方案 if...else : …

Nginx入门——Nginx的docker版本和windows版本安装和使用 代理的概念 负载分配策略

目录 引出nginx是啥正向代理和反向代理正向代理反向代理 nginx的安装使用Docker版本的nginx安装下载创建挂载文件获取配置文件创建docker容器拷贝容器中的配置文件删除容器 创建运行容器开放端口进行代理和测试 Windows版本的使用反向代理多个端口运行日志查看启动关闭重启 负载…