@ophiuchus/bottom-action

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

参数	说明	类型	默认值
safe-area-inset-bottom	是否开启底部安全区适配	boolean	true

BottomActionIcon Props

参数	说明	类型	默认值
text	按钮文字	string	-
icon	图标	string	-
color	图标颜色	string	#323233
icon-class	图标额外类名	any	-
dot	是否显示图标右上角小红点	boolean	false
badge	图标右上角徽标的内容	number | string	-
info	图标右上角徽标的内容（已废弃，请使用 badge 属性）	number | string	-
url	点击后跳转的链接地址	string	-
to	点击后跳转的目标路由对象，同 vue-router 的 to 属性	string | object	-
replace	是否在跳转时替换当前页面历史	boolean	false

BottomActionButton Props

参数	说明	类型	默认值
text	按钮文字	string	-
type	按钮类型，可选值为 primary info warning danger	string	default
color	按钮颜色，支持传入linear-gradient渐变色	string	-
icon	左侧图标名称或图片链接	string	-
disabled	是否禁用按钮	boolean	false
loading	是否显示为加载状态	boolean	false
url	点击后跳转的链接地址	string	-
to	点击后跳转的目标路由对象，同 vue-router 的 to 属性	string | object	-
replace	是否在跳转时替换当前页面历史	boolean	false

BottomActionIcon Slots

名称	说明
default	文本内容
icon	自定义图标

BottomActionButton Slots

名称	说明
default	按钮显示内容

样式变量

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

名称	默认值	描述
@bottom-action-background-color	@white	-
@bottom-action-height	50px	-
@bottom-action-icon-width	48px	-
@bottom-action-icon-height	100%	-
@bottom-action-icon-color	@text-color	-
@bottom-action-icon-size	18px	-
@bottom-action-icon-font-size	@font-size-xs	-
@bottom-action-icon-active-color	@active-color	-
@bottom-action-icon-text-color	@gray-7	-
@bottom-action-button-height	40px	-
@bottom-action-button-warning-color	@gradient-orange	-
@bottom-action-button-danger-color	@gradient-red	-