uniapp input输入账号

最新推荐文章于 2024-09-26 19:58:29 发布

go-未来在招手

最新推荐文章于 2024-09-26 19:58:29 发布

阅读量371

点赞数 9

文章标签： uni-app

本文链接：https://blog.csdn.net/u011520533/article/details/136322854

版权

#居中# #子控件决定父控件# #居中显示#

</image>

</view>

样式：父布局决定子布局居中

.content {

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

}

.uni-input-wrapper {

width: 70%;

margin-top: 86rpx;

padding-left: 50rpx;

display: flex;

flex-direction: row;

justify-content: space-between;

align-items: center;

flex-wrap: nowrap;

/* align-self: center; */

/* background-color: #ffffff; */

background-color: #000;

border-style: solid;

box-sizing: 2rpx;

border-color: #fafafa;

border-radius: 50rpx;

}

.uni-input {

width: 70%;

height:90rpx;

font-size: 30rpx;

padding: 0px;

flex: 1;

background-color: red;

}

.uni-icon {

width: 24px;

height: 24px;

margin-right: 20rpx;

}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

go-未来在招手

关注关注

9
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

uniapp自定义input输入框提示内容，常用于记住账号密码

可可的博客

08-08

119

【代码】uniapp自定义input输入框提示内容，常用于记住账号密码。

解决uniapp textarea标签快速输入时光标抖动或闪现的问题

qq_46027468的博客

01-05

978

问题长这样问题代码长这样 <textarea placeholder="请输入组织介绍" class="info-cell-text" maxlength="600" v-model="form.orgIntroduce"></textarea> 解决代码长这样 <textarea placeholder="请输入组织介绍" class="info-c...

参与评论您还未登录，请先登录后发表或查看评论

uniapp中uview组件库的Input 输入框的使用方法

精通前端技术，了解后端接口

01-02

1万+

去除fixedautosize字段此组件为一个输入框，默认没有边框和样式，是专门为配合表单组件而设计的，利用它可以快速实现表单验证，输入内容，下拉选择等功能。应该在u-form中嵌套，再嵌套u-input去实现。注意：由于在nvue下，u-input名称被uni-app官方占用，在nvue页面中请使用u--input名称，在vue页面中使用u--input或者u-input均可。

UniApp 中的 u-input 属性讲解

zzx262625的博客

11-25

3513

在 UniApp 中，u-input 是一个常用的组件，用于接收用户的输入。它具有多种属性，用于控制输入框的样式和行为。下面我将为您讲解一些常用的 u-input 属性。

Vue修改子组件样式

洋洋洒洒做开发的专栏

03-12

802

Vue修改子组件样式原文链接：https://blog.learnzs.com/2020/03/11/196/ 在Vue组件中，当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。效果如下 <template> <input></input> </template> <style la...

input框中的value值到底是什么

weixin_33750452的博客

11-16

1639

value 属性为 input 元素设定值。对于不同的输入类型，value 属性的用法也不同： type="button", "reset", "submit" - 定义按钮上的显示的文本 type="text", "password", "hidden" - 定义输入字段的初始值 type="checkbox", "radio", "

uniapp中自定义带清除功能的input组件

qq_34553561的博客

05-31

5987

<template> <view class="flex-center-center input-wrap"> <view class="input-lable">{{lable}}</view> <input class="input-val" :type="type" :focus="focus" :value="value" :password="password" :disabled="disabled" :data-field.

uniapp input输入内容闪烁

qq_41821445的博客

12-07

1179

问题：input在输入或者删除过快时，内容会闪动、自动删除解决：这个是v-model双向绑定惹的祸，需要用@input把v-model替换掉就可以啦

记录uniapp开发时input框限制输入

qq_42441107的博客

11-09

5601

