vue自由拖拽、缩放组件

github地址:https://github.com/kirillmurashov/vue-drag-resize

  • 安装:
    npm i -s vue-drag-resize

  • 使用:

<template>
  <div>
    <VueDragResize :isActive="true"  :isResizable="false" >
      <img src="../assets/logo.png" v-drag height="100px" width="100px" />
    </VueDragResize>
  </div>
</template>

<style>
.vdr.active:before{
  outline: none
}
</style>
    
<script>
import VueDragResize from "vue-drag-resize";
export default {
  components: {
    VueDragResize
  },
  data() {
    return {};
  },
  methods: {},
  mounted() {
    
  }
};
</script>

:isResizable="false":不支持缩放,只支持拖拽
outline: none:去除拖拽组件的边框

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 简说Vue (组件库) https://github.com/ElemeFE/element" 饿了么出品的VUE...
    Estrus丶阅读 1,803评论 0 1
  • UI组件 element- 饿了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的组件库 m...
    王喂马_阅读 6,484评论 1 77
  • UI组件 element- 饿了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的组件库 m...
    小姜先森o0O阅读 9,617评论 0 72
  • 基于Vue的一些资料 内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 element★...
    尝了又尝阅读 1,175评论 0 1
  • 项目中需要对div进行拖拽缩放,需要有控制面板8个控制点的那种,原以为这么常见的效果应该能搜索到很多相关插件,然而...
    小虫巨蟹阅读 6,245评论 10 28