123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283 |
- <template>
- <u-popup
- :show="show"
- @close="closeHandler"
- >
- <view class="u-picker">
- <u-toolbar
- v-if="showToolbar"
- :cancelColor="cancelColor"
- :confirmColor="confirmColor"
- :cancelText="cancelText"
- :confirmText="confirmText"
- :title="title"
- @cancel="cancel"
- @confirm="confirm"
- ></u-toolbar>
- <picker-view
- class="u-picker__view"
- :indicatorStyle="`height: ${$u.addUnit(itemHeight)}`"
- :value="innerIndex"
- :immediateChange="immediateChange"
- :style="{
- height: `${$u.addUnit(visibleItemCount * itemHeight)}`
- }"
- @change="changeHandler"
- >
- <picker-view-column
- v-for="(item, index) in innerColumns"
- :key="index"
- class="u-picker__view__column"
- >
- <text
- v-if="$u.test.array(item)"
- class="u-picker__view__column__item u-line-1"
- v-for="(item1, index1) in item"
- :key="index1"
- :style="{
- height: $u.addUnit(itemHeight),
- lineHeight: $u.addUnit(itemHeight),
- fontWeight: index1 === innerIndex[index] ? 'bold' : 'normal'
- }"
- >{{ getItemText(item1) }}</text>
- </picker-view-column>
- </picker-view>
- <view
- v-if="loading"
- class="u-picker--loading"
- >
- <u-loading-icon mode="circle"></u-loading-icon>
- </view>
- </view>
- </u-popup>
- </template>
- <script>
- import props from './props.js';
- export default {
- name: 'u-picker',
- mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
- data() {
- return {
-
- lastIndex: [],
-
- innerIndex: [],
-
- innerColumns: [],
-
- columnIndex: 0,
- }
- },
- watch: {
-
- defaultIndex: {
- immediate: true,
- handler(n) {
- this.setIndexs(n, true)
- }
- },
-
- columns: {
- immediate: true,
- handler(n) {
- this.setColumns(n)
- }
- },
- },
- methods: {
-
- getItemText(item) {
- if (uni.$u.test.object(item)) {
- return item[this.keyName]
- } else {
- return item
- }
- },
-
- closeHandler() {
- if (this.closeOnClickOverlay) {
- this.$emit('close')
- }
- },
-
- cancel() {
- this.$emit('cancel')
- },
-
- confirm() {
- this.$emit('confirm', {
- indexs: this.innerIndex,
- value: this.innerColumns.map((item, index) => item[this.innerIndex[index]]),
- values: this.innerColumns
- })
- },
-
- changeHandler(e) {
- const {
- value
- } = e.detail
- let index = 0,
- columnIndex = 0
-
- for (let i = 0; i < value.length; i++) {
- let item = value[i]
- if (item !== (this.lastIndex[i] || 0)) {
-
- columnIndex = i
-
- index = item
- break
- }
- }
- this.columnIndex = columnIndex
- const values = this.innerColumns
-
- this.setLastIndex(value)
- this.setIndexs(value)
- this.$emit('change', {
-
-
- picker: this,
-
- value: this.innerColumns.map((item, index) => item[value[index]]),
- index,
- indexs: value,
-
- values,
- columnIndex
- })
- },
-
- setIndexs(index, setLastIndex) {
- this.innerIndex = uni.$u.deepClone(index)
- if (setLastIndex) {
- this.setLastIndex(index)
- }
- },
-
- setLastIndex(index) {
-
-
- this.lastIndex = uni.$u.deepClone(index)
- },
-
- setColumnValues(columnIndex, values) {
-
- this.innerColumns.splice(columnIndex, 1, values)
-
- let tmpIndex = uni.$u.deepClone(this.innerIndex)
- for (let i = 0; i < this.innerColumns.length; i++) {
- if (i > this.columnIndex) {
- tmpIndex[i] = 0
- }
- }
-
- this.setIndexs(tmpIndex)
- },
-
- getColumnValues(columnIndex) {
-
-
- (async () => {
- await uni.$u.sleep()
- })()
- return this.innerColumns[columnIndex]
- },
-
- setColumns(columns) {
- this.innerColumns = uni.$u.deepClone(columns)
-
- if (this.innerIndex.length === 0) {
- this.innerIndex = new Array(columns.length).fill(0)
- }
- },
-
- getIndexs() {
- return this.innerIndex
- },
-
- getValues() {
-
-
- (async () => {
- await uni.$u.sleep()
- })()
- return this.innerColumns.map((item, index) => item[this.innerIndex[index]])
- }
- },
- }
- </script>
- <style lang="scss" scoped>
- @import "../../libs/css/components.scss";
- .u-picker {
- position: relative;
- &__view {
- &__column {
- @include flex;
- flex: 1;
- justify-content: center;
- &__item {
- @include flex;
- justify-content: center;
- align-items: center;
- font-size: 16px;
- text-align: center;
- /* #ifndef APP-NVUE */
- display: block;
- /* #endif */
- color: $u-main-color;
- &--disabled {
- /* #ifndef APP-NVUE */
- cursor: not-allowed;
- /* #endif */
- opacity: 0.35;
- }
- }
- }
- }
- &--loading {
- position: absolute;
- top: 0;
- right: 0;
- left: 0;
- bottom: 0;
- @include flex;
- justify-content: center;
- align-items: center;
- background-color: rgba(255, 255, 255, 0.87);
- z-index: 1000;
- }
- }
- </style>
|