在前端开发中，用到表单控件时，经常会需要使用到信用卡过期时间的控件。本文介绍一个 npm 包 @npm-polymer/gold-cc-expiration-input，它提供了一个可配置的简洁、易用的信用卡过期时间输入控件，而且非常适合用于 Polymer 项目中。
安装
在终端中键入以下命令即可安装该包：
npm install --save @npm-polymer/gold-cc-expiration-input
用法
要使用 @npm-polymer/gold-cc-expiration-input，需要首先在 Polymer 中引用它：
import '@npm-polymer/gold-cc-expiration-input/gold-cc-expiration-input.js';
如果想在 HTML 页面中使用该控件，可以插入以下代码：
<gold-cc-expiration-input></gold-cc-expiration-input>
定制
该控件提供了多种参数可供定制，其中包括：
auto-validate选项，用于启用或禁用输入内容的验证。required选项，用于指定是否必须输入内容。card-types选项，用于指定信用卡类型。label选项，用于定义输入框前的标签文字。error-message选项，用于指定错误提示信息。
下面是一个示例代码，演示如何设置控件的一些参数：
<gold-cc-expiration-input auto-validate required card-types="visa,mastercard,amex,discover" label="过期时间" error-message="请输入有效的信用卡过期时间。"> </gold-cc-expiration-input>
效果
上面的代码产生的效果如下所示：
结论
@npm-polymer/gold-cc-expiration-input 是一个方便简洁的信用卡过期时间输入控件，尤其适合用于 Polymer 项目中。它提供了多种参数可供定制，使得开发者能够根据需求轻松地定制控件。使用该包能够大大提高开发效率，减少代码开发的工作量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fec81e8991b448ddadb