1

YM

2024-04-24 ccb19f88b2583c7dadb18b6b2e9571ec120c6c61

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

@@ -1,11 +1,19 @@
<template>
   <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="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>

@@ -13,10 +21,10 @@
   export default{
      data(){
         return{
            content:'',
            style1:'',
            style2:'',
         }
      content: "",
      style1: "",
      style2: ""
    };
      },
      props:{
         width:{
@@ -25,36 +33,44 @@
         },
         placehold:{
            type:String,
            default:'请输入内容'
      default: "请输入内容"
    },
    keyword: {
      type: String
         },
         buttonText:{
            type:String,
            default(){
               return '搜索'
            }
         },isSearchTrue:{
            type:Boolean,
            default(){
               return true
        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.style1 = "width:4.5rem";
    this.style2 = "width:.5rem";
    this.content = this.keyword || "";
      },
      destroyed() {
			
      },
  destroyed() {},
      methods:{
         onClickSearch(){
            this.$emit('onSearch',{text:this.content});
      this.$emit("onSearch", { text: this.content });
    }
  },
   watch: {
      keyword(value) {
         this.content = value
         }
      }
   }
};
</script>

<style>
@@ -67,7 +83,7 @@
      height: 100% !important;
   }
   .ffff{
      border: 2px solid #597AA5;
  border: 2px solid #597aa5;
      border-radius: 30px;
      overflow: hidden;
      padding-left: 10px;
@@ -85,13 +101,13 @@
      font-size: 24rpx;
   }
   .widget_input_placehold{
      color: #BBB;
  color: #bbb;
   }
   .widget_button{
      color: #fff;
      width: .74rem;
      height: .3rem;
      font-size: .14rem;
  width: 0.74rem;
  height: 0.3rem;
  font-size: 0.14rem;
      padding: 5rpx 20rpx;
      display: flex;
      align-items: center;
@@ -100,12 +116,12 @@
      border-top-left-radius: 0rpx;
      border-bottom-left-radius: 0rpx;
      border-bottom-right-radius: 10rpx;
      background-color: #244A7B;
  background-color: #244a7b;
      border-radius: 30px;
      margin: 2rpx;
   }
   .searchBg{
      width: .46rem;
  width: 0.46rem;
      height: 0.46rem;
      background-image:url(@/static/image/搜索.png) ;
      background-size: 100% 100%;
@@ -113,6 +129,6 @@
   ::v-deep .uni-input-input{
      height: 100% !important;
      color: #000;
      font-size: .16rem;
  font-size: 0.16rem;
   }
</style>