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

vue时间段选择器效果

代码语言：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.thrott.........完整代码请登录后点击上方下载按钮下载查看