index.vue 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264
  1. <template>
  2. <view>
  3. <!-- 兼容vue2-->
  4. <view class="lin-fixed" v-show="showComboxSelect" @click="gclick"></view>
  5. <view class="lin-combox">
  6. <uni-easyinput ref="uni-easyinput" v-model="checkValue" :placeholder="placeholder" type="text"
  7. @input="oninput" />
  8. <view class="lin-combox-select" v-show="showComboxSelect">
  9. <view class="lin-popper__arrow"></view>
  10. <scroll-view scroll-y="true" :style="'max-height:' + maxHeight + 'px;'">
  11. <view v-if="loading" class="fedback-popper_loading">{{ loadingText }}</view>
  12. <template v-else>
  13. <view v-if="!list.length" class="fedback-popper_nodata">暂无数据</view>
  14. <view v-else class="items" v-for="item, key in list" :key="key" :id="key"
  15. @click="comboxCheckHandel(item)">
  16. {{ item[nameKey] }}
  17. </view>
  18. </template>
  19. </scroll-view>
  20. </view>
  21. </view>
  22. </view>
  23. </template>
  24. <script>
  25. export default {
  26. emits: ['update:modelValue', 'input', 'confirm'],
  27. props: {
  28. loading: {
  29. type: Boolean,
  30. default: false
  31. },
  32. maxHeight: {
  33. type: String || Number,
  34. default: 125
  35. },
  36. valueKey: {
  37. type: String,
  38. default: 'value'
  39. },
  40. nameKey: {
  41. type: String,
  42. default: 'name'
  43. },
  44. placeholder: {
  45. type: String,
  46. default: '请输入'
  47. },
  48. loadingText: {
  49. type: String,
  50. default: '加载中'
  51. },
  52. modelValue: [Number, String],
  53. value: [Number, String],
  54. list: {
  55. type: Array,
  56. default: () => []
  57. }
  58. },
  59. data() {
  60. return {
  61. showComboxSelect: false,
  62. checkValue: ''
  63. }
  64. },
  65. created() {
  66. },
  67. mounted() {
  68. if (!this.$refs['uni-easyinput']) {
  69. console.error('请先导入uni-easyinput插件')
  70. return
  71. }
  72. this.watchInitialValue()
  73. },
  74. watch: {
  75. // #ifdef VUE2
  76. value(val) {
  77. this.checkValue = val
  78. this.getInitText()
  79. },
  80. // #endif
  81. // #ifdef VUE3
  82. modelValue(val) {
  83. this.checkValue = val
  84. this.getInitText()
  85. },
  86. // #endif
  87. checkValue(val) {},
  88. list: {
  89. handler(val) {
  90. // console.log(val, 'watch')
  91. }
  92. }
  93. },
  94. methods: {
  95. gclick() {
  96. this.showComboxSelect = false
  97. this.reset()
  98. },
  99. /*
  100. * 判断如果数据源有数据直接获取,没有数据就进行监听
  101. */
  102. watchInitialValue() {
  103. if (this.list.length) {
  104. this.getInitText()
  105. return
  106. }
  107. const unwatchList = this.$watch('list', (val) => {
  108. this.getInitText()
  109. unwatchList()
  110. })
  111. },
  112. getInitText() {
  113. this.checkValue = this.modelValue === null ? this.value : this.modelValue
  114. if (!this.list.length) return
  115. if (this.checkValue === '' || this.checkValue === undefined || this.checkValue === null) return
  116. if (this.showComboxSelect) return
  117. const _item = this.list.find((item) => {
  118. return item[this.valueKey] === +this.checkValue
  119. })
  120. // this.$refs['uni-easyinput'].val = _item[this.nameKey]
  121. },
  122. /**
  123. * 重置
  124. */
  125. reset() {
  126. // #ifdef VUE3
  127. this.$emit('update:modelValue', '')
  128. // #endif
  129. // #ifdef VUE2
  130. this.$emit('input', '')
  131. // #endif
  132. this.$nextTick(() => {
  133. this.$refs['uni-easyinput'].val = ''
  134. })
  135. },
  136. /**
  137. * 选中事件
  138. */
  139. comboxCheckHandel(item) {
  140. const text = item[this.nameKey]
  141. const value = item[this.valueKey]
  142. this.checkValue = ''
  143. this.checkValue = value
  144. this.showComboxSelect = false
  145. // #ifdef VUE3
  146. this.$emit('update:modelValue', value)
  147. // #endif
  148. // #ifdef VUE2
  149. this.$emit('input', value)
  150. // #endif
  151. this.$nextTick(() => {
  152. this.$refs['uni-easyinput'].val = text
  153. })
  154. this.$emit('confirm', value)
  155. },
  156. /**
  157. * 输入事件
  158. */
  159. oninput(val) {
  160. this.$emit('update:modelValue', val);
  161. this.$emit('input', val)
  162. if (!val) {
  163. this.showComboxSelect = false
  164. return
  165. }
  166. this.showComboxSelect = true
  167. }
  168. }
  169. }
  170. </script>
  171. <style lang="less">
  172. .lin-fixed {
  173. position: fixed;
  174. top: 0;
  175. left: 0;
  176. bottom: 0;
  177. right: 0;
  178. z-index: 1;
  179. }
  180. .lin-combox {
  181. position: relative;
  182. .lin-combox-select {
  183. position: absolute;
  184. top: 45px;
  185. left: 0;
  186. right: 0;
  187. background-color: #fff;
  188. z-index: 2;
  189. border-radius: 3px;
  190. padding: 3px 0;
  191. z-index: 8;
  192. background-color: #fff;
  193. border: 1px solid #ebeef5;
  194. border-radius: 6px;
  195. box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
  196. .fedback-popper_nodata {
  197. font-size: 13px;
  198. padding: 5px;
  199. color: #5d5959;
  200. text-align: center;
  201. }
  202. .lin-popper__arrow {
  203. position: absolute;
  204. top: -13px;
  205. left: 32px;
  206. z-index: 3;
  207. content: '';
  208. width: 0;
  209. height: 0;
  210. display: block;
  211. border-color: transparent;
  212. border-style: solid;
  213. border-width: 6px;
  214. border-bottom-color: #ebeef5;
  215. &::before {
  216. content: '';
  217. position: absolute;
  218. display: block;
  219. width: 0;
  220. height: 0;
  221. border-color: transparent;
  222. border-style: solid;
  223. border-width: 6px;
  224. top: 1px;
  225. margin-left: -6px;
  226. border-top-width: 0;
  227. border-bottom-color: #fff;
  228. }
  229. }
  230. .items {
  231. height: 35px;
  232. line-height: 35px;
  233. padding: 0 10px;
  234. font-size: 15px;
  235. }
  236. .fedback-popper_loading {
  237. text-align: center;
  238. font-size: 13px;
  239. padding: 5px;
  240. color: #5d5959;
  241. }
  242. }
  243. }
  244. </style>