0

请考虑我有以下代码，这是一组用于选择和显示日期的元素。

<div>
   <input type="text" class="txt txtDate"/>
   <input type="button" class="btn btnDate" value="Select from Calendar"/>
   <span class="remainedDays"></span>
<div>

在这里，我有一个用于输入日期的输入，一个用于从日历中选择日期的按钮，以及一个显示所选日期和当前日期之间差异的标签。所有计算和表单交互都由 JavaScript 和 jQuery 处理。

由于我以多种形式使用此日期选择器，因此我正在寻找一种方法来在新元素中定义这些元素并使用新元素。如果我能做到这一点，我将编写更少的代码，并且新元素定义中的任何更改都将自动应用于所有表单。

我正在寻找这样的东西：

<mydatepicker class="dt1"></mydatepicker>或者<mydatepicker class="dt1"/>

应该在浏览器中呈现为

    <div class="dt1">
       <input type="text" class="txt txtDate"/>
       <input type="button" class="btn btnDate" value="Select from Calendar"/>
       <span class="remainedDays"></span>
    <div>
4

2 回答 2

1

你可以在 Vanilla JavaScript 中创建自定义元素，但真的不值得这么麻烦，我建议你开始使用 JavaScript 框架来做这种事情。

但无论如何，你可以像这样在 vanilla javascript 中做到这一点：

首先创建一个 JavaScript 文件（例如c-element.js）并扩展HTMLElement该类。在它的connectedCallback方法中，编写您要呈现的 HTML 内容。

然后将脚本添加到您的 HTML 文件中，并使用自定义元素的标签！

当然，这只是一个非常简单的示例，您可以随意添加。您可以在此处阅读有关创建自定义元素的文档。

class CElement extends HTMLElement {
    constructor() {
        super();
    }

    connectedCallback() {
        this.innerHTML = `
      <div class="c-element">
      <div class="c-element__heading">
      <h1> This is a custom element (CElement)</h1>
        </div>
        </div>
      `;
    }
}

customElements.define("c-element", CElement);
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<c-element> </c-element>
<script src="c-element.js"></script>
</body>
</html>

于 2021-08-08T05:21:10.607 回答
0

您需要类似angular.js directive或Angular Component带有纯 JavaScript 代码的东西。

您可以Web Component通过扩展创建HTMLElement，也可以获取该自定义的所有属性和类列表，Element以创建更强大和动态的组件：

class mydatepicker  extends HTMLElement {
            Classes;
            CustomLabel;
            constructor() {
                super();
                this.classes = this.classList.value;
                this.CustomLabel = this.getAttribute("CustomLabel");
            }


            connectedCallback() {
                this.innerHTML = `
                <div class="${this.classes}">
                      <label> ${this.CustomLabel} </label>
                       <input type="text" class="txt txtDate"/>
                       <input type="button" class="btn btnDate" value="Select from Calendar"/>
                       <span class="remainedDays"></span>
                <div>
              `;
            }

        }

        customElements.define("my-datepicker", mydatepicker);
.dt1{
   color:red;
}
<my-datepicker  class="dt1 dt2" CustomLabel="this is custome lable"> </my-datepicker>

请注意，您可以传递一些您想要的类和自定义属性

于 2021-08-08T06:58:37.420 回答