@ophiuchus/bottom-action
v1.0.2
Published
### 引入
Downloads
1
Maintainers
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
| - |