Vue-drag-scale NPM

vue-drag-scale

Vue3 component that simulates a user typing, selecting, and erasing text.

Checkout the offical project here.

Installation
Usage
Example

效果

npm.io

Installation

npm install --save vue-drag-scale

Global import

Install the component:

import { createApp } from 'vue' 
import vueDragScale from "vue-drag-scale";
import "vue-drag-scale/dist/style.css"; 
import App from './App.vue' 

const app = createApp(App) 
app.use(vueDragScale) 
app.mount('#app')

Manual import

<template>
  <div>
    <vueDragScale>
      <div class="course-view"></div>
    </vueDragScale>
  </div>
</template>

<script setup lang="ts">
import { vueDragScale } from "vue-drag-scale";
import "vue-drag-scale/dist/style.css";
</script>

<style scoped>
.course-view {
  height: 300px;
  width: 300px;
  background: red;
}
</style>

Properties

你可以使用以下属性:

参数	类型	默认值	说明
dragCode	String	Space	当按下约定拖拽键时，允许移动操作（自定义code请到https://juejin.cn/post/7029319401178398728查询）
scaleCode	String	Space	当按下约定缩放键时，允许缩放操作（自定义code请到https://juejin.cn/post/7029319401178398728查询）
scalePercentage	Number	0.05	每次缩放比例
minScalePercentage	Number	0.1	最小缩放比例
allowNativeScale	Boolean	false	是否允许原生缩放事件,比如ctrl + ,ctrl -