雨悸
雨悸
  • 发布:2021-01-14 19:17
  • 更新:2021-01-15 11:57
  • 阅读:95

原生子窗体subNVues 使用input组件为什么不显示?

分类:uni-app
<template>  
    <view class="container">  
        <text class="titleView">项目: {{ projectName }}</text>  
        <view class="formItem">  
            <text class="title">姓名:</text>  
            <input class=" content" type="text" placeholder="请输入您的姓名" value="customerName" />  
        </view>  
        <view class="formItem">  
            <text class="title">电话:</text>  
            <input class=" content" type="number" placeholder="请输入电话" value="customerPhone" />  
        </view>  
        <view class="formItem">  
            <text class="title">日期:</text>  
            <picker mode="date" :value="visitTime" @change="bindDateChange" :start="toDay">  
                <text class="content">{{visitTime }}</text>  
            </picker>  
        </view>  
        <view class="formItem">  
            <text class="title">备注:</text>  
            <input class="content" type="text" placeholder="请输入备注" value="remark" />  
        </view>  
        <button class="btn" @click="submit" :class="loginMobile ? 'btn-active' : ''" :disabled="!loginMobile">提交</button>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                projectName:'盛唐城',  
                customerName:'',  
                customerPhone:'',  
                visitTime:'',  
                remark:'',  
                loginMobile:true  
            }  
        },  
        methods: {  

        }  
    }  
</script>  

<style>  
.container{  
    background-color: #ffffff;  
    border-radius: 10upx;  
    padding: 30upx;  
}  
.titleView{  
    color: #000000;  
    text-align: center;  
    font-size: 14px;  
    font-weight: bold;  
}  
.formItem {  
    padding: 1upx 30upx;  
    align-items: center;  
    flex-direction: row;  
    justify-content: space-between;  
    height: 98upx;  
    border-bottom-color: #eeeeee;  
    border-bottom-width: 1upx;  
    border-bottom-style: solid;  
}  

.title {  
    color: #666666;  
    text-align: center;  
    padding-right: 30upx;  
    font-size: 15px;  
    font-weight: normal;  
    height: 30upx;  
    line-height: 30upx;  
}  
.content{  
    color: #666666;  
    text-align: center;  
    font-size: 15px;  
    font-weight: normal;  
    height: 30upx;  
    line-height: 30upx;  
}  

.btn{  
    margin-top: 40upx;  
}  

.btn-active {  
    color: #ffffff;  
    background-color:  #f43f3b;  
}  
.btn-hover {  
    background-color:  #ffc0cb;  
}  

</style>

原生子窗体subNVues 使用input组件为什么不显示?显示结果如下:

2021-01-14 19:17 负责人:无 分享
已邀请:
雨悸

雨悸 (作者)

有人遇到过吗? input组件应该可以使用啊?为啥没效果?

HbuilderX版本是3.0.4,编译模式是:

 "app-plus" : {  
        "usingComponents" : true,  
        "nvueCompiler" : "uni-app",  
        "compatible" : {  
            "ignoreVersion" : true  
        }  
}
雨悸

雨悸 (作者)

.formItem {  
    /* padding: 1upx 30upx;  
    align-items: center;  
    flex-direction: row;  
    justify-content: space-between;  
    height: 98upx;  
    border-bottom-color: #eeeeee;  
    border-bottom-width: 1upx;  
    border-bottom-style: solid; */  
}

把外层写的样式注释掉就可以显示,怎么布局啊,我需要横向排列呢?

雨悸

雨悸 (作者)

坑啊。。。。。。。。。。。。。。

子元素超出父元素大小是不会显示的

982260355@qq.com

982260355@qq.com

nvue的inpt框必须指定宽度,px或者rpx

  • 雨悸 (作者)

    是呢,指定宽度就显示了,指定flex;1 ;也就行了,坑太多...

    2021-01-15 12:55

要回复问题请先登录注册