时间戳

首页 > 解决方案 > 如何在 Stencil.JS Web 组件中创建输入掩码？

javascript - 如何在 Stencil.JS Web 组件中创建输入掩码？

问题描述

我一直在为一家公司创建风格指南。我们希望使用 Web 组件，以便组件可以在所有 Web 平台上共享，而不管框架如何。与许多系统一样，需要创建一组表单元素。通常我什至不会在这些东西上浪费我的时间，而只是购买 Telerik 的订阅以获得适当的框架，它提供了您需要的所有表单输入元素并且经过了很好的测试......它们可以正常工作。我尝试导入'inputmask'，（https://www.npmjs.com/package/inputmask) 这似乎是使用最广泛的免费蒙版库，但是在编译 Stencil 组件时，它非常有问题。有人对为 Web 组件创建屏蔽输入的最佳方法有任何建议吗？更具体地说是使用 Stencil.JS？有什么图书馆建议吗？这是我想太多了吗？自己制作更容易吗？

标签： javascriptweb-componentstenciljs

解决方案

这对我有用：

页面组件：

export class Page {
  render() {
    <custom-input mask="(99)99999-9999">
  }
}

自定义输入组件：

import Inputmask from 'inputmask';

@Component({
  tag: 'custom-input',
  shadow: false // very important
})
export class CustomInput {
  nativeInput?: HTMLInputElement;
  @Prop() mask?: string;
  componentDidLoad() {
    if (this.mask) {
      Inputmask({"mask": this.mask}).mask(this.nativeInput);
    }
  }
  render() {
    return <input ref={el => this.nativeInput = el as HTMLInputElement} />
  }
  
}

推荐阅读