@ophiuchus/bottom-action

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

Usage no npm install needed!

<script type="module">
  import ophiuchusBottomAction from 'https://cdn.skypack.dev/@ophiuchus/bottom-action';
</script>

README

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 -