VxCard 银行卡展示

展示银行卡的 logo、持有人名字、卡号、银行、卡类别等信息

引入

import VxCard from '@/components/vx-card';

// 页面内局部引入
export default {
  components: {
    [VxCard.name]: VxCard,
  },
};
// 全局引入
Vue.component(VxCard.name, VxCard);

使用指南

<vx-card 
  :bg-src="payerImg" 
  :account-name="payerName" 
  :account-no="payerNum" 
  :bank-name="payerBankName">
  <slot>我是卡片标题</slot>
</vx-card>
<!-- 这种用法有默认颜色，可通过bgCol改变背景颜色 -->
<vx-card 
  :account-name="payerName" 
  :account-no="payerNum"
  bg-col="black"
  bank-ac-type="信用卡">
</vx-card>

API

VxCard Props

属性	说明	类型	默认值	备注
`bgSrc`	logo 图片	`String`	-	@/assets/image/bank/文件下对应 png 图片
`bgCol`	卡片背景颜色	`String`	linear-gradient(180deg, #4072ee, #3457dd)	卡片的背景颜色设置，不可与bgSrc同时使用指南
`accountName`	持有人的名字	`String`	-	-
`accountNo`	银行卡号	`String`	-	-
`bankName`	银行名字	`String`	-	-
`bankAcType`	卡片类别	`String`	基本户	-

银行卡号过滤 formatAcNo，四位一空格
如果要给不同的银行卡 logo 设置不同的背景色，需要如下操作：

// （1）在 config\locale.js 文件内添加对应银行卡背景色，如下：
messages['bankCardBgcolor'] = {
  CMB: '#F98C8C', // 招商银行
  CMSB: '#3396FF', // 民生银行
};

// （2）在@/assets/image/bank/文件下，添加相对应的 png 图片

slot

default

默认插槽，顶部标题文字

Current Tags

0.0.4 ... latest (3 years ago)

1 Versions

0.0.4 ... 3 years ago