search.vue 1.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. <template>
  2. <view class="searchWrapper">
  3. <view class="searchView d-flex a-center">
  4. <input type="text" v-model="searchText" placeholder="搜索"/>
  5. <view class="icon iconfont icon-search-1-copy" @tap="search"></view>
  6. </view>
  7. </view>
  8. </template>
  9. <script>
  10. export default{
  11. data(){
  12. return {
  13. searchText:""
  14. }
  15. },
  16. methods:{
  17. search(){
  18. if(this.searchText=='' ||this.searchText==null ){
  19. uni.showToast({
  20. icon:"none",
  21. title:"请输入搜索内容",
  22. duration:1500
  23. })
  24. return;
  25. }
  26. this.$emit('search',this.searchText)
  27. }
  28. }
  29. }
  30. </script>
  31. <style scoped>
  32. /* 搜索框区域Start */
  33. .searchWrapper {
  34. width: 100%;
  35. padding: 15upx 20upx;
  36. margin: 0 auto;;
  37. box-sizing: border-box;
  38. }
  39. .searchView {
  40. border: 1px solid #ccc;
  41. background: #fff;
  42. height: 75upx;
  43. border-radius: 40upx;
  44. font-size: 30upx;
  45. color: #C0C0C0;
  46. padding: 0 40upx;
  47. box-sizing: border-box;
  48. }
  49. .searchView input{
  50. padding-left: 10upx;
  51. width:100%;
  52. }
  53. .searchView .icon{
  54. font-size: 40upx;
  55. }
  56. /* 搜索框区域End */
  57. </style>