smart_storage_app/components/Search/index.vue

<template>
  <view class="search">
    <image src="/static/aidex/images/search.png" class="filterImg"></image>
    <u-input v-model="dec" style="width: 100%" type="text" :placeholder="placeholder" :clearable="false" @blur="blur" />
    <view class="shaixuan" @click="open" id="search">
      <text style="white-space: nowrap">{{ $t('homePage.alarm.sift') }}</text>
      <u-icon name="arrow-right" color="#009458!important" size="30"></u-icon>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    placeholder: {
      type: String,
      default: "请输入告警内容筛选",
    },
  },
  data () {
    return {
      dec: "",
      value1: 1,
      value2: 2,
      show_: false,
    };
  },
  methods: {
    open () {
      this.show_ = true;
      this.$emit("custom");
    },
    blur () {
      this.$emit("blur", this.dec);
    },
  },
};
</script>

<style lang="scss" scoped>
.filterImg {
  width: 40rpx;
  height: 40rpx;
  margin-right: 10rpx;
  margin-bottom: 5rpx;
}

.search {
  background-color: #ffffff;
  width: 100%;
  height: 80rpx;
  border-radius: 10rpx;
  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 20rpx;
  padding-right: 20rpx;
  position: relative;

  .shaixuan {
    white-space: nowrap;

    display: flex;
    // float: right;
    // display: flex;
    // flex:1;
    // justify-content:flex-end;
    align-items: center;
    color: #009458;
  }

  .proper {
    position: absolute;
    left: 0;
    right: 0;
    top: 80rpx;
    height: 500rpx;
    background-color: red;
  }
}

::v-deep .u-dropdown__content {
  position: fixed;
}
</style>