项目要写这样一个页面，之前一直只用微信小程序开发工具开发的我没用过移动端的组件库，后知后觉的我，眼泪掉下来。真的太好用了吧！
看到这个页面，首先想到的是用van-field标签，因为可以直接设置*和输入框。但是写到所在城市的时候，请选择那里是一个link链接跳转页面，这时，设置van-field有一个is-link的属性，设置之后，将value值改成请选择，设置只读属性，就能出现上图效果了。
<van-field label="详细地址" required=true input-align='right' border=false custom-style='height:120rpx;position:static;' :value="address" placeholder="请输入" @input="addressInput"/>
但是有一个问题就是，这个官网没有对应的点击事件，只好换成van-cell标签
<van-cell custom-class="vancellStyle" is-link @click="citySelete">
<view slot="title">
<view class="cityCell"><span>*</span>所在城市</view>
</view>
请选择
</van-cell>
这样就可以解决点击事情了。那么，问题也来了，van-cell的内间距跟van-feild的不一样，对不齐很难看，又继续研究文档，将所有的都换成van-cell标签。
代码如下：
<template>
<view>
<van-cell-group custom-class='cellGroup'>
<!-- <van-field required=true label="门店logo" custom-style='height:120rpx;position:static;'/> -->
<van-cell custom-class="vancellStyle">
<view slot="title">
<view class="cityCell"><span>*</span>门店logo</view>
</view>
</van-cell>
<view class="rowStyle">
<span>只能上传一张静态图片</span>
<img class="updateImg" src="/static/image/updateIcon.png">
</view>
<!-- <van-field label="门店名称" required=true input-align='right' custom-style='height:120rpx;position:static;' :value="storeName" placeholder="请输入" @input="storeNameInput"/> -->
<van-cell custom-class="vancellStyle">
<view slot="title">
<view class="cityCell"><span>*</span>门店名称</view>
</view>
<view slot="default">
<input type="text" placeholder="请输入" @input="storeNameInput">
</view>
</van-cell>
<!-- <van-field label="联系电话" required=true input-align='right' border=false custom-style='height:120rpx;position:static;' :value="phone" placeholder="请输入" @input="phoneInput"/> -->
<van-cell custom-class="vancellStyle">
<view slot="title">
<view class="cityCell"><span>*</span>联系电话</view>
</view>
<view slot="default">
<input type="text" placeholder="请输入" @input="phoneInput">
</view>
</van-cell>
<!-- <van-field label="微信号" required=true input-align='right' border=false custom-style='height:120rpx;position:static;' :value="wechat" placeholder="请输入" @input="wechatInput"/> -->
<van-cell custom-class="vancellStyle">
<view slot="title">
<view class="cityCell"><span>*</span>微信号</view>
</view>
<view slot="default">
<input type="text" placeholder="请输入" @input="wechatInput">
</view>
</van-cell>
<van-cell custom-class="vancellStyle" is-link @click="citySelete">
<view slot="title">
<view class="cityCell"><span>*</span>所在城市</view>
</view>
{{city}}
</van-cell>
<!-- <van-field label="详细地址" required=true input-align='right' border=false custom-style='height:120rpx;position:static;' :value="address" placeholder="请输入" @input="addressInput"/> -->
<van-cell custom-class="vancellStyle">
<view slot="title">
<view class="cityCell"><span>*</span>详细地址</view>
</view>
<view slot="default">
<input type="text" placeholder="请输入" @input="addressInput">
</view>
</van-cell>
</van-cell-group>
<view class="cell-code">
<van-button color="#363434" round>保存</van-button>
</view>
</view>
</template>
<script>
export default {
data(){
return{
storeName:'',
phone:'',
wechat:'',
city:'请选择',
address:''
}
},
methods:{
storeNameInput(e){
console.log('门店名称：',e.detail);
this.storeName = e.detail;
},
phoneInput(e){
console.log('手机号：',e.detail);
this.phone = e.detail;
},
wechatInput(e){
console.log('微信号：',e.detail);
this.wechat = e.detail;
},
addressInput(e){
console.log('详细地址：',e.detail);
this.address = e.detail;
},
citySelete(e){
console.log('选择城市：',e);
}
},
}
</script>
<style lang="scss">
.van-cell-group{
border:none !important;
}
.cellGroup{
position: static !important;
}
.rowStyle{
display: flex;
flex-direction: column;
margin: 20rpx;
}
span:nth-child(1){
font-size: 24rpx;
color:#8C9AA3;
}
.updateImg{
width: 150rpx;height: 150rpx;
margin-top: 10rpx;
}
.cell-code{
padding: var(--cell-vertical-padding,20rpx) var(--cell-horizontal-padding,32rpx);
height: 180rpx;
display: flex;
align-items: center;
flex-direction: column;
.van-button{
width: 550rpx;
height: 96rpx;
margin-top: 70rpx;
}
}
.van-field{
border: none !important;
}
.vanfieldStyle{
position: static !important;
}
.van-cell{
border: none !important;
}
.vancellStyle{
position: static !important;
height:120rpx;
}
.cityCell{
span:nth-child(1){
font-size: 24rpx;
color:red;
}
}
</style>
这里做一个说明，因为是用组件库新手小白，slot是插槽，就是如果官方提供的不能满足你的开发需求，可以通过这个来自定义
比如van-cell中官网给的默认形式：
value只是一个文字形式，那我想改成输入框怎么办呢，就如上述代码
<view slot="default">
<input type="text" placeholder="请输入" @input="addressInput">
</view>
拓展：cell分割线如何去掉？设置border：none！important；竟然不生效？
css代码如下：
.van-cell{
border: none !important;
}
还需设置van-cell的自定义样式，用costom-class='vancellStyle'
.vancellStyle{
position: static !important;
height:120rpx;
}
就可以实现去掉那条横线啦~
网友评论