search_input.vue 966 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. <template>
  2. <div class="build_input">
  3. <i class="iconfont icon-sousuo"></i>
  4. <input type="text" v-model="value" :placeholder="placeholder" @keyup.enter="search">
  5. </div>
  6. </template>
  7. <script>
  8. export default {
  9. props: [ 'placeholder'],
  10. data(){
  11. return{
  12. value: ''
  13. }
  14. },
  15. methods: {
  16. search(){
  17. this.$emit("search",this.value)
  18. },
  19. },
  20. }
  21. </script>
  22. <style lang="less" scoped>
  23. .build_input{
  24. display: inline-block;
  25. width: 23rem;
  26. height: 2rem;
  27. line-height: 2rem;
  28. font-size: 1.4rem;
  29. position: relative;
  30. input{
  31. width: 100%;
  32. height: 100%;
  33. padding-left: 2rem;
  34. font-size: .8rem;
  35. box-sizing: border-box;
  36. }
  37. .icon-sousuo{
  38. position: absolute;
  39. width: 2rem;
  40. height: 2rem;
  41. left: 0;
  42. top: 3px;
  43. bottom: 0;
  44. line-height: 2rem;
  45. text-align: center;
  46. }
  47. }
  48. </style>