ShowEasyFrontEnd/FrontEnd/components/user/userSearchBar.vue

<template>
  <div class="tw-flex tw-flex-col">
    <input
      class="user-search tw-bg-white tw-rounded-[12px] input-background tw-p-[5px] tw-border-none active:tw-border-none"
      :id="input.id"
      :type="input.type"
      :value="value"
      :placeholder="input.placeHolder"
      v-model="inputVal"
      @keyup.enter="search"
    />
  </div>
</template>
<script>
  export default {
    name: "ElementInput",
    props: {
      input: {
        type: Object,
      },
      default: {
        type: String,
      },
    },
    data() {
      return {
        value: this.default ? this.default : "",
      };
    },
    mounted() {},
    watch: {
      default: {
        handler: function () {
          this.value = this.default;
        },
      },
    },

    computed: {
      inputVal: {
        get() {
          return this.value;
        },
        set(val) {
          this.value = val;
          this.$emit("change", val);
        },
      },
    },
    methods: {
      search() {
        this.$emit("search", this.value);
      },
    }
    };

</script>
<style lang="scss" scoped>
  .input-background {
    background: url('@/assets/svg/search.svg') no-repeat 95% 50%;
    // background-position: right;
    background-size: 20px;
  }

  .user-search{
    border: none;
  }
</style>