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
样式变量
组件提供了下列 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 |
- |