lc-vue-size-scale

尺寸刻度尺
584
Install
npm install lc-vue-size-scale
Latest Version:1.0.0
Vue:3
License:MIT
Last Updated:Apr 24, 2024
Links: npm
Maintainer: lvliqi

lc-vue-size-scale

尺寸刻度尺

常用场景:

  • xxx

Demo

demo

安装

npm i lc-vue-size-scale

例子

<template>
  <div style='position: relative; height: 500px; display: flex; flex-direction: column;'>
    <div style='height: 20px; display: flex;'>
      <div style='width: 20px;' />
      <div style='flex: 1; position: relative;'>
        <px-scale />
      </div>
      <div style='width: 20px;' />
    </div>
    <div style='flex: 1;display: flex;'>
      <div style='width: 20px; position: relative;'>
        <px-scale placement='left' />
      </div>
      <div style='flex: 1; position: relative;' />
      <div style='width: 20px; position: relative;'>
        <px-scale placement='right' />
      </div>
    </div>
    <div style='height: 20px; display: flex;'>
      <div style='width: 20px;' />
      <div style='flex: 1; position: relative;'>
        <px-scale placement='bottom' />
      </div>
      <div style='width: 20px;' />
    </div>
  </div>
</template>

<script setup lang="ts">
import { PxScale } from 'lc-vue-size-scale';

</script>

<style scoped>

</style>

API

Attributes

属性名 说明 类型 默认值
v-model/modelValue 绑定值 string/array -

Events

事件名 说明 类型
update:model-value 数据绑定事件 string/array

Slots

插槽名 说明 参数
default 右侧图标 -

Related Packages

vue-auto-scale

vue大屏缩放组件

1,711
vue3-zoom-pan-pinch

vue3 zoom and pan

3,432 8
@enhances/bigscreen-fit-vue3

Vue3 大屏适配方案、scale、可不压缩、不黑边、适配浏览器缩放、不同分辨率、提供全屏...

488 3
@coddicat/vue-pinch-scroll-zoom

Vue component enabling scroll and zoom functionalities for content, leveraging m...

147,931 65

Version History

Version Released Vue License
1.0.0 3.x MIT