如何更改 nativescript-vue 中的 RadDataForm 样式？ (Nativescript-Vue)

Posted 2023-04-14

【中文标题】如何更改 nativescript-vue 中的 RadDataForm 样式？ (Nativescript-Vue)

【英文标题】：How to change the RadDataForm style in nativescript-vue ? (Nativescript-Vue)

【发布时间】：2019-08-13 09:12:18

【问题描述】：

如何更改人员对象中存在的电子邮件和密码的字体大小、边框颜色等样式。

 <RadDataForm :source="person"</RadDataForm>  

【参考方案1】：

Here 似乎是您正在寻找的完美示例，使用TKPropertyEditorStyle 定义自定义字体、大小、颜色等，

    <template>
        <Page class="page">
            <ActionBar title="Home" class="action-bar" />
            <RadDataForm ref="dataForm" :source="person">
                <TKEntityProperty v-tkDataFormProperty name="name">
                    <TKPropertyEditor v-tkEntityPropertyEditor type="Text">
                        <TKPropertyEditorStyle v-tkPropertyEditorStyle
                            labelTextColor="red"></TKPropertyEditorStyle>
                    </TKPropertyEditor>
                </TKEntityProperty>
                <TKEntityProperty v-tkDataFormProperty name="age">
                    <TKPropertyEditor v-tkEntityPropertyEditor type="Decimal">
                        <TKPropertyEditorStyle v-tkPropertyEditorStyle
                            labelTextColor="green"></TKPropertyEditorStyle>
                    </TKPropertyEditor>
                </TKEntityProperty>
                <TKEntityProperty v-tkDataFormProperty name="birthDate">
                    <TKPropertyEditor v-tkEntityPropertyEditor type="DatePicker">
                        <TKPropertyEditorStyle v-tkPropertyEditorStyle
                            labelTextColor="blue"></TKPropertyEditorStyle>
                    </TKPropertyEditor>
                </TKEntityProperty>
            </RadDataForm>
        </Page>
    </template>

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

        export default 
            data() 
                return 
                    person: 
                        name: "John",
                        age: 23,
                        birthDate: "1993-05-16"
                    
                ;
            
        ;
    </script>

【讨论】：

使用您的代码，我可以更改输入字段标签样式，例如颜色、字体大小等，但我想在用户点击输入字段时更改输入字段边框颜色。