index.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317
  1. <template>
  2. <view v-if="visible || inline"
  3. :class="['lb-picker', inline ? 'lb-picker-inline' : '']">
  4. <view v-if="showMask && !inline"
  5. :class="['lb-picker-mask', animation ? 'lb-picker-mask-animation' : '']"
  6. :style="{
  7. backgroundColor: maskBgColor,
  8. zIndex: zIndex - 1
  9. }"
  10. @tap.stop="handleMaskTap"
  11. @touchmove.stop.prevent="moveHandle">
  12. </view>
  13. <view :class="[
  14. 'lb-picker-container',
  15. !inline ? 'lb-picker-container-fixed' : '',
  16. animation ? 'lb-picker-container-animation' : '',
  17. containerVisible ? 'lb-picker-container-show' : ''
  18. ]"
  19. :style="{
  20. borderRadius: `${radius} ${radius} 0 0`,
  21. zIndex: zIndex
  22. }">
  23. <view v-if="showHeader"
  24. class="lb-picker-header">
  25. <view class="lb-picker-action lb-picker-left">
  26. <view class="lb-picker-action-item lb-picker-action-cancel"
  27. @tap.stop="handleCancel">
  28. <slot v-if="$slots['cancel-text']"
  29. name="cancel-text">
  30. </slot>
  31. <text v-else
  32. class="lb-picker-action-cancel-text"
  33. :style="{ color: cancelColor }">
  34. {{ cancelText }}
  35. </text>
  36. </view>
  37. </view>
  38. <view class="lb-picker-action lb-picker-center"
  39. v-if="$slots['action-center']">
  40. <slot name="action-center"></slot>
  41. </view>
  42. <view class="lb-picker-action lb-picker-right">
  43. <view class="lb-picker-action-item lb-picker-action-confirm"
  44. @tap.stop="handleConfirm">
  45. <slot v-if="$slots['confirm-text']"
  46. name="confirm-text">
  47. </slot>
  48. <text v-else
  49. class="lb-picker-action-confirm-text"
  50. :style="{ color: confirmColor }">
  51. {{ confirmText }}
  52. </text>
  53. </view>
  54. </view>
  55. </view>
  56. <view class="lb-picker-content"
  57. :style="{ height: pickerContentHeight }">
  58. <!-- loading -->
  59. <view v-if="loading"
  60. class="lb-picker-loading">
  61. <slot name="loading">
  62. <image class="lb-picker-loading-img"
  63. src="data:image/png;base64,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">
  64. </image>
  65. </slot>
  66. </view>
  67. <!-- 暂无数据 -->
  68. <view v-if="isEmpty && !loading"
  69. class="lb-picker-empty">
  70. <slot name="empty">
  71. <text class="lb-picker-empty-text"
  72. :style="{ color: emptyColor }">
  73. {{ emptyText }}
  74. </text>
  75. </slot>
  76. </view>
  77. <!-- 单选 -->
  78. <selector-picker v-if="mode === 'selector' && !loading && !isEmpty"
  79. :value="value"
  80. :list="list"
  81. :mode="mode"
  82. :props="pickerProps"
  83. :height="pickerContentHeight"
  84. :inline="inline"
  85. :is-confirm-change="isConfirmChange"
  86. @change="handleChange">
  87. </selector-picker>
  88. <!-- 多列联动 -->
  89. <multi-selector-picker v-if="mode === 'multiSelector' && !loading && !isEmpty"
  90. :value="value"
  91. :list="list"
  92. :mode="mode"
  93. :level="level"
  94. :visible="visible"
  95. :props="pickerProps"
  96. :height="pickerContentHeight"
  97. :inline="inline"
  98. :is-confirm-change="isConfirmChange"
  99. @change="handleChange">
  100. </multi-selector-picker>
  101. <!-- 非联动选择 -->
  102. <unlinked-selector-picker v-if="mode === 'unlinkedSelector' && !loading && !isEmpty"
  103. :value="value"
  104. :list="list"
  105. :mode="mode"
  106. :visible="visible"
  107. :props="pickerProps"
  108. :height="pickerContentHeight"
  109. :inline="inline"
  110. :is-confirm-change="isConfirmChange"
  111. @change="handleChange">
  112. </unlinked-selector-picker>
  113. </view>
  114. </view>
  115. </view>
  116. </template>
  117. <script>
  118. const defaultProps = {
  119. label: 'label',
  120. value: 'value',
  121. children: 'children'
  122. }
  123. import { getColumns } from './utils'
  124. import SelectorPicker from './pickers/selector-picker'
  125. import MultiSelectorPicker from './pickers/multi-selector-picker'
  126. import UnlinkedSelectorPicker from './pickers/unlinked-selector-picker'
  127. export default {
  128. components: {
  129. SelectorPicker,
  130. MultiSelectorPicker,
  131. UnlinkedSelectorPicker
  132. },
  133. props: {
  134. value: [String, Number, Array],
  135. list: Array,
  136. mode: {
  137. type: String,
  138. default: 'selector'
  139. },
  140. level: {
  141. type: Number,
  142. default: 1
  143. },
  144. props: {
  145. type: Object
  146. },
  147. cancelText: {
  148. type: String,
  149. default: '取消'
  150. },
  151. cancelColor: String,
  152. confirmText: {
  153. type: String,
  154. default: '确定'
  155. },
  156. confirmColor: String,
  157. canHide: {
  158. type: Boolean,
  159. default: true
  160. },
  161. emptyColor: String,
  162. emptyText: {
  163. type: String,
  164. default: '暂无数据'
  165. },
  166. radius: String,
  167. columnNum: {
  168. type: Number,
  169. default: 5
  170. },
  171. loading: Boolean,
  172. closeOnClickMask: {
  173. type: Boolean,
  174. default: true
  175. },
  176. showMask: {
  177. type: Boolean,
  178. default: true
  179. },
  180. maskColor: {
  181. type: String,
  182. default: 'rgba(0, 0, 0, 0.4)'
  183. },
  184. dataset: Object,
  185. inline: Boolean,
  186. showHeader: {
  187. type: Boolean,
  188. default: true
  189. },
  190. animation: {
  191. type: Boolean,
  192. default: true
  193. },
  194. zIndex: {
  195. type: Number,
  196. default: 999
  197. }
  198. },
  199. data () {
  200. return {
  201. visible: false,
  202. containerVisible: false,
  203. maskBgColor: '',
  204. isConfirmChange: false,
  205. myValue: this.value,
  206. picker: {},
  207. pickerProps: Object.assign({}, defaultProps, this.props),
  208. pickerContentHeight: 34 * this.columnNum + 'px'
  209. }
  210. },
  211. computed: {
  212. isEmpty () {
  213. if (!this.list) return true
  214. if (this.list && !this.list.length) return true
  215. return false
  216. }
  217. },
  218. methods: {
  219. show () {
  220. if (this.inline) return
  221. this.visible = true
  222. setTimeout(() => {
  223. this.maskBgColor = this.maskColor
  224. this.containerVisible = true
  225. }, 20)
  226. },
  227. hide () {
  228. if (this.inline) return
  229. this.maskBgColor = ''
  230. this.containerVisible = false
  231. setTimeout(() => {
  232. this.visible = false
  233. }, 200)
  234. },
  235. handleCancel () {
  236. this.$emit('cancel', this.picker)
  237. if (this.canHide && !this.inline) {
  238. this.hide()
  239. }
  240. },
  241. handleConfirm () {
  242. if (this.isEmpty) {
  243. this.$emit('confirm', null)
  244. this.hide()
  245. } else {
  246. const picker = JSON.parse(JSON.stringify(this.picker))
  247. this.myValue = picker.value
  248. this.isConfirmChange = true
  249. this.$emit('confirm', this.picker)
  250. if (this.canHide) this.hide()
  251. }
  252. },
  253. handleChange ({ value, item, index, change }) {
  254. this.picker.value = value
  255. this.picker.item = item
  256. this.picker.index = index
  257. this.picker.change = change
  258. this.picker.dataset = this.dataset || {}
  259. this.isConfirmChange = false
  260. this.$emit('change', this.picker)
  261. },
  262. handleMaskTap () {
  263. if (this.closeOnClickMask) {
  264. this.hide()
  265. }
  266. },
  267. moveHandle () {},
  268. getColumnsInfo (value, type = 1) {
  269. let columnsInfo = getColumns({
  270. value,
  271. list: this.list,
  272. mode: this.mode,
  273. props: this.pickerProps,
  274. level: this.level
  275. }, type)
  276. if (columnsInfo) {
  277. if (this.mode === 'selector') {
  278. columnsInfo.index = columnsInfo.index[0]
  279. }
  280. } else {
  281. columnsInfo = {}
  282. }
  283. columnsInfo.dataset = this.dataset || {}
  284. return columnsInfo
  285. }
  286. },
  287. watch: {
  288. value (newVal) {
  289. this.myValue = newVal
  290. },
  291. myValue (newVal) {
  292. this.$emit('input', newVal)
  293. },
  294. visible (newVisible) {
  295. if (newVisible) {
  296. this.$emit('show')
  297. } else {
  298. this.$emit('hide')
  299. }
  300. },
  301. props (newProps) {
  302. this.pickerProps = Object.assign({}, defaultProps, newProps)
  303. }
  304. }
  305. }
  306. </script>
  307. <style lang="scss" scoped>
  308. @import "./style/picker.scss";
  309. </style>