Vue.js 如何将Vuetify用于KeyClope登录主题

我对网络开发还很陌生，所以我可能会有一些基本的误解

我想做的是： 我们使用KeyClope来管理对web应用程序的访问。该应用程序是使用Vuetify的Vue项目。为了实现统一的外观，我还想使用Vuetify为登录设计KeyClope主题

以下是屏幕设计：

到目前为止我所做的： 我创建了文件夹

keydape/themes/my theme

，并添加了以下文件：

我从基本主题中获取了两个ftl文件，然后尝试使用Vuetify类重写登录

为此，我检查了Vuetify文档中所需元素的代码，并将它们输入到

login.ftl

。虽然这对登录按钮或多或少起到了作用，但对于输入来说似乎是完全错误的

下面是它的外观：

通过许多微调，可能可以修复失调，但有一件事我不知道该怎么办，那就是当我点击文本输入时，文本输入不会被激活

我敢肯定，从开发人员工具复制代码是错误的做法。有没有办法用Vuetify设计一个KeyClope主题？基本上不复制Vuetify代码

以下是当前登录名.ftl：

<#import "template.ftl" as layout>
<@layout.registrationLayout displayInfo=social.displayInfo displayWide=(realm.password && social.providers??); section>
    <#if section = "header">
        ${msg("loginWelcomeMessage")}
    <#elseif section = "form">
    <div id="kc-form" <#if realm.password && social.providers??>class="${properties.kcContentWrapperClass!}"</#if>>
    <div id="kc-form-wrapper" <#if realm.password && social.providers??>class="${properties.kcFormSocialAccountContentClass!} ${properties.kcFormSocialAccountClass!}"</#if>>
        <#if realm.password>
            <form id="kc-form-login" onsubmit="login.disabled = true; return true;" action="${url.loginAction}" method="post">
                <div class="${properties.kcFormGroupClass!}">

                    <div class="v-input rom__text--darkblue theme--light v-text-field v-text-field--is-booted v-text-field--enclosed v-text-field--outlined v-text-field--placeholder">
                        <div class="v-input__control">
                            <div class="v-input__slot">
                                <div class="v-input__prepend-inner">
                                    <div class="v-input__icon v-input__icon--prepend-inner"><i aria-hidden="true" class="v-icon notranslate fas fa-user-circle theme--light"></i></div>
                                </div>
                                <fieldset aria-hidden="true">
                                    <legend style="width: 188.25px;"><span>​</span></legend>
                                </fieldset>
                                <div class="v-text-field__slot">
                                    <label for="username" class="v-label v-label--active" style="left: -28px; right: auto; position: absolute;">
                                        ${msg("usernameOrEmail")}
                                    </label>
                                <#if usernameEditDisabled??>
                                    <input tabindex="1" id="username" placeholder="Ihr Nutzername" type="text" value="${(login.username!'')}" type="text" disabled>
                                <#else>
                                    <input tabindex="1" id="username" placeholder="Ihr Nutzername" type="text">
                                </#if>
                                </div>
                            </div>
                            <div class="v-text-field__details">
                                <div class="v-messages theme--light">
                                    <div class="v-messages__wrapper"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="${properties.kcFormGroupClass!}">
                    <label for="password" class="${properties.kcLabelClass!}">${msg("password")}</label>
                    <input tabindex="2" id="password" class="${properties.kcInputClass!}" name="password" type="password" autocomplete="off" />
                </div>

                <div class="${properties.kcFormGroupClass!} ${properties.kcFormSettingClass!}">
                    <div id="kc-form-options">
                        <#if realm.rememberMe && !usernameEditDisabled??>
                            <div class="checkbox">
                                <label>
                                    <#if login.rememberMe??>
                                        <input tabindex="3" id="rememberMe" name="rememberMe" type="checkbox" checked> ${msg("rememberMe")}
                                    <#else>
                                        <input tabindex="3" id="rememberMe" name="rememberMe" type="checkbox"> ${msg("rememberMe")}
                                    </#if>
                                </label>
                            </div>
                        </#if>
                        </div>
                        <div class="${properties.kcFormOptionsWrapperClass!}">
                            <#if realm.resetPasswordAllowed>
                                <span><a tabindex="5" href="${url.loginResetCredentialsUrl}">${msg("doForgotPassword")}</a></span>
                            </#if>
                        </div>

                </div>

                <div id="kc-form-buttons" class="${properties.kcFormGroupClass!} align-center justify-center">
                    <input type="hidden" id="id-hidden-input" name="credentialId" <#if auth.selectedCredential?has_content>value="${auth.selectedCredential}"</#if>/>
                    <button tabindex="4" name="login" id="kc-login" type="submit" class=" align-center justify-center v-btn rom__darkblue rom__text--white elevation-2 v-size--large">
                    <i class="v-icon v-icon--left fas fa-sign-in-alt"></i>
                        ${msg("doLogIn")}
                    </button>
                </div>
            </form>
        </#if>
        </div>
        <#if realm.password && social.providers??>
            <div id="kc-social-providers" class="${properties.kcFormSocialAccountContentClass!} ${properties.kcFormSocialAccountClass!}">
                <ul class="${properties.kcFormSocialAccountListClass!} <#if social.providers?size gt 4>${properties.kcFormSocialAccountDoubleListClass!}</#if>">
                    <#list social.providers as p>
                        <li class="${properties.kcFormSocialAccountListLinkClass!}"><a href="${p.loginUrl}" id="zocial-${p.alias}" class="zocial ${p.providerId}"> <span>${p.displayName}</span></a></li>
                    </#list>
                </ul>
            </div>
        </#if>
    </div>
    <#elseif section = "info" >
        <#if realm.password && realm.registrationAllowed && !registrationDisabled??>
            <div id="kc-registration">
                <span>${msg("noAccount")} <a tabindex="6" href="${url.registrationUrl}">${msg("doRegister")}</a></span>
            </div>
        </#if>
    </#if>

</@layout.registrationLayout>

${msg（“loginWelcomeMessage”）}
​
${msg（“用户名或邮件”）}
${msg（“密码”）}
${msg（“rememberMe”）}
${msg（“rememberMe”）}
${msg（“多洛金”）}



${msg（“noAccount”）}

看起来您只是在使用Vuetify样式。我会尝试将Vue与顶级元素结合使用：

new Vue({
  el: "#kc-form",
  vuetify: new Vuetify(), 
...

然后我将使用Vuetify创建所有输入，例如用户名：

<v-text-field label="Username or email" id="username" />

它可能还需要在布局模板中进行更改和更多调整，以获得朴素的Vuetify感觉和完整的KeyClope功能。如果你能在GitHub上分享你的结果（甚至是不完整的），那就太好了

概念证明：

mounted() {
  document.getElementById("username").setAttribute("name", "username")
}