GoodsAction

基础渲染

位置

收藏

客服

加入购物车

<template>
  <d-goods-action class="custom-fixed">
    <d-goods-action-icon icon="location" text="位置" @click="onClickIcon" />
    <d-goods-action-icon icon="star" text="收藏" @click="onClickIcon" />
    <d-goods-action-icon icon="user_circle" text="客服" @click="onClickIcon" />
    <d-goods-action-button
      text="加入购物车"
      @click="onClickButton"
      color="linear-gradient(90deg, #FF5F33 0%, #EF0D24 100%)"
    />
  </d-goods-action>
</template>

<script>
  import DGoodsActionButton from '@/components/goods_action_button/goods_action_button';
  import DGoodsActionIcon from '@/components/goods_action_icon/goods_action_icon';
  export default {
    name: 'GoodsAction',
    components: {
      DGoodsActionIcon,
      DGoodsActionButton,
    },
    methods: {
      onClickIcon() {
        alert('点击图标');
      },
      onClickButton() {
        alert('点击按钮');
      },
    },
  };
</script>

<style lang="scss">
  .custom-fixed {
    position: relative;
    padding-bottom: 0;
  }
</style>

徽标提示

位置

56

收藏

99+

客服

加入购物车

立即购买

<template>
  <d-goods-action class="custom-fixed">
    <d-goods-action-icon icon="location" text="位置" dot @click="onClickIcon" />
    <d-goods-action-icon
      badge="56"
      icon="star"
      text="收藏"
      @click="onClickIcon"
    />
    <d-goods-action-icon
      badge="1010"
      icon="user_circle"
      text="客服"
      @click="onClickIcon"
    />
    <d-goods-action-button
      text="加入购物车"
      color="linear-gradient(90deg, #FECE20 0%, #FF8A17 100%)"
      @click="onClickButton"
    />
    <d-goods-action-button
      text="立即购买"
      color="linear-gradient(90deg, #FF5F33 0%, #EF1325 100%)"
      @click="onClickButton"
    />
  </d-goods-action>
</template>

<script>
  import DGoodsActionButton from '@/components/goods_action_button/goods_action_button';
  import DGoodsActionIcon from '@/components/goods_action_icon/goods_action_icon';
  export default {
    name: 'GoodsAction',
    components: {
      DGoodsActionIcon,
      DGoodsActionButton,
    },
    methods: {
      onClickIcon() {
        alert('点击图标');
      },
      onClickButton() {
        alert('点击按钮');
      },
    },
  };
</script>

<style lang="scss">
  .custom-fixed {
    position: relative;
    padding-bottom: 0;
  }
</style>

自定义图标颜色

位置

收藏

客服

加入购物车

立即购买

<template>
  <d-goods-action class="custom-fixed">
    <d-goods-action-icon
      icon="location"
      color="#FF5F33"
      text="位置"
      @click="onClickIcon"
    />
    <d-goods-action-icon icon="star" text="收藏" @click="onClickIcon" />
    <d-goods-action-icon icon="user_circle" text="客服" @click="onClickIcon" />
    <d-goods-action-button text="加入购物车" @click="onClickButton" />
    <d-goods-action-button
      text="立即购买"
      color="linear-gradient(90deg, #FF5F33 0%, #EF1325 100%)"
      @click="onClickButton"
    />
  </d-goods-action>
</template>

<script>
  import DGoodsActionButton from '@/components/goods_action_button/goods_action_button';
  import DGoodsActionIcon from '@/components/goods_action_icon/goods_action_icon';
  export default {
    name: 'GoodsAction',
    components: {
      DGoodsActionIcon,
      DGoodsActionButton,
    },
    methods: {
      onClickIcon() {
        alert('点击图标');
      },
      onClickButton() {
        alert('点击按钮');
      },
    },
  };
</script>

<style lang="scss">
  .custom-fixed {
    position: relative;
    padding-bottom: 0;
  }
</style>

自定义按钮颜色

位置

收藏

客服

加入购物车

立即购买

<template>
  <d-goods-action class="custom-fixed">
    <d-goods-action-icon icon="location" text="位置" @click="onClickIcon" />
    <d-goods-action-icon icon="star" text="收藏" @click="onClickIcon" />
    <d-goods-action-icon icon="user_circle" text="客服" @click="onClickIcon" />
    <d-goods-action-button
      text="加入购物车"
      color="linear-gradient(90deg, #35D9DD 0%, #18B2B9 100%)"
      @click="onClickButton"
    />
    <d-goods-action-button
      text="立即购买"
      color="linear-gradient(90deg, #FFC718 0%, #FF960A 100%)"
      @click="onClickButton"
    />
  </d-goods-action>
</template>

<script>
  import DGoodsActionButton from '@/components/goods_action_button/goods_action_button';
  import DGoodsActionIcon from '@/components/goods_action_icon/goods_action_icon';
  export default {
    name: 'GoodsAction',
    components: {
      DGoodsActionIcon,
      DGoodsActionButton,
    },
    methods: {
      onClickIcon() {
        alert('点击图标');
      },
      onClickButton() {
        alert('点击按钮');
      },
    },
  };
</script>

<style lang="scss">
  .custom-fixed {
    position: relative;
    padding-bottom: 0;
  }
</style>

API

属性

名称	说明	类型	默认值
safeAreaInsetBottom	是否为 iPhoneX 留出底部安全距离	boolean	true

插槽

无

事件

无

贡献者

无