rp-drag-resize/packages/rpDragResize2/dragResize.html

<div class="vdr" :style="style" :class="active ? 'active' : 'inactive'" @mousedown="bodyDown($event)" @touchstart="bodyDown($event)">
    <slot></slot>
    <div class="move-stick" v-if="pos == 'absolute'"><i class="iconfont iconyidong"></i></div>
    <div
        v-for="stick in sticks"
        class="vdr-stick"
        :class="['vdr-stick-' + stick]"
        :style="vdrStick(stick)"
        @mousedown.stop.prevent="stickDown(stick, $event)"
        @touchstart.stop.prevent="stickDown(stick, $event)"
    >
        <i class="iconfont" :class="stick=='bl'?'iconfangdar':'iconfangdal'"></i>
    </div>
    <div class="set-icon" @click="showSettingPanel = true">
        <i class="iconfont icon-leixing"></i>
    </div>
    <Modal class="set-modal" v-model="showSettingPanel" title="设置定位" width="260" :draggable="true" :scrollable="true">
        <div class="set-position">
            <label>定位：</label>
            <select v-model="position">
                <option :value="'relative'">相对</option>
                <option :value="'absolute'">绝对</option>
            </select>
        </div>
        <div class="set-position" v-if="position == 'relative'">
            <span>
                <label>大小：</label>
                <select v-model="heightAuto">
                    <option :value="true">内容</option>
                    <option :value="false">边框</option>
                </select>
            </span>
            <br />
            <br />
            <span v-if="heightAuto == false">
                <label>边框宽度：</label>
                <select v-model="widthType" @change="changeWidth">
                    <option :value="'num'">数值</option>
                    <option :value="'percent'">百分比</option>
                </select>
                <input type="number" v-if="widthType == 'num'" v-model="rawWidth" /><label v-if="widthType == 'num'">PX</label>
                <input type="number" v-if="widthType == 'percent'" v-model="perWidth" min="0" max="100" /><label v-if="widthType == 'percent'"
                    >%</label
                >
            </span>
            <span v-if="heightAuto == false">
                <label>边框高度：</label>
                <input type="number" v-model="rawHeight" /><label>PX</label>
                <br />
                <br />
            </span>
            <span>
                <label>上边距：</label>
                <input type="number" v-model="marginTop" /><label>PX</label>
            </span>
            <br />
            <br />
            <span>
                <label>下边距：</label>
                <input type="number" v-model="marginBottom" /><label>PX</label>
            </span>
            <br />
            <br />
            <span>
                <label>左边距：</label>
                <input type="number" v-model="marginLeft" /><label>PX</label>
            </span>
            <br />
            <br />
            <span>
                <label>右边距：</label>
                <input type="number" v-model="marginRight" /><label>PX</label>
            </span>
            <br />
            <br />
            <label>层级：</label>
            <span>
                <input type="number" v-model="zIndex" />
            </span>
            <i class="iconfont iconsaoba" @click="deleteElement"></i>
        </div>
        <div class="set-position" v-if="position == 'absolute'">
            <label>水平：</label>
            <select v-model="positionType" @change="changePositionType">
                <option :value="'left'">左距离</option>
                <option :value="'middle'">居中</option>
                <option :value="'right'">右距离</option>
            </select>
            <span v-if="positionType == 'left'"> <input type="number" v-model="rawLeft" disabled /><label>PX</label> </span>
            <span v-if="positionType == 'middle'"></span>
            <span v-if="positionType == 'right'"> <input type="number" v-model="rawRight" disabled /><label>PX</label> </span>
            <br />
            <br />
            <label>垂直：</label>
            <!-- <select v-model="verPosType" disabled>
                                <option :value="'top'">顶部</option>
                        </select> -->
            <p>顶部</p>
            <span v-if="verPosType == 'top'"> <input type="number" v-model="rawTop" disabled /><label>PX</label> </span>
            <br />
            <br />
            <label>宽度：</label>
            <select v-model="widthType" @change="changeWidth">
                <option :value="'num'">数值</option>
                <option :value="'percent'">百分比</option>
            </select>
            <span v-if="widthType == 'num'"> <input type="number" v-model="rawWidth" disabled /><label>PX</label> </span>
            <span v-if="widthType == 'percent'"> <input type="number" v-model="perWidth" min="0" max="100" /><label>%</label> </span>
            <br />
            <br />
            <label>层级：</label>
            <span><input type="number" v-model="zIndex"/></span>
            <i class="iconfont iconshanchu" @click="deleteElement"></i>
        </div>
        <div class="set-position">
            <button @click="copy">复制</button>
            <button @click="paste">粘贴</button>
        </div>
        <div slot="footer" style="height: 20px"></div>
    </Modal>
</div>