JSPM

ivu-gradient-selector

0.1.1
    • ESM via JSPM
    • ES Module Entrypoint
    • Export Map
    • Keywords
    • License
    • Repository URL
    • TypeScript Types
    • README
    • Created
    • Published
    • Downloads 5
    • Score
      100M100P100Q38133F
    • License MIT

    线性渐变选择器

    Package Exports

    • ivu-gradient-selector
    • ivu-gradient-selector/src/index.js

    This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ivu-gradient-selector) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

    Readme

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