4.0.0 • Published 4 years ago
支付按钮
引入
import { TmBtnPay } from '@huteming/ui'
Vue.use(TmBtnPay)
// Vue.component(TmBtnPay.name, TmBtnPay)
例子
<tm-btn-pay
:title="79"
tip="原价：99元"
tipThrough
desc="VIP已减20元"
:desc-style="{ color: 'rgba(217, 166, 47, 1)' }"
:btn-style="{ background: 'linear-gradient(137deg,rgba(245,226,147,1) 0%,rgba(230,186,90,1) 100%)', color: 'rgba(128, 79, 36, 1)' }"
btn="支付学费" >
</tm-btn-pay>
API
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| title | 左侧显示文案。如果类型是数字，添加价格过滤器 | String, Number | | |
| titlePrefix | 前缀。如果title是数字，默认为 ￥ | String | | |
| titleStyle | title自定义样式 | Object | | |
| tip | 中间上方文案 | String | | |
| tipThrough | 中间上方文案添加删除线 | Boolean | | false |
| tipStyle | tip自定义样式 | Object | | |
| desc | 中间下方文案 | String | | |
| descThrough | 中间下方文案添加删除线 | Boolean | | false |
| descStyle | desc的自定义样式 | Object | | |
| btn | 按钮文案 | String | | |
| btnStyle | btn自定义样式 | Object | | |
| btnOnly | 只显示按钮,此时默认没有圆角 | Boolean | | false |
| disabled | 禁用状态 | Boolean | | false |
插槽
| name | 描述 |
|---|
| title | 自定义标题 |
| tip | |
| desc | |
| btn | 自定义按钮内容 |
Events