1

YM

2024-04-24 ccb19f88b2583c7dadb18b6b2e9571ec120c6c61

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<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="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: "请输入内容"
    },
    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: 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;
}
.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>