携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第24天，点击查看活动详情

组件使用入门教程

Text组件

Text 是文本组件，用于包裹文本内容。相当于 html 中的 span 标签。

text组件官方文档

<view><text>宇宙山河烂漫，生活点滴温暖</text></view>
<view><text selectable="true">宇宙  山河烂漫，生活  点滴温暖</text></view>
<view><text space="ensp">宇宙  山河烂漫，生活  点滴温暖</text></view>
<view><text space="emsp">宇宙  山河烂漫，生活  点滴温暖</text></view>
<view><text space="nbsp" style="font-size: 30px;">宇宙  山河烂漫，生活  点滴温暖</text></view>

运行在 H5 的效果：

可以看到第二行是可以选中的

view组件

view组件官方文档

view 相当于 html 中的 div

<template>
	<view>
		<view class="box2" hover-class="box2-active">
			<view class="box" hover-class="box-active">这是一个盒子</view>
		</view>
	</view>
</template>

<script>
</script>

<style>
	.box {
		width: 100px;
		height: 100px;
		background: skyblue;
	}
	.box-active {
		background: royalblue;
	}
	.box2{
		width: 200px;
		height: 200px;
		background: pink;
	}
	.box2-active {
		background: hotpink;
	}
</style>

box-active指定按下去的样式类

hover-stop-propagation指定是否阻止本节点的祖先节点出现点击态，如图所示，我们点击小盒子 box1，外边的大盒子 box2 颜色也变了，如果想阻止这种冒泡，就可以增加这个属性

<view class="box" hover-class="box-active" hover-stop-propagation="true">这是一个盒子</view>

再看效果

hover-start-time按住后多久出现点击态，单位毫秒，类型是数字

hover-stay-time手指松开后点击态保留时间，单位毫秒，类型是数字 我们来看下这两个属性的效果，由于这两个属性类型是数字，所以我们需要在前边增加:

<view class="box" hover-class="box-active" hover-stop-propagation="true"
			:hover-start-time="2000" :hover-stay-time="3000">这是一个盒子</view>

可以看到我鼠标点了以后，并没有立刻改变颜色，而是2s后才触发改变颜色；鼠标离开后，颜色也没有立刻消失，而是3s后才消失

button组件

button组件官方文档

		<button>按钮</button>
		<button size="mini">按钮</button>
		<button type="primary">按钮</button>
		<button type="warn">按钮</button>
		<button plain="true">按钮</button>
		<button disabled="true">按钮</button>
		<button loading>按钮</button>

image组件

image组件官方文档

<view style="background: pink;"><image src="/static/wudi.png"></image></view>
		
<view style="background: hotpink;"><image src="/static/wudi.png" mode="aspectFit"></image></view>
		
<view style="background: deeppink;"><image src="/static/wudi.png" mode="aspectFill"></image></view>
	

给 image 外增加一个 view 并设置背景色，可以清楚的看到 mode 取值不同时，图片的展示情况：aspectFit保持纵横比缩放图片，使长边完全展示，aspectFill保持纵横比缩放图片，使短边完全展示