美文网首页
vue自由拖拽、缩放组件

vue自由拖拽、缩放组件

作者: 手指乐 | 来源:发表于2019-10-11 13:46 被阅读0次

    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://www.haomeiwen.com/subject/htvtmctx.html