1

YM

2024-06-05 c4b8209d92daa8c6e8ec20bdd56fecf4a95d0990

 src/uni_modules/luanqing-search/components/luanqing-search/luanqing-search.vue

@@ -1,118 +1,135 @@
<template>
   <view class="widget_style" >
      <view class="ffff" style="display: flex;height: 100%;">
         <input placeholder-class="widget_input_placehold" v-model="content" class="widget_input" :style="style1" :placeholder="placehold" />
         <view class="widget_button" v-if="isSearchTrue"  @click="onClickSearch">{{buttonText}}</view>
         <view class="widget_button searchBg" v-else  @click="onClickSearch"></view>
      </view>
		
   </view>
  <view class="widget_style">
    <view class="ffff" style="display: flex; height: 100%">
      <input
        placeholder-class="widget_input_placehold"
        @confirm="onClickSearch"
        v-model="content"
        class="widget_input"
        :style="style1"
        :placeholder="placehold"
      />
      <view class="widget_button" v-if="isSearchTrue" @click="onClickSearch">{{
        buttonText
      }}</view>
      <view class="widget_button searchBg" v-else @click="onClickSearch"></view>
    </view>
  </view>
</template>

<script setup>
   export default{
      data(){
         return{
            content:'',
            style1:'',
            style2:'',
         }
      },
      props:{
         width:{
            type:Number,
            default:50
         },
         placehold:{
            type:String,
            default:'请输入内容'
         },
         buttonText:{
            type:String,
            default(){
               return '搜索'
            }
         },isSearchTrue:{
            type:Boolean,
            default(){
               return true
            }
         },
      },
      created() {
         // 编织设置动态宽度
         // this.style1 = 'min-width:calc('+this.width+'vw);';
         // this.style2 = 'min-width:calc('+(this.width / 5)+'vw);';
         this.style1= 'width:4.5rem'
         this.style2= 'width:.5rem'
      },
      destroyed() {
			
      },
      methods:{
         onClickSearch(){
            this.$emit('onSearch',{text:this.content});
         }
export default {
  data() {
    return {
      content: "",
      style1: "",
      style2: ""
    };
  },
  props: {
    width: {
      type: Number,
      default: 50
    },
    placehold: {
      type: String,
      default: "请输入内容"
    },
    keyword: {
      type: String
    },
    buttonText: {
      type: String,
      default() {
        return "搜索";
      }
    },
    isSearchTrue: {
      type: Boolean,
      default() {
        return true;
      }
    }
  },
  created() {
    // 编织设置动态宽度
    // this.style1 = 'min-width:calc('+this.width+'vw);';
    // this.style2 = 'min-width:calc('+(this.width / 5)+'vw);';
    this.style1 = "width:4.5rem";
    this.style2 = "width:.5rem";
    this.content = this.keyword || "";
  },
  destroyed() {},
  methods: {
    onClickSearch() {
      this.$emit("onSearch", { text: this.content });
    }
  },
   watch: {
      keyword(value) {
         this.content = value
      }
   }
};
</script>

<style>
   .widget_style{
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      border-radius: 30px;
      height: 100% !important;
   }
   .ffff{
      border: 2px solid #597AA5;
      border-radius: 30px;
      overflow: hidden;
      padding-left: 10px;
      background-color: #fff;
      align-items: center;
   }
   .widget_input{
      min-width: 320rpx;
      height: 100%;
      background-color: #fff;
      /* border: 2rpx solid #FF6600; */
      /* border-radius: 10rpx; */
      padding-left: 12rpx;
      padding-right: 12rpx;
      font-size: 24rpx;
   }
   .widget_input_placehold{
      color: #BBB;
   }
   .widget_button{
      color: #fff;
      width: .74rem;
      height: .3rem;
      font-size: .14rem;
      padding: 5rpx 20rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border-top-right-radius: 10rpx;
      border-top-left-radius: 0rpx;
      border-bottom-left-radius: 0rpx;
      border-bottom-right-radius: 10rpx;
      background-color: #244A7B;
      border-radius: 30px;
      margin: 2rpx;
   }
   .searchBg{
      width: .46rem;
      height: 0.46rem;
      background-image:url(@/static/image/搜索.png) ;
      background-size: 100% 100%;
   }
   ::v-deep .uni-input-input{
      height: 100% !important;
      color: #000;
      font-size: .16rem;
   }
.widget_style {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
  height: 100% !important;
}
.ffff {
  border: 2px solid #597aa5;
  border-radius: 30px;
  overflow: hidden;
  padding-left: 10px;
  background-color: #fff;
  align-items: center;
}
.widget_input {
  min-width: 320rpx;
  height: 100%;
  background-color: #fff;
  /* border: 2rpx solid #FF6600; */
  /* border-radius: 10rpx; */
  padding-left: 12rpx;
  padding-right: 12rpx;
  font-size: 24rpx;
}
.widget_input_placehold {
  color: #bbb;
}
.widget_button {
  color: #fff;
  width: 0.74rem;
  height: 0.3rem;
  font-size: 0.14rem;
  padding: 5rpx 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top-right-radius: 10rpx;
  border-top-left-radius: 0rpx;
  border-bottom-left-radius: 0rpx;
  border-bottom-right-radius: 10rpx;
  background-color: #244a7b;
  border-radius: 30px;
  margin: 2rpx;
  cursor: pointer;
}
.searchBg {
  width: 0.46rem;
  height: 0.46rem;
  background-image: url(@/static/image/搜索.png);
  background-size: 100% 100%;
}
::v-deep .uni-input-input {
  height: 100% !important;
  color: #000;
  font-size: 0.16rem;
}
</style>