vue横向拖动进行数值增减效果代码-html代码-BFW代码库

vue横向拖动进行数值增减效果代码

代码语言：html

代码描述：vue横向拖动进行数值增减效果代码

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

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

<head>

    <meta charset="UTF-8">


    <style>
        .vue-scrubber {
            font-size: 15px;
            padding: 0.5em;
            border: 0;

            cursor: ew-resize;
            background: rgba(0, 0, 0, 0.08);
            color: white;
            -webkit-user-select: none;

            font-feature-settings: "lnum" 1;
        }

        .vue-scrubber:hover, .vue-scrubber:focus {
            outline: 0;
            box-shadow: none;
        }


        /** Demo CSS */

        body {
            font-family: "Helvetica Neue", "Arial", sans-serif;
            background: #6247AA;
            color: #E2CFEA;
            -webkit-font-smoothing: antialiased;

            padding: 2rem;
            max-width: 800px;
            margin: 0 auto;
        }

        h1 {
            font-weight: 100;
            letter-spacing: 2px;
        }

        h1 strong {
            letter-spacing: 0;
        }
        p {
            line-height: 1.4;
            -webkit-font-smoothing: antialiased;
            opacity: 0.8;
            font-size: 1rem;
        }

        .parameters {
            margin-top: 4rem;
            background: #6247AA;
        }

        label {
            display: block;
            margin-bottom: 2rem;
        }

        label span {
            display: inline-block;
            width: 100px;
        }

        code {
            font-family: "Monaco", monospaced;
            font-size: 15px;
        }
    </style>


</head>

<body translate="no">
    <div id="app">



        <div class="parameters">

            <h3>Demo</h3>

            <label for="">
                <span>Value</span>
                <scrubber :value="value" :min="min" :max="max" :steps="steps"></scrubber>           </label>

        </div>


        <div class="parameters">
            <h3>Props</h3>

            <label for="">
                <span>Min</span>
                <scrubber :value.sync="min" :min="0" :max="max" :steps="1">  </scrubber>
            </label>

            <label for="">
                <span>Max</span>
                <scrubber :value.sync="max" :min="0" :steps="2"></scrubber>
            </label>


            <label for="">
                <span>Steps</span>
                <scrubber :value.sync="steps" :min="0" :max="10" :steps="0.1"></scrubber>
            </label>
        </div>

    </div>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue.1.0.11.js"></script>
    <script>
        // Scrubber component
        // Lets the user change an input field value by dragging the mouse left/right.
        // Manual text input is still possible.

        Vue.component('scrubber', {
            data: function () {
                return {
                    isMouseDown: false,
                    initialMouse: null,
                    value: 0
                };

            },
            computed: {

                // returns the number of decimals based on the step value
                // e.g. "0.25" returns "2"
                decimals: function () {
                    return this.steps.toString().substr(this.steps.toString().indexOf(".")).length - 1;
                },

                // every time the value changes, we need to make sure it stays inside the min/max
                constrainedValue: function () {
                    return this.constrain(this.value, this.min, this.max, this.decimals);
                }
            },


            // props that the scrubber can receive
            // value: initial value
            // min: minimum value
            // max: maximum value
            // steps: increments for each pixel the mouse is moved
       .........完整代码请登录后点击上方下载按钮下载查看