vant框架van-field输入栏添加外边框

van-field标签默认是无外边框的，如下图：

添加外边框后的样式，如下图：

采用样式穿透的方式，上代码：

        <div class="rowTextArea"><van-fieldv-model="ruleForm.address"name="地址"label="地址"requiredtype="textarea"placeholder="请输入详细地址"/></div>

添加外边框

.rowTextArea::v-deep .van-field__value{border: 1px solid #ccc;
}

换行

.rowTextArea::v-deep .van-cell{display: flow-root;
}

vant框架van-field相关推荐

TP框架中field查询字段
TP框架中field查询字段不是fields 也不是files !!!! 不是fields 也不是files !!!! 不是fields 也不是files !!!! 不是fields 也不是file ...
vant框架cdn使用方式的简短案例
vant框架主页:https://youzan.github.io/vant/#/zh-CN/intro cdn方式引用的简易例子: <html lang="en"> ...
用vant框架做H5时踩过的坑（下拉刷新、上拉加载等）
用vant框架做H5时踩过的坑 1. 页面在手机端不能上下滑动,在PC端浏览器正常滑动说明:在设置了overflow:auto;属性的前提下,H5页面在PC端浏览器里展示可以上下滑动,在ios上可正 ...
h5结合vant框架，实现列表上拉加载下拉刷新
最近在做h5移动页面开发,并且需要用移动端android和ios将h5嵌进去.在开发过程中,使用了vant这个框架: vant文档:https://youzan.github.io/vant/#/zh ...
微信小程序引用vant框架
1.在微信开发者工具中打开终端(视图-终端)输入 npm init (初始化)一直回车确认 2.vant 官网: Vant Weapp - 轻量.可靠的小程序 UI 组件库安装: # 通过 npm ...
v浅谈vue之vant框架
目录 vant框架的使用使用一个Tabbar 标签栏 App.vue 封装为一个MainTabbar.vue组件使用一个Swipe 轮播图 **Home.vue**组件使用轮播图使用一个 Gir ...
小程序修改vant框架的ui样式
小程序修改vant框架的ui样式在页面写入,就可以了重写组件样式 ptions: {styleIsolation: 'shared' }
记录一次用vant框架做h5微信公众号
这次是用vant框架做一个h5微信公众号,是在我一同事封装的基础上开发的.封装的项目在gitee上的地址:湖南巨仑网络科技有限公司/vant-H5移动端封装 - Gitee.com.内容有底部导航的, ...
vant框架上传组件---上传身份证两面图片需求并且压缩图片质量，非压缩长宽——商城项目
场景 1.vant框架上传组件-上传身份证两面图片需求并且压缩图片质量,非压缩长宽--商城项目 2.压缩图片质量大小-- 3.压缩逻辑因为是正反两面单独压缩执行,所以我这里使用 Promise.all ...

vant框架van-field

vant框架van-field输入栏添加外边框

van-field标签默认是无外边框的，如下图：

添加外边框后的样式，如下图：

vant框架van-field相关推荐

最新文章

热门文章