本人作为初学者,写博客只是为了巩固自己的所学记录错误
项目场景:
项目场景:在公司提供的基本框架下使用UNIAPP开发移动端页面时,总能用到原生组件或一些框架提供的便利组件(像element等),本文只针对UNIAPP自带的组件进行解决,另外由于使用的基本框架等配置是公司技术人员提供的,可能具有一定的特殊性,因此本文的解决方案不一定有用。
问题描述
使用input组件出现如下问题:
<view class="search">
<view class="search-img">
<image class="" :src="searchImg" mode="widthFix"></image>
</view>
<view class="search-input">
<input type="text" placeholder="在社区搜索内容、用户" placeholder-class="placeholder-class" class="" />
</view>
</view>
使用的input组件其输入框与placeholder内容出现分离,正常情况下应该是不会分离的。同时无法通过对input组件添加样式进行修改。
原因分析:
暂未知晓
感觉大概率是给我的基本框架配置有问题,毕竟之前也给了我一个框架,但那个没什么问题
解决方案:
使用深度选择器
右键input组件,选择‘检查’,寻找input组件的样式
使用深度选择器对组件的样式进行更改,这里主要修改了UNIAPP input组件的样式、input组件聚焦后的样式以及未输入时placeholder的样式
::v-deep .uni-input-input {
border: 1px solid rgba(255, 0, 0, 0) !important;
height: 68rpx;
width: 570rpx;
font-size: 30rpx;
line-height: 68rpx;
position: absolute;
top: 0rpx;
background: rgba(0, 0, 0, 0) !important;
}
/deep/ .uni-input-input:focus {
border: 1px solid rgba(255, 0, 0, 0) !important;
outline: 0px;
}
.placeholder-class {
// display: none;
color: rgb(0, 0, 0);
opacity: 0.6;
position: relative;
// z-index: 90;
line-height: 68rpx;
margin-left: 20rpx;
font-size: 30rpx;
// align-items: center;
}
关于深度选择器的写法请自行百度,本文使用的是预处理器是less,用了::v-deep和/deep/两种写法。
官方对深度选择器的解释
效果如下
题外话&牢骚
第二次写记录,还是显示文章质量低的提示(给自己写的也没必要太高吧,能看懂就行)。emmmm……短是短了点,不过这也不是什么太严重的问题,对这种问题写长文应该挺折磨读者的,毕竟谁不希望就靠复制一段代码解决问题。