记录uniapp开发时input框限制输入 input框输入手机号的约束 <input @input="onlyNum" class="inp" v-model="phone" name="phone" type="number" maxlength="11" placeholder="请输入您的联系电话" placeholder-class="pl-style" @blur="replaceInput" /> onlyNum(){ if(!(event.keyCode==46)

uni-app 记住账号密码功能

xiaohong的博客

09-06

4549

效果代码 <template> <view class="content"> <view class="login-bg"> <view class="login-card"> <view class="login-head">瓦力教务登录</view> <view cla...

利用uni-app实现记住账号密码的功能

逍遥的博客

06-01

2104

<template> <view class="content"> <view class="login-image-content"> <image class="login-bg" src="../../static/login-bg.jpg"></image> <view class="login-container"> &l...

uniapp input 解决 placeholder 垂直不居中，偏上的问题

以后永远的博客

01-27

5796

uniapp input 解决 placeholder 垂直不居中，偏上的问题前言： uniapp ios 版本 ios 低版本中会出现 placeholder 不居中偏上问题的发生。解决： 1.假设 input 的高度为 70rpx； 2.设置 input line-height: 70rpx; .end-input { display: flex; justify-content: center; align-items: center; background: #F4F4F4

uniapp 输入框placeholder字体颜色和大小

最新发布

CZDBGSY的博客

09-26

239

uniapp 常用高度状态栏，导航栏，tab栏，底部安全高度。

uniapp APP自动更新组件

luck332的专栏

09-25

547

在uniapp中实现APP自动更新功能，主要涉及到客户端和服务器端的协同工作。

uniapp中h5环境添加console.log输出

u010865136的专栏

09-26

152

uniapp的小程序开启调试模式，会看到项目的console.log，但是h5的话手机访问报错时看不到console.log，使用上方代码h5也可以看到调试效果了。

uniapp map设置高度为100%后,会拉伸父容器的高度

GoppViper的博客

09-23

661

在 UniApp 中，当给 map 组件设置高度为 100% 时确实可能会拉伸父容器的高度，这通常是因为 100% 的高度是相对于父元素的高度计算的，而如果父元素没有明确的高度定义，就可能出现这种情况。

uniapp打字效果流式输出

呼叫6945的博客

09-23

552

这样就能实现一个简单的打字效果，文本会逐字流式输出。的时间来控制打字速度。

uniapp小程序登录，账号密码逻辑代码

05-31

以下是一个简单的uniapp小程序登录逻辑代码示例：前端页面代码： ``` <template> <div class="login-page"> <form class="login-form" @submit.prevent="login"> <input type="text" v-model="username" placeholder="请输入用户名"> <input type="password" v-model="password" placeholder="请输入密码"> <button type="submit">登录</button> </form> </div> </template> <script> export default { data() { return { username: '', password: '' } }, methods: { async login() { const res = await uni.request({ url: '/api/login', method: 'POST', data: { username: this.username, password: this.password } }) if (res.statusCode === 200 && res.data.code === 0) { uni.setStorageSync('token', res.data.token) uni.navigateTo({url: '/pages/home/home'}) } else { uni.showToast({title: '登录失败！', icon: 'none'}) } } } } </script> ``` 后端接口代码： ``` const express = require('express') const bodyParser = require('body-parser') const jwt = require('jsonwebtoken') const app = express() // 解析请求体 app.use(bodyParser.json()) // 模拟用户信息 const users = [ {username: 'admin', password: '123456'} ] // 登录接口 app.post('/api/login', (req, res) => { const {username, password} = req.body const user = users.find(u => u.username === username && u.password === password) if (user) { const token = jwt.sign({username}, 'secret', {expiresIn: '1h'}) res.json({ code: 0, msg: '登录成功', token }) } else { res.json({ code: -1, msg: '用户名或密码错误' }) } }) app.listen(3000, () => { console.log('Server is running at http://localhost:3000') }) ``` 上述代码中，前端页面代码中的login方法会将用户名和密码信息通过POST请求发送给后端的/api/login接口进行验证，如果验证通过，则后端会生成一个Token并返回给前端，前端保存Token到本地存储，并跳转到指定的页面。后续的请求会在请求头中携带Token进行验证。需要注意的是，Token的生成和验证需要借助第三方库，如jsonwebtoken。