RadDataForm nativescript vue 显示/隐藏密码

Posted 2023-04-13

【中文标题】RadDataForm nativescript vue 显示/隐藏密码

【英文标题】：RadDataForm nativescript vue show/hide password

【发布时间】：2019-10-15 18:23:26

【问题描述】：

有这部分代码形式：

<RadDataForm id="loginForm" ref="loginForm" :source="user">
  <TKEntityProperty v-tkDataFormProperty name="password" displayName imageResource="res://lock" hintText="Password" index="0">
    <TKPropertyEditor v-tkEntityPropertyEditor type="Password">
      <TKPropertyEditorStyle v-tkPropertyEditorStyle labelWidth="4" />
    </TKPropertyEditor>
  </TKEntityProperty>
</RadDataForm>

需要附加图标/图片可以点击显示/隐藏密码

【问题讨论】：

我认为如果您为此目的引入自定义编辑器会更容易，可能是用 GridLayout 包装的 TextField 和 Image。

可以用自定义编辑器解释 nativescript-vue 的结构吗？

【参考方案1】：

如果我没记错的话，CustomPropertyEditor 尚未在最新版本的 nativescript-ui-dataform 插件（截至今天 v4.0.0）中作为 Vue 指令公开。

所以你必须先将它与 RadDataForm 一起注册，可能类似于

import Vue from 'nativescript-vue';
import * as RadDataFormModule from "nativescript-ui-dataform";

import RadDataForm from "nativescript-ui-dataform/vue";
Vue.use(RadDataForm);

Vue.registerElement("TKCustomPropertyEditor", function () 
    return RadDataFormModule.CustomPropertyEditor;
);

现在只需使用TKCustomPropertyEditor 而不是TKPropertyEditor

        <TKEntityProperty v-tkDataFormProperty name="password">
            <TKCustomPropertyEditor v-tkEntityPropertyEditor
                @editorNeedsView="onPasswordEditorNeedsView">
            </TKCustomPropertyEditor>
        </TKEntityProperty>

现在您可以按照文档中的说明在 editorNeedsView 事件上创建和分配您喜欢的视图。