时间戳

首页 > 解决方案 > 创建一个包含内容的 Kotlin/JS WebComponent

javascript - 创建一个包含内容的 Kotlin/JS WebComponent

问题描述

我想用 Kotlin 创建一个包含默认内容的自定义标签。链接的示例工作正常，但我没有设法将一些默认内容（例如输入元素）添加到自定义标签。

我尝试了不同的方法，但到目前为止，我只设法在 DOM 中的自定义标签旁边添加了输入元素，但没有在其中添加。

索引.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS Client</title>
</head>
<body>
<script src="webcomponentexampleproject.js"></script>
<div id="root"></div>
</body>
</html>

客户端.kt

import kotlinx.browser.document
import kotlinx.browser.window
import kotlinx.html.InputType
import kotlinx.html.dom.append
import kotlinx.html.dom.create

fun main() {
    window.onload = {

        document.getElementById("root")!!.append {
            webcomponent {
                text = "added it"
                +"some more text"
            }
        }

    }
}

Web组件.kt

import kotlinx.html.*
import kotlinx.html.js.onChangeFunction
import org.w3c.dom.HTMLInputElement
import org.w3c.dom.events.Event
import kotlin.properties.Delegates

@JsExport
class WebComponent(consumer: TagConsumer<*>, _text: String = "", _backgroundColor: String = "none") :
    HTMLTag("webcomponent", consumer, emptyMap(), inlineTag = true, emptyTag = false), HtmlInlineTag {

    var text: String by Delegates.observable(_text) { prop, old, new ->
        el.value = text
    }
    var backgroundColor: String by Delegates.observable(_backgroundColor) { prop, old, new ->
        el.style.backgroundColor = backgroundColor
    }

    private val el: HTMLInputElement

    init {
        //TODO: this input element should be INSIDE the tag
        el = consumer.input {
            type = InputType.text
            value = this@WebComponent.text
        }.unsafeCast<HTMLInputElement>()
    }
}

// make the new custom tag usable via the kotlinx.html DSL
fun <T> TagConsumer<T>.webcomponent(block: WebComponent.() -> Unit = {}): T {
    return WebComponent(this).visitAndFinalize(this, block)
}

标签： javascripthtmlkotlinweb-componentkotlin-multiplatform

解决方案

推荐阅读