＜view＞和＜text＞的用法

1.view有什么属性和用法

1.1 hover-class用法，hover-class是一个点击事件。

<template>
	<view class="box" hover-class="boxHover" >
		我是view标签
    </view>
</template>
<script>
	
</script>

<style lang="scss">
	.box{
		width: 200px;
		height: 200px;
		background: #ccc;
	}
	.boxHover{
		background: orange;
		width: 300px;
		
	}
</style>

点击前背景颜色是灰色的，点击后背景颜色变成橙色。

 

1.2 hover-stay-time用法，点击完保留时间以毫秒为单位，而hover-start-time点击完到指定时间出现。

<template>
	<view class="box" hover-class="boxHover" hover-stay-time="0" >
		我是view标签
	</view>	
</template>

1.3 hover-stop-propagation用法，如果我们view内部还有一个view标签。

<template>
	<view class="box" hover-class="boxHover" >
		<view class="inner" hover-class="innerHover" >内部元素</view>
	</view>	
</template>

<script>
	
</script>

<style lang="scss">
	.box{
		width: 200px;
		height: 200px;
		background: #ccc;
	}
	.boxHover{
		background: orange;
		width: 300px;
	}
	.inner{
		width: 100px;
		height: 100px;
		background: green;
	}
	.innerHover{
		background: greenyellow;
	}
</style>

当我点击内部盒子的时候，外部盒子也发生改变。

 

可以在内部元素加一个hover-stop-propagation。

<template>
	<view class="box" hover-class="boxHover" >
		<view class="inner" hover-class="innerHover" hover-stop-propagation>内部元素</view>
	</view>	
</template>

 2.text有什么属性和用法

 2.1 selectable用法，是否可以被选中，意思就是是否可以被复制。

<template>
	<view class="box" hover-class="boxHover" >
		<view class="inner" hover-class="innerHover" hover-stop-propagation>内部元素</view>
	</view>	
	<view>-----------</view>
	<text selectable>我是text文本标签</text>
</template>

<script>
	
</script>

<style lang="scss">
	
</style>

 2.2 space控制文本的空格

<template>
	<view class="box" hover-class="boxHover" >
		<view class="inner" hover-class="innerHover" hover-stop-propagation>内部元素</view>
	</view>	
	<view>-----------</view>
	<text selectable space="emsp">我是text 文本标签</text>
</template>

<script>
	
</script>

<style lang="scss">
	
</style>