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