# re-components

> > re-components

Latest version **1.8.1** (published 2019-12-03) · 0 weekly downloads

## Install

```sh
npm install re-components
pnpm add re-components
yarn add re-components
bun add re-components
```

## 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.8.1 |
| Published | 2019-12-03 |
| First published | 2019-07-11 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 6.8 MB |
| Known vulnerabilities | 0 (+26 in 2 direct dependencies) |
| Install scripts | no |
| Maintainers | rex.sun |

## Links

- npm: https://www.npmjs.com/package/re-components
- npm.io page: https://npm.io/package/re-components

## Dependencies (6)

- [vue](https://npm.io/package/vue.md) ^2.6.10
- [axios](https://npm.io/package/axios.md) ^0.19.0
- [core-js](https://npm.io/package/core-js.md) ^3.3.2
- [html2canvas](https://npm.io/package/html2canvas.md) ^1.0.0-rc.5
- [vue-class-component](https://npm.io/package/vue-class-component.md) ^7.0.2
- [vue-property-decorator](https://npm.io/package/vue-property-decorator.md) ^8.3.0

## Recent versions

- 1.8.1 (latest) — 2019-12-03
- 1.8.0 — 2019-12-03
- 1.8.2 — 2019-12-03
- 1.7.1 — 2019-08-20
- 1.7.0 — 2019-08-20
- 1.6.2 — 2019-08-15
- 1.6.1 — 2019-08-15
- 1.6.0 — 2019-08-15
- 1.5.17 — 2019-08-15
- 1.5.16 — 2019-08-15
- 1.5.15 — 2019-08-15
- 1.5.14 — 2019-08-15
- 1.5.13 — 2019-08-15
- 1.5.12 — 2019-08-15
- 1.5.11 — 2019-08-15
- … 35 more at https://npm.io/package/re-components/versions

## README

# re-components

> re-components

## Build Setup

``` bash
// 国际化语言切换----------------------------------------
已全局注册，切换语言方法：this.$ils8(lang)
语言现在只支持：en(英文),ZHCN(简体中文),ZHTW(繁体中文)
该功能先只支持在main文件中导入的时候调用，如果是想实现点击按钮切换语言，
要局部刷新所有组件，不然只有当组件触发时才会进行语言的切换刷新。

//alert组件----------------------------------------------
已全局注册，使用方法：this.alert(msg,type,time)
msg: 提示信息
type: 弹窗类型（default/success/error/info）
time: 消息停留时间（单位：秒）

//图片压缩-----------------------------------------------
<re-compress :size="{maxWidth: 100,maxHeight: 100}"></re-compress>
支持参数： size
size: { type: Object, default: { maxWidth: 400,maxHeight: 400 } }#压缩后图片尺寸

//drag组件----------------------------------------------
实现多个list之间的相互拖拽
<re-drag :listMap="listMap"></re-drag>
listMap: {one: [1,2,3], two: [4,5,6], three: [7,8,9]}#会生成3个列，分别是123,456和789
回调事件@change：拖拽完成之后触发，返回调整之后的listMap

//dropdown组件------------------------------------------
支持插槽，使用了drop-link插槽后text字段失效
<re-drop-down :width="120">
    <template slot="drop-link">
        <span>你好</span>
    </template>
    <template slot="drop-down">
        <div v-for="item in list" class="drop-down-item" :value="item.value">{{item.label}}</div>
    </template>
</re-drop-down>
配置参数：
text: {type: String, default: ''},#文本
width: {type: Number, default: 80}#下拉框宽度

// menu组件----------------------------------------------
支持插槽，使用方法
<re-menu :options="menuList" :default="2">
   <template slot-scope="props">
      <span :value="props.value">{{ props.label }}</span>
   </template>
   <template slot="rightTools">
      <span>司机上传回单</span>
   </template>
</re-menu>
menuList: [{label: '全部运单',value: 1,disabled: true}, {label: '在途跟踪',value: 2}]
支持配置参数：
    options: { type: Array, required: true },#下来内容的配置数组
    default: { type: [String, Number], default: '' },#默认选中的值
    backgroundColor: { type: String, default: '#fff' },#背景颜色
    textColor: { type: String, default: '#a0a0a0' },#字体颜色
    activeTextColor: { type: String, default: 'red' }#选中字体的高亮颜色

// progress组件------------------------------------------
进度条组件分2种，线型的和圈型的。
线型：
<re-line :progress="progress"></re-progress>
配置参数：
width: {type: Number, default: 250},#进度条宽度
height: {type: Number, default: 6 },#进度条高度
isInner: { type: Boolean, default: return true },#字体文字
color: {type: String, default: '#409eff'},#进度条颜色
progress: {type: Number, default: 50, validator: val => val >= 0 && val <= 100}#当前进度
圈型：
<re-circle :progress="progress"></re-progress-circle>
配置参数：
radius: {type: Number, default: 50},#进度条半径
strokeWidth: {type: Number, default: 8},#进度条宽度
color: {type: String, default: '#409eff'},#进度条颜色
progress: {type: Number, default: 50,validator: val => val >= 0 && val <= 100}#当前进度

//页面截图------------------------------------------------
<re-screenshot @onImageChange="onImageChange" targetId="saveImage"></re-screenshot>
支持插槽自定义按钮样式，但要绑定saveAsImage事件: saveAsImage()。如下：
<screenshot @onImageChange="onImageChange" targetId="saveImage">
    <template slot="custom">
        <button class='custom-btn-style' @click="saveAsImage">截图</button>
    </template>
</screenshot>
配置参数：
msg: { default: '截图', type: String }, #按钮名称
fileName: { default: '截图', type: String }, #下载下来图片名称
targetId: { required: true, type: String } #目标截图dom元素id *一定是id

//开关组件------------------------------------------------
<re-switch @change="switchChange"></re-switch>
配置参数：
_isDisabled: {type: Boolean,default: false },#是否禁用
activeColor: {type: String,default: 'rgb(19, 206, 102)'},#打开颜色
inactiveColor: {type: String,default: 'rgb(255, 73, 73)'},#关闭颜色
width: {type: Number,default: 40 }#按钮宽度

//上传组件------------------------------------------------
<re-upload :url="'https://jsonplaceholder.typicode.com/posts/'" @change="change"></re-upload>
支持配置参数：
tips: { type: String, default: '只能上传jpg/png文件，且不超过500kb' },#tips提示
fileType: {type: Array,default: ['image/jpeg', 'image/png', 'image/jpg']},#上传文件类型限制
fileSize: { type: Number, default: 2 },#上传文件大小限制
fileAmount: { type: Number, default: 9 },#上传文件数量限制
url: { type: String, required: true }#上传url

```
[github地址-分支（typescript）](https://github.com/Rex-Xinchao/re-components).

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