[JavaScript知识库]uni-app带你看一个不一样的view之hover-class

最近在uni-app发现它的view组件太好玩了
用法很平常

<view>
	你好
</view>

但它的标签属性很有趣
首先是
hover-class
设置原生被点击时展现的class属性
例如 我们设置

<style>
	.bdo {
		background-color: #007AFF;
	}
	.bdo1 {
		background-color: #4CD964;
	}
</style>

<view class = "bdo" hover-class="bdo1">
	你好
</view>

这样你会发现，默认展示bdo的样式 当你点击时 会出现bdo1的样式 过会儿又变回bdo的样式
当你给父子级都设置了hover-class，你会发现 这鬼东西的触发既然还是冒泡的
那么阻止冒泡 我们就需要hover-stop-propagation属性

<view class = "bdo" hover-class="bdo1">
	<view hover-stop-propagation class = "bdo" hover-class="bdo1">
		你好
	</view>
</view>

这样点击子元素时 父元素的hover-class就不会触发了
我们还可以控制点击后多久触发 hover-start-time
hover-start-time要的是个纯数字 所以我们要在属性前加上 : 熟悉vue的朋友们一定知道是什么意思

<view :hover-start-time="2000" class = "bdo" hover-class="bdo1">
	你好
</view>

这样你就会发现 你点击后它不会立刻触发hover-class了 而是会等待hover-start-time 所设置的时间后再触发
如果你觉得没一会儿样式又变回去了 你可以用hover-stay-time
设置hover-class持续时间
要的还是一个纯数字

<view :hover-stay-time="3000" class = "bdo" hover-class="bdo1" :hover-start-time="2000">
	你好
</view>

这样你就会发现，触发的时间更长了