组件用.vue还是.js_用Vue.js制作的信用卡组件-CSDN博客

组件用.vue还是.js

Vue支付卡 (vue-paycard)

Credit card component made with Vue.js.

用Vue.js制作的信用卡组件。

This component is based on Vue Interactive Paycard. All the credits for the component (idea, design, images, core code) goes to it

该组件基于Vue Interactive Paycard。组件的所有功劳(思想，设计，图像，核心代码)都归功于它

This project only exports the Card component, you will need to create your own form.

该项目仅导出Card组件，您将需要创建自己的表单。

原因 (Reason)

There are a few reasons for creating this project

建立这个专案有几个理由

First of all, a few of us developers needed a good and well designed Vue.js lightweight zero dependencies credit card component with only the card, no form attached

首先，我们中的一些开发人员需要一个良好且设计良好的Vue.js轻量级零依赖信用卡组件，仅包含卡，无需附加表格

Also, Vue Interactive Paycard isn't a Vue.js npm component that you can simply add it to your project, and it doesn't seem to be maintained

另外，Vue Interactive Paycard不是Vue.js npm组件，您可以将其简单地添加到项目中，并且似乎也无法维护

So this project is the Card component from there, but with some differences:

因此，该项目是其中的Card组件，但有一些区别：

This component is in npm, so you can simply install and start using it right away, with only Vue.js as a dependency;
该组件位于npm中，因此您只需安装Vue.js就可以直接安装并立即使用它。
All the images were optimized and have their width exactly as they need;
所有图像都经过优化，并且宽度完全符合需要；
The name of some of the props were changed and some of the code was refactored;
某些道具的名称已更改，某些代码已重构；
The prop labels was added, so we don't need any i18n library;
属性labels已添加，因此我们不需要任何i18n库；
This project has a development environment using Storybook, Github Actions, etc.
该项目具有使用Storybook ， Github Actions等的开发环境。

如何安装 (How to install)

npm (npm)

$ npm install vue-paycard --save

纱 (yarn)

$ yarn add vue-paycard

快速开始 (Quick start)

Vue.js (Vue.js)

You can import in your main.js file

您可以导入main.js文件

import Vue from 'vue'
import VuePaycard from 'vue-paycard'

Vue.use(VuePaycard)

Or locally in any component

或本地任何组件

import { VuePaycard } from 'vue-paycard'

export default {
  components: {
    VuePaycard
  }
}

Nuxt.js (Nuxt.js)

You can import as a Nuxt.js plugin

您可以导入为Nuxt.js插件

import Vue from 'vue'
import VuePaycard from 'vue-paycard'

Vue.use(VuePaycard)

and then import it in your nuxt.config.js file

然后将其导入到您的nuxt.config.js文件中

plugins: [
  { src: '~/plugins/vue-paycard.js', mode: 'client' }
]

基本用法 (Basic usage)

<template>
  <vue-paycard :value-fields="valueFields" />
</template>

<script>
  export default {
    data: () => ({
      valueFields: {
        cardName: '',
        cardNumber: '',
        cardMonth: '',
        cardYear: '',
        cardCvv: ''
      }
    })
  }
</script>

道具 (Props)

Property name	Type	Default	Description
value-fields	Object	null	A required object that let you set the credit card holders name, number, month, year and cvv. Note that is required that all the attributes name must be exactly as the example above (see Basic usage)
input-fields	Object	{ cardNumber: 'v-card-number', cardName: 'v-card-name', cardMonth: 'v-card-month', cardYear: 'v-card-year', cardCvv: 'v-card-cvv' }	An object that contains all your input fields id from your form. Each input field must have a valid and unique id to bind focus/blur listeners that this component provides. Note that is required that all the attributes name must be exactly as the ones in "Default"
labels	Object	{ cardName: 'Full Name', cardHolder: 'Card Holder', cardMonth: 'MM', cardYear: 'YY', cardExpires: 'Expires' }	Set custom labels for the card if needed. English by default. Note that is required that all the attributes name must be exactly as the ones in "Default"
is-card-number-masked	Boolean	true	Hides the numbers provided and changes to "*". Only shows the last four digits
random-backgrounds	Boolean	true	Set a random background image to the card. You can check all the images in `src/assets/images`
background-image	[String, Number]	''	Set a background image link to the card (overrides `random-backgrounds` prop), or you can pass a single valid number that matches the images name we have in `src/assets/images`

物业名称	类型	默认	描述
价值领域	目的	空值	一个必需的对象，可让您设置信用卡持有人的姓名，号码，月份，年份和简历。需要注意的是，要求所有的属性名称必须是完全按照上面的例子(见基本用法 )
输入字段	目的	{cardNumber：'v-card-number'，cardName：'v-card-name'，cardMonth：'v-card-month'，cardYear：'v-card-year'，cardCvv：'v-card-cvv' }	一个包含表单中所有输入字段ID的对象。每个输入字段必须具有一个有效且唯一的ID，以绑定此组件提供的焦点/模糊侦听器。这要求所有的属性注意名称必须是完全按照“默认”的那些
标签	目的	{cardName：“全名”，cardHolder：“ Card Holder”，cardMonth：“ MM”，cardYear：“ YY”，cardExpires：“ Expires”}	如果需要，为卡设置自定义标签。默认为英语。这要求所有的属性注意名称必须是完全按照“默认”的那些
卡号掩盖了	布尔型	真正	隐藏提供的数字并更改为“ *”。仅显示最后四位数字
随机背景	布尔型	真正	为卡设置随机的背景图像。您可以检查`src/assets/images`所有`src/assets/images`
背景图像	[字符串，数字]	''	将背景图像链接设置到卡片上(优先于`random-backgrounds`属性)，或者您可以传递一个与我们在`src/assets/images`拥有的图像名称匹配的有效数字

发展历程 (Development)

Note: Contributions are very welcomed, however is very important to open a new issue using the issue template before you start working on anything, so we can discuss it before hand

注意：非常欢迎您提供文稿，但是在开始进行任何工作之前，使用问题模板打开新问题非常重要，因此我们可以事先进行讨论。

Fork the project and enter this commands in your terminal

分叉项目并在终端中输入此命令

$ git clone https://github.com/YOUR_GITHUB_USERNAME/vue-paycard.git
$ cd vue-paycard
$ yarn

故事书 (Storybook)

For visual testing, this project contains storybook which you can run by doing the next command

对于视觉测试，该项目包含故事书，您可以通过执行以下命令来运行它

$ yarn storybook

笑话 (Jest)

Before making the PR, if you changed something that needs to be tested, please make the tests inside the tests/unit folder

进行PR之前，如果您更改了需要测试的内容，请在tests/unit文件夹中tests/unit

To run the tests, you can use the next command

要运行测试，可以使用下一个命令

$ yarn test:watch

CSS (CSS)

All the CSS is at src/assets/css/style.css

所有CSS都位于src/assets/css/style.css

If you make any changes in that file, you will need to run yarn build to build it, because the component uses the minified version at src/assets/css/style.min.css

如果您对该文件进行了任何更改，则将需要运行yarn build进行构建，因为该组件使用了src/assets/css/style.min.css的缩小版本。