My_search.vue 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. <template>
  2. <view class="My_search" :style="{ background: bgColor }">
  3. <slot name="left" />
  4. <u-search v-if="ispad" v-model="value" :focus="focus" :showAction="false" height="60" @search="onSearch"
  5. @custom="onSearch" @clear="onSearch" :placeholder="placeholder" />
  6. <u-search v-else v-model="value" :focus="focus" :showAction="false" @search="onSearch" @custom="onSearch"
  7. @clear="onSearch" :placeholder="placeholder" />
  8. <view v-if="isFilter" @click="startFilter" class="filtrate" hover-class="navigator-hover">
  9. <text class="iconfont icon-shaixuan" />筛选
  10. </view>
  11. <My_filter ref="filter" :filter1="filter" :dateRange="dateRange" @onConfirm="onConfirm" />
  12. </view>
  13. </template>
  14. <script>
  15. import My_filter from "./My_filter.vue";
  16. export default {
  17. name: 'My_search',
  18. components: { My_filter },
  19. props: {
  20. placeholder: {
  21. type: String,
  22. default: "请输入关键字"
  23. },
  24. isFilter: {
  25. type: Boolean,
  26. default: true
  27. },
  28. startSearch: Function,
  29. onFilter: Function,
  30. customFiltering: {
  31. type: Boolean,
  32. default: false
  33. },
  34. filter: {
  35. type: Array,
  36. default: () => []
  37. },
  38. dateRange: Boolean,
  39. heightReduction: {
  40. type: Number,
  41. default: 0
  42. },
  43. bgColor: {
  44. type: String,
  45. default: '#052E5D'
  46. },
  47. focus: Boolean
  48. },
  49. data() {
  50. return {
  51. value: "",
  52. ispad: false
  53. };
  54. },
  55. created() {
  56. // #ifdef MP-WEIXIN
  57. let that = this;
  58. uni.getSystemInfo({
  59. success: ({ deviceType }) => that.ispad = deviceType == "pad"
  60. })
  61. // #endif
  62. },
  63. methods: {
  64. onSearch(value) {
  65. this.$emit("startSearch", value)
  66. },
  67. startFilter() {
  68. if (this.customFiltering) return this.$emit("onFilter");
  69. this.$refs.filter.open(this.heightReduction);
  70. },
  71. onConfirm(res) {
  72. this.$emit("onFilter", res)
  73. },
  74. onFinish() {
  75. this.$refs.filter.close();
  76. },
  77. },
  78. }
  79. </script>
  80. <style lang="scss" scoped>
  81. .My_search {
  82. display: flex;
  83. align-items: center;
  84. width: 100vw;
  85. height: 45px;
  86. padding: 8px 10px;
  87. box-sizing: border-box;
  88. .filtrate {
  89. height: 30px;
  90. line-height: 30px;
  91. text-align: center;
  92. margin-left: 5px;
  93. font-size: 14px;
  94. color: #FFFFFF;
  95. border-radius: 4px;
  96. .iconfont {
  97. margin-right: 3px;
  98. font-size: 14px;
  99. }
  100. }
  101. /deep/ .u-search__content {
  102. height: 30px !important;
  103. }
  104. /deep/ .u-icon__icon {
  105. font-size: 22px !important;
  106. line-height: 22px !important;
  107. }
  108. }
  109. </style>