动态设置placeholder-class.默认搜索图标在中间获取焦点之后再左边

默认状态:placeholder和图标在中间位置

获取焦点：placeholder和图标在左边光标前面位置

动态设置placeholder-class

<view class="search">
  <input type="search" class="select-input" input-align="center" v-model.trim="searchVal" placeholder="请输入" confirm-type="search"
       @confirm='onSearch()' @focus="isFouces=true"  @blur="isFouces=false" :placeholder-class="(isFouces||searchVal?.length>0)?'search-style left':'search-style center'" />

   <image src="static/search.png" :class="['search-ico uni-searchbar__box-icon-search',(isFouces||searchVal?.length>0)?'left':'center']" />
//searchVal?.length>0确保输入内容但是失去焦点搜索图标要在左边

</view>

<script setup lang="ts">
import {ref, reactive, getCurrentInstance} from "vue";

const searchVal=ref();
const isFouces=ref(false);//搜索框是否获取焦点

//搜索
const onSearch = () => {
 console.log("search",searchVal.value)
}

</script>

placeholder-class的样式必须是写在全局样式中。不能加scoped
<style lang="scss">  
.search-style{
  font-size: 36rpx;
  color:#90939A;
  width: 650rpx;
  &.center{
    text-align: center;
    margin-left:-60rpx;
  }
  &.left{
    text-align: left;
  }
}
</style>

其他样式就可以加上scoped当前页面得作用域
<style scoped lang="scss">

.search {
  background: #fff;
  position: fixed;
  z-index:99999;
  padding:20rpx 16rpx;
  border-radius: 32rpx;
  top:0;

  .select-input {
    width: 585rpx;
    height: 88rpx;
    margin: auto;
    overflow: hidden;
    background: #F7F8FA;
    border-radius: 32rpx;
    display: flex;
    align-items: center;
    padding-left:65rpx;
  }

  .search-ico {
    width: 35rpx;
    height: 35rpx;
    position: absolute;
    top: 40rpx;
    &.left{
      left: 20rpx;
    }
    &.center{
      left: 216rpx;
    }
  }
}

</style>

原文地址：https://blog.csdn.net/qq_33769914/article/details/142872740

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！