ivu-gradient-selector/README.md

线性渐变选择器

# ivu-gradient-selector

### 安装

```
npm install ivu-gradient-selector
```

> **由于依赖 `view-design`，务必在 `main.js` 中引入 `view-design`**

```js
import ViewUI from "view-design"
import "view-design/dist/styles/iview.css"
Vue.use(ViewUI)
```

### 引入并注册

```jss
import IvuGradientSelector from "ivu-gradient-selector"

export default {
  components: {
    IvuGradientSelector,
  },
}
```

### 在 `Vue` 项目中使用

```vue
<template>
  <div>
    <!-- ... -->
    <div style="width: 400px">
      <GradientSelector
        :startColor.sync="initialColor[0]"
        :endColor.sync="initialColor[1]"
        :range.sync="range"
      />
    </div>
  </div>
</template>
```

### 属性介绍（加 `*` 的为必传）

|       属性名       |  类型  |  默认值  | 介绍                          |
| :----------------: | :----: | :------: | ----------------------------- |
|   _defaultColor_   | String | #000000  | 点击清空后，展示的颜色        |
|    _barHeight_     | Number |    10    | 渐变条的高度，`10 ~ 100` 之间 |
| \***_startColor_** | String | #2193b0  | 渐变开始的颜色                |
|  \***_endColor_**  | String | #fb0000  | 渐变结束的颜色                |
|   \***_range_**    | Array  | [0, 100] | 渐变范围                      |

> 属性：_startColor_、_endColor_ 和 _range_，组件内部会自动调用 `$emit('update:[属性名]', val)` 更新最新的值，在绑定属性时，添加修饰符 `sync` 即可。若想自定义属性更新事件，绑定对应的 `update:[属性名]` 即可。