常用的表达组件button和input

Button

先添加一个按钮，看看效果，代码如下：

<template>
	<view>
		这是demo
	</view>
	<navigator open-type="navigateBack">
		<view>返回上一页面</view>
	</navigator>
	<button><view>按钮！</view></button>
</template>

<script setup>
	
</script>

<style>

</style>

看看效果：

Size、Type和Plain

默认是一个很大的白色按钮，用size属性可以让它变小点儿，配合Type属性，可以改变按钮的颜色。

增加size属性和type属性，代码如下：

<template>
	<view>
		这是demo
	</view>
	<navigator open-type="navigateBack">
		<view>返回上一页面</view>
	</navigator>
	<button size="mini" type="primary"><view>按钮！</view></button>
</template>

<script setup>
	
</script>

<style>

</style>

效果如下，得到了一个小的蓝色的按钮：

再加上Plain属性，可以镂空按钮，让背景色变透明，效果如下：

Disabled和Loading

Disabled属性即是否禁用。有时候网页有文本必须要输入，当用户未输入文本时，按钮就处于禁用状态。
Loading即等待状态显示。用户在网页提交信息，当信息正在提交时，可以呈现给用户这个状态。
先加入disabled属性，代码如下：

	<view>
		这是demo
	</view>
	<navigator open-type="navigateBack">
		<view>返回上一页面</view>
	</navigator>
	<button size="mini" type="primary" disabled><view>按钮！</view></button>
</template>

<script setup>
	
</script>

<style>

</style>

效果如下：

可以看到，按钮变灰了，变得无法点击了，然后，去掉disabled属性，加入loading属性，效果如下：

可以看到，按钮一直显示加载状态。

Input

Input是单行文本框，先设置个文本框看看效果，把文本框放在刚刚的蓝色按钮上方，代码如下：

<template>
	<view>
		这是demo
	</view>
	<navigator open-type="navigateBack">
		<view>返回上一页面</view>
	</navigator>
	<input type="text">
	<button size="mini" type="primary"><view>按钮！</view></button>
</template>

<script setup>
	
</script>

<style>

</style>

效果如下：

文本框默认是透明无框的，可以通过style给它设置样式。

Value

输入框的初始内容。代码如下：

<template>
	<view>
		这是demo
	</view>
	<navigator open-type="navigateBack">
		<view>返回上一页面</view>
	</navigator>
	<input type="text" value="文本框内有初始内容">
	<button size="mini" type="primary"><view>按钮！</view></button>
</template>

<script setup>
	
</script>

<style>

</style>

效果如下：

可以看到，若要输入新内容，得先删除初始内容。

Placeholder

输入框为空时占位符。可以理解为文本框输入的提示信息，与Value不同的时，它在文本框中默认是灰色的，当输入文字时，提示信息就自动消失了，添加Placeholder，代码如下：

<template>
	<view>
		这是demo
	</view>
	<navigator open-type="navigateBack">
		<view>返回上一页面</view>
	</navigator>
	<input type="text" placeholder="文本框内有初始内容">
	<button size="mini" type="primary"><view>按钮！</view></button>
</template>

<script setup>
	
</script>

<style>

</style>

效果如下：

Placeholder-style和Placeholder-class

Placeholder-style指定 placeholder 的样式，如设置颜色，代码如下：

<template>
	<view>
		这是demo
	</view>
	<navigator open-type="navigateBack">
		<view>返回上一页面</view>
	</navigator>
	<input type="text" placeholder="文本框内有初始内容" placeholder-style="color:pink"/>
	<button size="mini" type="primary"><view>按钮！</view></button>
</template>

<script setup>
	
</script>

<style>
.set{
	background: peru;
}
</style>

效果如下：

Placeholder-class同理，在此不做演示。

Type

Input中的Tpye属性有很多种类型，默认的是Text文本类型。

Number

试试number属性，也就是文本框仅能输入数字，如果是在手机上运行的话，就会自动跳出数字键盘，一会儿我们在手机上测试一下，代码如下：

<template>
	<view>
		这是demo
	</view>
	<navigator open-type="navigateBack">
		<view>返回上一页面</view>
	</navigator>
	<input type="number" placeholder="文本框内有初始内容" />
	<button size="mini" type="primary"><view>按钮！</view></button>
</template>

<script setup>
	
</script>

<style>

</style>

如何在手机上运行。首先要保证电脑和手机都连接在一个wifi下，然后去Uniapp日志里查看运行编译时的前几行代码，前者是本地调试码，后面的IP地址输入到手机上，就可以直接预览了。

效果如下：

可以看到，当我们点击文本框时，数字键盘会自动跳出来，且仅能输入数字。

Maxlength

最大输入长度，默认为140，设置为 -1 的时候不限制最大长度，添加Maxlength属性为9，代码如下：

<template>
	<view>
		这是demo
	</view>
	<navigator open-type="navigateBack">
		<view>返回上一页面</view>
	</navigator>
<input type="number" placeholder="文本框内有初始内容" maxlength="9" />
	<button size="mini" type="primary"><view>按钮！</view></button>
</template>

<script setup>
	
</script>

<style>

</style>

效果如下：

可以看到，输入到9时，就无法再输入了。

Confirm-Type

设置键盘右下角按钮的文字，仅在 type=“text” 时生效。

这里选择next来测试一下，代码如下：

<template>
	<view>
		这是demo
	</view>
	<navigator open-type="navigateBack">
		<view>返回上一页面</view>
	</navigator>
	<input type="text" placeholder="文本框内有初始内容" confirm-type="next"/>
	<button size="mini" type="primary"><view>按钮！</view></button>
</template>

<script setup>
	
</script>

<style>

</style>

效果如下：