shuju_ui/qsshujujugrid/_components/picker/hPicker.vue

<template>
    <view class="hPicker posi-absolute" v-if="is_show">

        <hPopup ref="popup"  :forbidden_event="true">
            <view class="con posi-fixed posi-fixed-bottom">

                <view class="act flew flew-between bgc-white">
                    <view class="cancel color-gray" @tap="cancel">取消</view>
                    <view class="title font-size28 color-gray" v-if="title">{{title}}</view>
                    <view class="sure " @tap.stop="sure">确定</view>
                </view>
                <picker-view class="picker-view bgc-white    " :value="value" @change="change" indicator-style="height:68upx">
                    <picker-view-column class="picker-view-item" v-for="(item,index) in list" :key="index">
                        <view class="item" v-for="(it,ind) in item" :key="ind">
                            {{range_key ? it[range_key] : it }}{{suffixes[index]||''}}
                        </view>
                    </picker-view-column>

                </picker-view>
            </view>
        </hPopup>


    </view>

</template>

<script>
    import hPopup from "../func/hPopup";

    export default {
        name: "hPicker",
        components: {hPopup},
        data() {
            return {
                is_show:false,
                _value:[],
            }

        },
        computed: {
            list() { //column 传参可是一个数组 也可是数组嵌套
                let column = this.column;
                let re = column;
                if (column.length === 1) {
                    re = [column]
                }
                return re;
            }

        },
        props: {
            column: {
                default() {
                    return []
                }
            },
            suffixes: {
                default() {
                    return []
                }
            },
            range_key: {
                default: ''
            },
            value: {
                default() {
                    return []
                }
            },
            title: ''
        },
        methods: {
            hide() {
                this.is_show = false;
            },
            show() {

                this.is_show = true;
            },
            cancel() {
                this.hide();
                this.$emit('cancel', {})
            },

            change(e) {

                let _value = e.detail.value;


                this._value = _value;
                this.$emit('change', {_value})
            },
            sure() {


                this.$emit('sure', this._value)

                this.hide()
            }
        },
        mounted() {
            this._value = this.list.map(v=>{
                return 0
            })


        }
    }
</script>

<style scoped lang="scss">

    .act {
        height: 90upx;
        line-height: 90upx;
        padding: 0 30upx;
    }

    .picker-view {
        height: 500upx;
        background-color: #fff;
    }

    .picker-view-item{
        height: 500upx;
    }
    .sure {
        color: #2C7BE8;
    }
    .con{
        z-index: 9999;
        height: 590upx;
        width: 750upx;

    }

    .item {
        height: 68upx;
        line-height: 68upx;
        text-align: center;
    }
</style>