vue-poster-editor/lib/widgets/editor-opacity-picker.html

A poster editor based on Vue.js

<div
    class="editor-opacity-picker editor-tooltips"
    :class="{active:active, inline:inline}"
    data-action="opacity-picker"
    aria-label="透明度"
>
    <label @click="toggleActive($event)">
        <input
        type="text"
        :readonly="!active"
        v-model="opacityPercent"
        @keydown="onKeydown($event)"
    ></label>
    <div class="editor-popup editor-popup-nw" v-if="active">
        <editor-range-picker
            ref='rangePicker'
            :value.sync="opacity"
            :max="1"
            :min="0"
            :wheel="true"
        ></editor-range-picker>
    </div>
</div>