vue时间段选择器效果-html代码-BFW代码库

代码语言：html

所属分类：选择器

代码描述：vue时间段选择器效果，可以选择不同的时间段

代码标签：效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>time range select</title>
    <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/tailwind.min.css">


    <style>

        .transition {
            transition-duration: .4s;
        }
        .cursor-grab {
            cursor: grab;
        }
        .cursor-grabbed {
            cursor: grabbing;
        }
    </style>


</head>

<body>

    <div class="min-w-screen bg-gray-800 min-h-screen flex justify-center items-center">
        <div class="max-w-sm bg-gray-200 p-4 pb-6 shadow-2 flex-1 my-6 rounded">
            <h1 class="text-2xl text-gray-800 my-6 text-center">Select range</h1>

            <div id="app">
                <div class="w-full flex">
                    <timeslider name="time-from" class="flex-1 bg-gray-300 relative overflow-hidden shadow-inner" v-model='from' :max-value="to"></timeslider>
                    <timeslider name="time-to" class="ml-2 flex-1 bg-gray-300 relative overflow-hidden shadow-inner" v-model='to' :min-value="from"></timeslider>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script>
    <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/hammer.min.js"></script>

    <script>
        Vue.component('timeslider', {
            props: {
                name: String,
                value: Number,
                maxValue: {
                    default: 86400,
                        type: Number
                    }, // max value that's available to set (in seconds)
                    minValue: {
                        default: 0,
                            type: Number
                        }, // minimum value that's available to set (in seconds)
                    },
                    template: `
                    <div ref="wrapper" :class="(moving ? 'cursor-grabbed' : 'cursor-pointer')">

                    <div class="absolute w-full h-full top-0 flex items-center justify-center">
                    <input type="hidden" :value="value" :name="name">
                    <div class="w-16 h-16 rounded-full bg-gray-400" :style="selectorPos"></div>
                    </div>
                    <ul ref="ribbon" :style="scroll" class="transition relative select-none list-none flex" tabindex="0" @keyup="handleKeyboard($event)" @keydown="handleKeyboard($event)" >
                    <li :ref="'step'+t.value" :class="stepState(t.value)" class="w-16 h-20 flex-shrink-0 text-center flex justify-center items-center" v-for="t in hours" @click="(t.value < minValue || t.value > maxValue) ? null : $emit('input', t.value)">
                    {{t.display}}
                    </li>
                    </ul>
                    <div class="absolute w-full h-full top-0 flex items-center justify-center pointer-events-none">
                    <div class="w-16 h-16 rounded-full pointer-events-auto" v-pan="onPan" :class="{'cursor-grab': !moving}"></div>
                    </div>
                    </div>
                    `,
                    data() {
                        return {
                            scroll: '', // how far (in pixels) should the stripe with hours be moved according to the current value
                            selectorPos: '', // how far to move touch/drag indicator
                            currentKeyFlag: '', // stores keypressEvent.key value for keypress action
                            stepValue: 1800,
                            moving: false,

                            timeModifier: 1
                        }
                    },
                    watch: {
                        value(newVal) {
                            this.calculateScroll()
                        }
                    },
                    created() {
                        this.throttle = function (fn, immediate = true) {
                            var wait = false;
                            return function () {
                                var args = arguments
                                var that = this

                                if (!wait) {
                                    if (immediate) {
                                        fn.apply(that, args)}
                                    wait = true;
                                    setTimeout(function () {
                                        wait = false;
                                        if (!immediate) {
                                            fn.apply(that, args)}
                                    },
                                        arguments[arguments.length-1]);
                                }
                            }
                        }
                        this.loopIncreasingly = this.throttle((stepValue, delay)=> {
                            console.log(this.moving);
                            if (this.moving) {
                                let isMax = this.isMax(stepValue)
                                if (!isMax) {
                                    this.alterValue(stepValue)
                                }
                                let newDelay = delay - (delay * this.timeModifier * .8) + 60
                                console.log(newDelay)
                                this.loopIncreasingly(this.stepValue, newDelay);
                            }
                        },
                            false);
                    },
                    methods: {
                        // mouse and touch support:
                        onPan(event) {
                            let vm = this,
                            dragArea = vm.$refs.wrapper.getBoundingClientRect(),
                            dragMax = (dragArea.right - dragArea.left) / 2,
                            dragLength = Math.abs(event.deltaX) >= dragMax ? (event.deltaX / Math.abs(event.deltaX)) * dragMax: event.deltaX

                            vm.stepValue = (dragLength / Math.abs(dragLength)) * 1800
                            vm.timeModifier = Math.abs(dragLength) / dragMax
                            vm.calculateSelectorPos(dragLength*1.2)

                            if (Math.abs(dragLength)/dragMa.........完整代码请登录后点击上方下载按钮下载查看