npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-drag-subline

v1.0.6

Published

Vue 用于可调整大小和可拖动元素的组件并支持冲突检测与吸附对齐

Downloads

4

Readme

Latest Version on NPM Software License npm

说明

基于vue-draggable-resizable的fork版本,修复了官方版本的一些bug,新增了辅助线、元素对齐、冲突检测、吸附对齐等功能。

该fork版本修复的问题清单:

  • fix:增加右键菜单事件contextmenu
  • fix:开启自动对齐后,元素依据中线对齐可能会超出父容器边界的问题
  • fix:取消选中的行为优先绑定在父节点上
  • fix:冲突检测回退后没有再次触发resizing事件的bug

新增特征✨

  • 辅助线(新)
  • 元素对齐(新)
  • 冲突检测
  • 吸附对齐
  • 默认样式优化

功能预览

英文版演示地址 | 中文版演示地址

注意:英文版为官方原版,没有新增功能的演示。中文版为google翻译版本,新增功能在高级目录下可查看

新增Props

handleInfo 类型: Object必需: false默认: { size: 8, offset: -5, switch: true }

当使用transform:scale()进行缩放操作时,其中switch为是否让handle始终保持视觉效果不变,size为handle的大小(宽高相同), offset为handle的位置偏移,通常在自定义handle样式时需要设置。

<vue-drag-subline :handle-info="{size: 14,offset: -5,switch: true}" />

scaleRatio 类型: Number必需: false默认: 1

当使用transform:scale()进行缩放操作时,用来修复操作组件时鼠标指针与移动缩放位置有所偏移的情况

<vue-drag-subline :scale-ratio="0.6" />

isConflictCheck 类型: Boolean必需: false默认: false

定义组件是否开启冲突检测。

<vue-drag-subline :is-conflict-check="true" />

snap 类型: Boolean 必需: false 默认: false

定义组件是否开启元素对齐。

<vue-drag-subline :snap="true" />

snapTolerance 类型: Number 必需: false 默认: 5

当调用snap时,定义组件与元素之间的对齐距离,以像素(px)为单位。

<vue-drag-subline :snap="true" :snap-tolerance="20" />

新增Events

refLineParams 参数: params

返回参数是一个Object,里面包含vLinehLine,具体使用参考下面代码。

<div>
  <vue-drag-subline :snap="true" :snap-tolerance="20" @refLineParams="getRefLineParams" />
  <vue-drag-subline :snap="true" :snap-tolerance="20" @refLineParams="getRefLineParams" />
  <span class="ref-line v-line"
      v-for="item in vLine"
      v-show="item.display"
      :style="{ left: item.position, top: item.origin, height: item.lineLength}"
  />
  <span class="ref-line h-line"
      v-for="item in hLine"
      v-show="item.display"
      :style="{ top: item.position, left: item.origin, width: item.lineLength}"
  />
</div>

<script>
import VueDragSubline from 'vue-drag-subline'
import 'vue-drag-subline/dist/VueDragSubline.css'

export default {
  name: 'app',
  components: {
    VueDragSubline
  },
  data () {
    return {
      vLine: [],
      hLine: []
    }
  },
  methods: {
    getRefLineParams (params) {
      const { vLine, hLine } = params
      this.vLine = vLine
      this.hLine = hLine
    }
  }
}
</script>

其它属性

英文版

注意:英文版为官方原版

安装使用

$ npm install --save vue-drag-subline

全局注册组件

//main.js
import Vue from 'vue'
import VueDragSubline from 'vue-drag-subline'

// 导入默认样式
import 'vue-drag-subline/dist/VueDragSubline.css'
Vue.component('VueDragSubline', VueDragSubline)

局部注册组件

<template>
  <div style="height: 500px; width: 500px; border: 1px solid red; position: relative;">
    <vue-drag-subline :w="100" :h="100" v-on:dragging="onDrag" v-on:resizing="onResize" :parent="true">
      <p>Hello! I'm a flexible component. You can drag me around and you can resize me.<br>
      X: {{ x }} / Y: {{ y }} - Width: {{ width }} / Height: {{ height }}</p>
    </vue-drag-subline>
    <vue-drag-subline
      :w="200"
      :h="200"
      :parent="true"
      :debug="false"
      :min-width="200"
      :min-height="200"
      :isConflictCheck="true"
      :snap="true"
      :snapTolerance="20"
    >
    </vue-drag-subline>
  </div>
</template>

<script>
import VueDragSubline from 'vue-drag-subline'
import 'vue-drag-subline/dist/VueDragSubline.css'
export default {
  components: {VueDragSubline},
  data: function () {
    return {
      width: 0,
      height: 0,
      x: 0,
      y: 0
    }
  },
  methods: {
    onResize: function (x, y, width, height) {
      this.x = x
      this.y = y
      this.width = width
      this.height = height
    },
    onDrag: function (x, y) {
      this.x = x
      this.y = y
    }
  }
}
</script>