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
暂时没有,欢迎来访