vue移动端项目vant组件库之button

vue移动端项目vant组件库之button

vue移动端项目按需引入vant组件库
vant组件库官网

<template>
  <div class="box">
    <!--
      button 注意要点
      type   对应样式类名 如 .van-button--primary
      type="primary"  对应绿色
      type="info"  对应蓝色
      其他type 和element-ui是一样的
      没有灰色按钮
     -->
    <van-button type="primary">成功</van-button>

    <!-- 修改按钮颜色 
      color 对应的是 style的background 的值
      所以color 的权重比type的要高
    -->

    <van-button color="red" type="primary">红色</van-button>
    <van-button color="#33b5e5">#33b5e5</van-button>

    <!-- 会添加一个样式名 .van-button--test-->
    <van-button type="test">自定义test</van-button>

    <!-- 朴素按钮 plain 
      会添加样式 .van-button--plain
      权重和 .van-button--primary 一样  但是.van-button--plain 后加载 将.van-button--primary 覆盖
    -->
    <van-button type="primary" plain>朴素按钮</van-button>

    <!-- 细边框 少用 -->
    <van-button plain hairline type="info">细边框按钮</van-button>

    <!-- 禁用 disabled  
      多数ui组件库的禁用都是用 disabled
    -->
    <van-button type="danger" disabled>禁用</van-button>
    <van-button type="danger" :disabled="isdisabled">禁用</van-button>

    <!-- 与图标搭配 
      需要注意的是这里的icon是不能搭配插槽使用的
      icon  vant 图标名称 或者 图标链接(本地加载不出来  只能丢文件服务器里) 或者类名
      图片链接找了一张百度的logo拿来测试  
      icon-prefix 图标样式类名 可以搭配font-awesome开源库使用 或者本地的图标
      但是要将图标弄成背景图
      注意不能直接写 icon-prefix 或者 class-prefix  icon="类名"
      这样就会默认加载一个 .van-icon-类名
      默认是没有高度的 
      我这里是这样
      .van-icon-iconbg{
        background-image: url('../assets/logo.png');
        height:20px;
        width:20px;
        background-size: 100% 100%;
      }
    -->
    <br>
    <br>
    <van-button plain icon="https://www.baidu.com/img/flexible/logo/pc/result.png">与图标搭配</van-button>
    <van-button plain icon="iconbg">与图标搭配</van-button>

    <!-- url 与 to -->
    <van-button plain url="https://www.baidu.com">跳转百度</van-button>
    <van-button plain to="/login">跳转路由  </van-button>

    <!-- size  large small mini  默认normal 
      mini min-width：50px
    -->
    <van-button plain size="mini">按钮大小</van-button>

    <!-- 
      块级 按钮
      父级宽度的100%
      可以配合div一起使用
     -->
     <div style="width:200px">
        <van-button type="danger" block>块级按钮</van-button>
     </div>

     <!-- 圆形按钮 round 多数ui组件库也是用的 round -->
      <van-button type="danger" round>块级按钮</van-button>
     <!-- 圆形按钮 square 
      border-radius：0
      -->
      <van-button type="danger" square>方形按钮</van-button>
  </div>
</template>
<script>
  import {Button} from 'vant'
  export default {
    components: {
      vanButton: Button
    },
    data() {
      return {
        isdisabled: true
      }
    }
  }
</script>
<style lang='scss' scoped>
.van-button--test{
  background: #333;
  border: none;
  color: #fff
}
.van-icon-iconbg{
  background-image: url('../assets/logo.png');
  height:20px;
  width:20px;
  background-size: 100% 100%;
}
</style>

效果图