请稍等 ...
×

采纳答案成功!

向帮助你的同学说点啥吧!感谢那些助人为乐的人

uni-search-bar设置默认配置中的border项无效

uni-search-bar中设置的border项在我的小程序里面border是不生效的,为什么?我的代码:

<template>
<view class="my-search-container">
		<!-- 搜索输入框 -->
		<uni-search-bar v-if="isShowInput" 
        class="my-search-bar"
        :radius="100"
        :bgColor="config.backgroundColor"
        :placeholder="placeholderText"     
        >
			<uni-icons slot="clearIcon" type="clear" color="#999999"/>
		</uni-search-bar>
		<!-- 搜索按钮 -->
		<view class="my-search-box" v-else>
			<!-- 搜索图标 -->
			<image class="icon" src="@/static/images/search.png"></image>
			<!-- placeholder -->
			<text class="placeholder">{{ placeholderText }}</text>
		</view>		
	</view>
</template>
<script>

	export default {
		name:"my-search",
		// properties
		props:{
			//是否显示输入框
			isShowInput:{
				type: Boolean,
				default: false
			},
			//配置对象
			config:{
				type:Object,
				default:()=>({
					height: 36,				
					backgroundColor:'#ffffff',
					icon:'/static/images/search.png',
					textColor: '#454545',	
					border: '1px #c9c9c9 solid'				 
				})
			},
			placeholderText: {
				type: String,
				default: '搜索'
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss" scoped>
.my-search-container {
	display: flex;
	align-items: center;
	.my-search-bar{
		width: 100%;
	}
	.my-search-box {
		height: 36px;
		width: 100%;
		background-color: $uni-bg-color;
		border-radius: 15px;
		border:1px solid $uni-bg-color-border;
		display: flex;
		align-items: center;
		padding: 0 $uni-spacing-row-base;
		.icon {
			width: $uni-img-size-sm;
			height: $uni-img-size-sm;
		}
		.placeholder {
			font-size: $uni-font-size-sm;
			margin-left: $uni-spacing-row-sm;
			color: $uni-text-color-placeholder;
		}
	}
}
</style>

而我的小程序显示的是这样的,没有边框显示出来
图片描述

正在回答 回答被采纳积分+3

1回答

Sunday 2022-02-25 20:07:18

你好

首先你可以先在 HBuilder 中重启一下项目,已排除缓存的问题。

然后,如果问题依然存在,那么你可以在 微信开发者工具中,通过 F12 查看 Element,可以直接通过 css 的形式为其添加border。

或者可以直接查看 unimodule 中的  uni-search-bar 代码,通过排查代码的方式确定问题出现的原因

0 回复 有任何疑惑可以回复我~
  • 提问者 南京烧饼 #1
    问题解决了 对比了老师的unimodule 中的 uni-search-bar 代码,我的unimodule 中的 uni-search-bar 代码少了对border的这三个样式border-width: 0.5px;border-style: solid;border-color: $uni-border-color;我这边添加上去就有了border的样式了,谢谢老师!
    回复 有任何疑惑可以回复我~ 2022-02-25 22:08:02
问题已解决,确定采纳
还有疑问,暂不采纳
意见反馈 帮助中心 APP下载
官方微信