1

YM

2024-06-06 c56935d7085725e609d926b064c146f3ffc29e6e

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

@@ -1,14 +1,38 @@
<template>
  <view class="widget_style">
    <view class="ffff" style="display: flex; height: 100%">
    <view class="ffff" style="display: flex; height: 100%; position: relative">
      <input
        placeholder-class="widget_input_placehold"
        @confirm="onClickSearch"
        v-model="content"
        class="widget_input"
        :style="style1"
        style="min-width: 4rem; padding-right: 54px;box-sizing: border-box;"
        :placeholder="placehold"
      />
      <span
        class="cleanupBtn"
        v-if="content"
        @click="content = ''"
        style="
          position: absolute;
          top: 50%;
          margin-top: -10px;
          right: 84px;
          color: #fff;
          z-index: 2;
          display: inline-block;
          width: 20px;
          height: 20px;
          text-align: center;
          line-height: 20px;
          background-color: #a5a5a5;
          font-weight: bold;
          border-radius: 50%;
          font-size: 12px;
          cursor: pointer;
        "
        >✖</span
      >
      <view class="widget_button" v-if="isSearchTrue" @click="onClickSearch">{{
        buttonText
      }}</view>
@@ -22,7 +46,6 @@
  data() {
    return {
      content: "",
      style1: "",
      style2: ""
    };
  },
@@ -53,9 +76,7 @@
  },
  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 || "";
  },
@@ -65,11 +86,11 @@
      this.$emit("onSearch", { text: this.content });
    }
  },
   watch: {
      keyword(value) {
         this.content = value
      }
   }
  watch: {
    keyword(value) {
      this.content = value;
    }
  }
};
</script>