button.md 3.0 KB
Newer Older
D
DCloud_LXH 已提交
1 2 3 4 5 6 7 8 9 10 11 12
## button

<!-- UTSCOMJSON.button.description -->

<!-- UTSCOMJSON.button.attrubute -->

<!-- UTSCOMJSON.button.event -->

<!-- UTSCOMJSON.button.example -->

<!-- UTSCOMJSON.button.compatibility -->

W
wanganxp 已提交
13
- 在web上,由于0.5px有兼容性问题,button的边框使用伪类实现。在App上,由于支持0.5px且不支持伪类,所以使用border实现。但由于伪类不占高度,border占高度,导致button的实际的渲染宽高在App上大于web端1px。
Y
yurj26 已提交
14
- button的默认边框宽度为0.5px,当type属性为plain时,边框宽度是1px,button的实际的渲染宽高会大于其他类型1px。
W
wanganxp 已提交
15 16 17 18
- button 的text区域文字,uvue下不支持 `\n` 方式换行,会直接显示 `\n` 字符。微信小程序下 `\n` 会变成一个空格。
- button按下后触发hover-class效果,在app平台,手指不松开、一直在屏幕上移动、离开button组件范围后,hover-class效果消失,同时也不会触发点击事件;在web和小程序平台,手指移动一点后,即便未离开button范围,hover-class效果也会消失,同时也不会触发点击事件。
- 无论在哪个平台,hover-class消失后松开手指,都不会触发点击事件。

D
DCloud_LXH 已提交
19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74
<!-- UTSCOMJSON.button.children -->

<!-- UTSCOMJSON.button.reference -->

## button样式修改@style

button在元素的text区域直接写文字,和text组件一样。可以这么理解,button是一个特殊的text组件,文字样式可以直接写在button组件的style或class上。

button组件属性中的size和type,属于预置样式,方便开发者使用。开发者也可以通过style和class来自定义样式。

button虽然可以内嵌text组件,但不建议通过text组件来修改button样式,因为会导致hove-class不生效。尤其是uvue中样式不继承。建议button组件text区域直接写文字,然后在button组件的style或class属性编写样式。

style和class的优先级,高于size和type属性。

```html
<template>
	<button size="default" type="default" 
	style="color:#ffffff;backgroundColor:#1AAD19;borderColor:#1AAD19" 
	hover-class="is-hover">按钮</button>
</template>
<style>
.is-hover {
	color: rgba(255, 255, 255, 0.6);
	background-color: #179b16;
	border-color: #179b16;
  }
</style>
```

## button点击

button 组件的点击遵循 vue 标准的 @click事件。

button 组件没有 url 属性,如果要跳转页面,可以在@click中编写,也可以在button组件外面套一层 navigator 组件。举例,如需跳转到about页面,可按如下几种代码写法执行:

```html
<template>
	<view>
		<navigator url="/pages/about/about"><button>通过navigator组件跳转到about页面</button></navigator>
		<button @click="goto('/pages/about/about')">通过方法跳转到about页面</button>
	</view>
</template>
<script>
	export default {
		methods: {
			goto(url:string) {
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>
```

## tips
Y
yurj26 已提交
75
- button 的默认文字大小为18px,文字行高为2.5。如果指定了按钮高度,要注意手动调整文字行高