ivu-gradient-selector

安装

npm install ivu-gradient-selector

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

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

引入并注册

import IvuGradientSelector from "ivu-gradient-selector"

export default {
  components: {
    IvuGradientSelector,
  },
}

在 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:[属性名] 即可。