老衲as用飘柔 2022-09-12 10:00 采纳率: 100%
浏览 58
已结题

更改vant组件中的样式

img

img

HTML部分
    <van-goods-action>
      <van-goods-action-icon icon="star-o" color="#ff5000" />
      <van-goods-action-icon icon="shopping-cart-o"/>
      <van-goods-action-button color="#000" type="danger" text="立即购买" />
      <van-goods-action-button color="#b4282d" type="warning" text="加入购物车" />
    </van-goods-action>
css部分
  .van-goods-action{
    height: 50px;
    .van-goods-action-icon{
      border-right: 1px solid rgba(204, 204, 204, 0.228);
    }
    .van-goods-action-button{
      border-radius: 0;
      width: 60px;
}
  }

请问一下,从vant组件中引进来的组件,如何更改其按钮的颜色、按钮内部文字的颜色以及按钮的宽高?

  • 写回答

1条回答 默认 最新

  • LT_0_0_TL 2022-09-13 14:02
    关注

    去看看官网文档

    https://vant-contrib.gitee.io/vant/#/zh-CN/action-bar

    ActionBarButton Props
    参数 说明 类型 默认值
    text 按钮文字 string -
    type 按钮类型,可选值为 primary info warning danger string default
    color 按钮颜色,支持传入 linear-gradient 渐变色 string -
    icon 左侧图标名称或图片链接,等同于 Icon 组件的 name 属性 string -

    名称 默认值 描述
    --van-action-bar-background-color var(--van-background-color-light) -
    --van-action-bar-height 50px -
    --van-action-bar-icon-width 48px -
    --van-action-bar-icon-height 100% -
    --van-action-bar-icon-color var(--van-text-color) -
    --van-action-bar-icon-size 18px -
    --van-action-bar-icon-font-size var(--van-font-size-xs) -
    --van-action-bar-icon-active-color var(--van-active-color) -
    --van-action-bar-icon-text-color var(--van-gray-7)

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 9月22日
  • 已采纳回答 9月14日
  • 创建了问题 9月12日

悬赏问题

  • ¥15 我需要全国每个城市的最新小区名字等数据。
  • ¥15 开发一个小区生态的小程序
  • ¥15 MddBootstrapInitialize2失败
  • ¥15 LCD Flicker
  • ¥15 Spring MVC项目,访问不到相应的控制器方法
  • ¥15 esp32在micropython环境下使用ssl/tls连接mqtt服务器出现以下报错Connected on 192.168.154.223发生意外错误: 5无法连接到 MQTT 代理,如何解决?
  • ¥15 关于#genesiscsheel#的问题,如何解决?
  • ¥15 Android aidl for hal
  • ¥15 STM32CubeIDE下载程序报错
  • ¥15 微信好友如何转变为会员系统?(相关搜索:小程序)