open-index/open-npm huggingface dataset:
npm package: @lhx1027/shared-ui-components
Description: ## Project setup ``` npm install ```
Latest version: 0.1.1
Deprecated: do not use it

# shared-ui-components

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Lints and fixes files
```
npm run lint
```
npm package: @lhy-component/canvas-ruler
Description: 一个基于vue3的canvas标尺组件.
Latest version: 1.0.1

# canvas-ruler

一个基于vue3的canvas标尺组件.

## 功能

- 支持横向/竖向

- 支持指定origin点位置缩放

- 支持多主题配置

## 安装

`pnpm add @lhy-component/canvas-ruler`

或

`npm install -S @lhy-component/canvas-ruler`

或

`yarn add @lhy-component/canvas-ruler`

## 使用

局部引用

```
import '@lhy-component/canvas-ruler/dist/style.css'
import { CanvasRuler } from '@lhy-component/canvas-ruler'

// vue组件上
components: { CanvasRuler },
```

全局引用

```
import '@lhy-component/canvas-ruler/dist/style.css'
import \* as CanvasRuler from '@lhy-component/canvas-ruler'

app.use(CanvasRuler)

```

组件调用

```
<div class="container">
  <CanvasRuler />
  <CanvasRuler direction="vertical" />
</div>
```



## 样式

--canvas-ruler-border-color: 标尺边框颜色

--canvas-ruler-size: 标尺宽度/高度，默认会自动计算：coordinateLineWidth[2] + 6 + 'px'

更多主题颜色通过themeOption配置项传入



## 组件配置

| 属性                    | 描述                                                 | 类型                                                                                                  | 默认值     |
| :---------------------- | :--------------------------------------------------- | :---------------------------------------------------------------------------------------------------- | :--------- |
| modelValue              | 原点坐标值，原点位置由originValue决定                | Number                                                                                                | 0          |
| direction               | 方向。horizonal-横向；vertical-竖向                  | String                                                                                                | horizonal  |
| scale                   | 基于原点位置缩放。范围[0, 10]                        | Number                                                                                                | 1          |
| originValue             | 原点位置值，坐标值均相对于该位置                     | Number                                                                                                | 0          |
| interval                | 间隔xx像素合并为一个坐标点                           | Number                                                                                                | 10         |
| coordinateIntervalCount | 每隔xx个interval显示为大小坐标点                     | Number[]                                                                                              | [5, 10]    |
| coordinateLineWidth     | 默认坐标点、大小坐标点的线条长度                     | Number[]                                                                                              | [4, 8, 12] |
| themeOption             | 主题配置                                             | bgColor: string; // 背景颜色 <br /> textColor: string // 文本颜色 <br/> lineColor: string // 线条颜色 | -          |
| theme                   | 主题，未指定themeOption时使用。light-亮色；dark-暗黑 | String                                                                                                | light      |