vue-drag-scale
Vue3 component that simulates a user typing, selecting, and erasing text.
Checkout the offical project here.
Table of contents
效果
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 - |
Slots
你能使用以下插槽:
| 插槽名称 | 说明 |
|---|---|
| default | 内容 |
Features
暂时没有，欢迎来访