vue移动端项目vant组件库之button
vue移动端项目vant组件库之buttonvue移动端项目按需引入vant组件库vant组件库官网<template><div class="box"><!--button 注意要点type对应样式类名 如 .van-button--primarytype="primary"对应绿色type="info"对应蓝色其他type 和element-ui是一样的没
·
vue移动端项目vant组件库之button
<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>
效果图
更多推荐
已为社区贡献15条内容
所有评论(0)