# uniapp-scale

> 仿薄荷健康的css刻度尺

Latest version **1.0.0** (published 2022-05-10) · ISC license · 0 weekly downloads

## Install

```sh
npm install uniapp-scale
pnpm add uniapp-scale
yarn add uniapp-scale
bun add uniapp-scale
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2022-05-10 |
| First published | 2022-05-10 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 173.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | mengcheng |
| Maintainers | cheng.meng |
| Keywords | Jx941022@ |

## Links

- npm: https://www.npmjs.com/package/uniapp-scale
- Repository: git@gitee.com:ZreoHero/vue-scale
- npm.io page: https://npm.io/package/uniapp-scale

## Recent versions

- 1.0.0 (latest) — 2022-05-10

## README

# vue语法微信小程序 css实现刻度尺

最近需要实现一个高度定制的刻度尺，但是网上现成的方案却是极少，找到过是原生微信开发的但不是 vue开发小程序。

本插件使用了vue语法和`scroll-view`标签以及其属性`scroll-left`。若想在除微信小程序其他小程序或项目中使用。只要是能满足以上两个条件均可使用该插件。

目前发现**支付宝小程序**、**QQ小程序**、**字节跳动(今日头条)小程序 **和 **百度小程序** 的开发文档中均有`scroll-view`标签和其属性` scroll-left`。因此这些小程序均可使用，可能在不同小程序中表现会有所差异，本人目前只是在微信小程序中使用。

### 1.效果图

### 2.使用
1. 将其当成自定义组件引入到项目中

```
import vueScale from '@/components/sapling-vue-scale/sapling-vue-scale.vue';
```

2. 页面调用

```html
<div>
      <view class='scale-title'>横向没有小数点</view>
      <view class='scale-value'>{{horizontaNoPointVal}}</view>
      <vue-scale :min="10"
                 :max="50"
                 :int="true"
                 :single="10"
                 :h="80"
                 :active="36"
                 :styles="styles"
                 @value="horizontaNoPointMethods"/>
    </div>
    <div>
      <view class='scale-title'>横向有小数点</view>
      <view class='scale-value'>{{horizontaPointVal}}</view>
      <vue-scale :min="10"
                 :max="50"
                 :int="false"
                 :single="10"
                 :h="80"
                 :active="36.1"
                 :styles="styles"
                 @value="horizontaPointMethods"/>
    </div>
```
```js
components: {
    vueScale,
},
data() {
   return {
     weight: 11,
     height: 180,
     styles: {
        line: '#dbdbdb',
        bginner: '#fbfbfb',
        bgoutside: '#ffffff',
        font: '#404040',
        fontColor: '#404040',
        fontSize: 16,
     },
     horizontaPointVal: '',
     horizontaNoPointVal: '',
  };
},
methods: {
    // 横向滚动有小数点
    horizontaPointMethods(msg) {
      this.horizontaPointVal = msg;
    },
    // 横向滚动没有小数点
    horizontaNoPointMethods(msg) {
      this.horizontaNoPointVal = msg;
    },
},
```
### 3.参数说明

|参数名|默认值|说明|
|:-:|:-----:| :----: |
|scrollLeft| 0|初始值（注意：初始值应在起始值和终止值之间）|
|scrollStart| 0|滚动区域起始值（注意：起始值不能大于终止值）|
|scrollEnd| 0|滚动区域终止值|
|maginL| 5|线间距|
|radix| false|是否是小数模式|

style选项

|参数名|默认值|说明|
|:-:|:-----:| :----: |
|line|#dbdbdb|刻度颜色|
|bginner|#fbfbfb|前景色颜色|
| bgoutside |#dbdbdb| 背景色颜色|
|lineSelect|#6643e7|选中线颜色|
|fontColo| #404040|刻度数字颜色|
|fontSiz|16|字体大小|


基于作者[Sapling](https://ext.dcloud.net.cn/plugin?id=4567)改进的刻度尺，
优化了拖动时显示的值与实际值不符的问题
优化动画效果
优化可以不展示小数点

---
_Source: https://npm.io/package/uniapp-scale · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._