vue-poster-editor/lib/widgets/editor-percentage-scaler.html

A poster editor based on Vue.js

<span class="editor-percentage-scaler">
    <span class="scaler-wrapper">
        <span class="scaler-mask" @click="seek">
            <span
                class="scaler-bar"
                :style="{width: scaleOffset + 'px'}"
            ></span>
        </span>
        <div
            v-if="scale && elementLoaded"
            class="scaler-btn"
            :class="{active: isDragging}"
            :style="{left: scaleOffset - 9 + 'px'}"
            @mousedown="beginScale"
        >
            <span
                class="editor-tooltips scaler-tooltip-wrapper"
                :aria-label="scalePercentage"
            ></span>
        </div>
    </span>
    <button
        v-if="hasCropButton"
        class="scaler-crop-button"
        :class="{active: isInnerActive}"
        @click="switchCropper"
    >
        裁剪
    </button>
</span>