onlytao
onlytao
  • 发布:2022-04-28 01:00
  • 更新:2023-10-04 15:53
  • 阅读:1246

#插件讨论# 【 uni-forms 表单 - DCloud前端团队 】不能用,输入框都不显示

分类:uni-app
关联插件: uni-forms 表单

为什么我使用无效呢,从该页面使用HBuilerdX导入插件的,初次使用该插件。没有报错。页面只显示label。

main.js做了引入:
import uniForms from './uni_modules/uni-forms/components/uni-forms/uni-forms.vue'
Vue.component('uni-forms',uniForms)

import uniFormsItem from './uni_modules/uni-forms/components/uni-forms-item/uni-forms-item.vue'
Vue.component('uni-forms-item',uniFormsItem)
相关代码:
<template>
<view>
<cu-custom bgColor="bg-gradual-blue" :isHome="true">
<block slot="homeText"></block>
<block slot="content">{{title}}</block>
</cu-custom>
<!-- <form>
<view class="cu-form-group margin-top">
<view class="title">姓名</view>
<input placeholder="两字短标题" name="input" requied: true></input>
</view>
<view class="cu-form-group">
<view class="title">输入框</view>
<input placeholder="三字标题" name="input"></input>
</view>
<view class="cu-form-group">
<view class="title">收货地址</view>
<input placeholder="统一标题的宽度" name="input"></input>
</view>
</form> -->

        <view class="example">  
            <!-- 基础表单校验 -->  
            <uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">  
                <uni-forms-item label="姓名" required name="name">  
                    <uni-easyinput v-model="valiFormData.name" placeholder="请输入姓名" />  
                </uni-forms-item>  
                <uni-forms-item label="年龄" required name="age">  
                    <uni-easyinput v-model="valiFormData.age" placeholder="请输入年龄" />  
                </uni-forms-item>  
                <uni-forms-item label="自我介绍" name="introduction">  
                    <uni-easyinput type="textarea" v-model="valiFormData.reason" placeholder="请输入自我介绍" />  
                </uni-forms-item>  
            </uni-forms>  
            <button type="primary" @click="submit('valiForm')">提交</button>  
        </view>  

</view>  

</template>

2022-04-28 01:00 负责人:无 分享
已邀请:
onlytao

onlytao (作者)

页面代码:
<template>
<view>
<cu-custom bgColor="bg-gradual-blue" :isHome="true">
<block slot="homeText"></block>
<block slot="content">{{title}}</block>
</cu-custom>
<!-- <form>
<view class="cu-form-group margin-top">
<view class="title">姓名</view>
<input placeholder="两字短标题" name="input" requied: true></input>
</view>
<view class="cu-form-group">
<view class="title">输入框</view>
<input placeholder="三字标题" name="input"></input>
</view>
<view class="cu-form-group">
<view class="title">收货地址</view>
<input placeholder="统一标题的宽度" name="input"></input>
</view>
</form> -->

        <view class="example">  
            <!-- 基础表单校验 -->  
            <uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">  
                <uni-forms-item label="姓名" required name="name">  
                    <uni-easyinput v-model="valiFormData.name" placeholder="请输入姓名" />  
                </uni-forms-item>  
                <uni-forms-item label="年龄" required name="age">  
                    <uni-easyinput v-model="valiFormData.age" placeholder="请输入年龄" />  
                </uni-forms-item>  
                <uni-forms-item label="自我介绍" name="introduction">  
                    <uni-easyinput type="textarea" v-model="valiFormData.reason" placeholder="请输入自我介绍" />  
                </uni-forms-item>  
            </uni-forms>  
            <button type="primary" @click="submit('valiForm')">提交</button>  
        </view>  

</view>  

</template>

DCloud_UNI_HT

DCloud_UNI_HT

更新最新组件,看问题是否解决

z***@qq.com

z***@qq.com

我也是这样,不知道怎么解决

7***@qq.com

7***@qq.com

还要引入uni-easyinput,我刚才也是一样情况

6***@qq.com

6***@qq.com

解决了吗

要回复问题请先登录注册