【Uniapp-Vue3】常用的表单组件button和input

表单组件中最常用的就是button组件和input组件

一、button组件

常用属性：

<template>
	<button>普通按钮</button>
	<button size="mini">小按钮</button>
	<button type="primary">蓝色按钮</button>
	<button type="warn">红色按钮</button>
	<button plain>背景镂空按钮</button>
	<button disabled>禁用按钮</button>
	<button loading>加载按钮</button>
</template>

二、input组件

这个组件的属性非常多，一个属性中又会有很多的值，这里只挑一些常用的展示，想看全部可以跳转到官方文档：

input | uni-app官网https://uniapp.dcloud.net.cn/component/input.html

<template>
	普通输入框
	<input type="text">
	自动获取焦点的输入框
	<input type="text" focus>
	带初始内容的输入框
	<input type="text" value="123">
	密码输入框
	<input type="text" password value="123">
	为空时带占位符的输入框
	<input type="text" placeholder="请输入内容">
	给占位符来点样式
	<input type="text" placeholder="请输入内容" placeholder-style="color:lightblue" 
	placeholder-class="iptstyle">
	禁用的输入框
	<input type="text" disabled>
	限制输入长度的输入框
	<input type="text" maxlength="5">
	<!-- 以下属性在手机端显示 -->
	显示数字键盘的输入框
	<input type="number">
	身份证输入键盘
	<input type="idcard">
</template>

<style lang="scss">
	input {
		border: 1px solid black;
	}
	.iptstyle{
		font-size: 20px;
	}
</style>