vant组件使用小总结

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="密码" />