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>
而我的小程序显示的是这样的,没有边框显示出来