@ophiuchus/bottom-action v1.0.2

BottomAction 底部操作按钮

引入

// 方式1（推荐）
import Vue from 'vue';
import BottomAction from '@ophiuchus/bottom-action';

Vue.use(BottomAction);

// 方式2
import Vue from 'vue';
import { BottomAction, BottomActionIcon, BottomActionButton } from '@ophiuchus/bottom-action';

Vue.component(BottomAction.name, BottomAction);
Vue.component(BottomActionIcon.name, BottomActionIcon);
Vue.component(BottomActionButton.name, BottomActionButton);

代码演示

基础用法

<sf-bottom-action>
  <sf-bottom-action-icon icon="good-job-o" text="点赞" @click="onClickIcon" />
  <sf-bottom-action-icon icon="star-o" text="收藏" @click="onClickIcon" />
  <sf-bottom-action-button type="warning" text="上一篇" @click="onClickButton" />
  <sf-bottom-action-button type="danger" text="下一篇" @click="onClickButton" />
  <sf-bottom-action-icon icon="ellipsis" text="更多" @click="onClickIcon" />
</sf-bottom-action>

import Toast from '@ophiuchus/toast';

export default {
  methods: {
    onClickIcon() {
      Toast('点击图标');
    },
    onClickButton() {
      Toast('点击按钮');
    },
  },
};

徽标提示

在 BottomActionIcon 组件上设置 dot 属性后，会在图标右上角展示一个小红点。设置 badge 属性后，会在图标右上角展示相应的徽标。

<sf-bottom-action>
  <sf-bottom-action-icon icon="good-job-o" dot text="点赞" />
  <sf-bottom-action-icon icon="star-o" badge="5" text="收藏" />
  <sf-bottom-action-icon icon="ellipsis" badge="12" text="更多" />
  <sf-bottom-action-button type="warning" text="上一篇" />
  <sf-bottom-action-button type="danger" text="下一篇" />
</sf-bottom-action>

自定义图标颜色

通过 BottomActionIcon 的 color 属性可以自定义图标的颜色。

<sf-bottom-action>
  <sf-bottom-action-icon icon="good-job" text="已赞" color="#ee0a24" />
  <sf-bottom-action-icon icon="star" text="已收藏" color="#ff5000" />
  <sf-bottom-action-icon icon="ellipsis" text="更多" />
  <sf-bottom-action-button type="warning" text="上一篇" />
  <sf-bottom-action-button type="danger" text="下一篇" />
</sf-bottom-action>

自定义按钮颜色

通过 BottomActionButton 的 color 属性可以自定义按钮的颜色，支持传入 linear-gradient 渐变色。

<sf-bottom-action>
  <sf-bottom-action-icon icon="good-job-o" text="点赞" />
  <sf-bottom-action-icon icon="star-o" text="收藏" />
  <sf-bottom-action-button color="#be99ff" type="warning" text="上一篇" />
  <sf-bottom-action-button color="#7232dd" type="danger" text="下一篇" />
</sf-bottom-action>

单个按钮

也支持底部只有单个按钮的情况。

<sf-bottom-action>
  <sf-bottom-action-button type="primary" text="提交" />
</sf-bottom-action>

API

BottomAction Props

BottomActionIcon Props

BottomActionButton Props

BottomActionIcon Slots

BottomActionButton Slots

样式变量

组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考主题定制。