button按钮
按钮类型
按钮支持 default
、primary
、info
、warning
、danger
五种类型,默认为 default
。
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="default">默认按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>
不同类型的按钮,背景色不同
朴素按钮
通过 plain
属性将按钮设置为朴素按钮,朴素按钮的文字为按钮颜色,背景为白色。
<van-button plain type="primary">朴素按钮</van-button>
<van-button plain type="info">朴素按钮</van-button>
就是当你需要做这样的按钮时,他是圆角的,而且需要边框。字体颜色也要改变
<!--圆角 -->
round
<!--边框 -->
plain
<!--字体颜色需要用到深度选择器
检查元素找到要改变字体的类名或其他标识
然后在css中-->
div /deep/.btn-first span {
color: black;
}
<!--/deep/ 就是深度选择器了 用来改变引入组件的样式-->
点击表单中的普通按钮为什么会触发表单提交?
在表单中,除了提交按钮外,可能还有一些其他的功能性按钮,如发送验证码按钮。在使用这些按钮时,要注意将native-type
设置为button
,否则会触发表单提交。
<van-button native-type="button">
发送验证码
</van-button>
这个问题的原因是浏览器中 button 标签 type 属性的默认值为submit
,导致触发表单提交。我们会在下个大版本中将 type 的默认值调整为button
来避免这个问题。
输入框
可以通过 v-model
双向绑定输入框的值,通过 placeholder
设置占位提示文字。
<!-- Field 是基于 Cell 实现的,可以使用 CellGroup 作为容器来提供外边框。 -->
<van-cell-group>
<van-field v-model="value" label="文本" placeholder="请输入用户名" />
<van-cell-group>
export default {
data() {
return {
value: '',
};
},
};
在使用输入框的时候,配上
<van-cell-group><van-cell-group>
会有每个输入框下的那条线
输入框的不同类型
<!-- 输入任意文本 -->
<van-field v-model="text" label="文本" />
<!-- 输入手机号,调起手机号键盘 -->
<van-field v-model="tel" type="tel" label="手机号" />
<!-- 允许输入正整数,调起纯数字键盘 -->
<van-field v-model="digit" type="digit" label="整数" />
<!-- 允许输入数字,调起带符号的纯数字键盘 -->
<van-field v-model="number" type="number" label="数字" />
<!-- 输入密码 -->
<van-field v-model="password" type="password" label="密码" />