<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组件为什么不显示?显示结果如下: