色带组件（vue、react）。

演示效果

react 使用

git地址查看

https://gitee.com/jumping-little-stars/ribbon-color.git@TOC

https://gitee.com/jumping-little-stars/ribbon-color.git

npm安装

cnpm i ribbon-color 

vue使用（页面封装组件）

<template>
  <div class="colour">
    <div class="border" @click.stop="choose" :style="{cursor: disabled ? 'no-drop' : 'pointer'}">
      <ul class="color-item">
        <li
          v-for="(itemc, index) in showFirst"
          :key="index"
          :style="{ background: '#' + itemc }"
        ></li>
      </ul>
    </div>
    <div class="choose" v-show="visible">
      <ul
        v-for="(item, index) in colorList"
        :key="index"
        class="color-item"
        @click.stop="getColor(item.color, index)"
      >
        <li
          v-for="(itemc, index) in item.color"
          :key="index"
          :style="{ background: '#' + itemc }"
        ></li>
      </ul>
    </div>
	</div>
</template>
<script>
import color from "./colors.js";
export default {
		name: "colour-bar",
    data() {
	return {
		visible: false,
		showFirst: [],
		colorList: [],
		}
		},
	mounted() {
	 this.colorList = color.data.items.item;
	 	this.showFirst = color.data.items.item[0].color;
	},
	methods: {
	getColor(color) {
	    this.showFirst = color;
	    this.visible = false;
			},
	choose() {
		this.visible = !this.visible;
	},
	},
</script>
<style lang="scss">
.colour {
  display: block;
  background: transparent;
 .border .color-item{
   position: absolute;
    margin-left: 3px;
  }
  .el-input__inner {
    width: 260px !important;
  }
}

.border {
   width: 295px;
  height: 28px;
  background: transparent;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  padding: 3px;
  box-sizing: border-box;
  .color-item {
  list-style: none;
  display: flex;
  li {
    width: 30px;
    height: 20px;
  }
}
}
.choose {
  background: transparent;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  padding: 3px;
  border-top: 0px;
  position: fixed;
  z-index: 1002;
 
  .color-item {
  list-style: none;
  display: flex;
   padding: 0 3px;
  li {
    width: 30px;
    height: 20px;
  }
}
}

</style>

//colors.js

export default {
	data: {
		items: {
			density: [
				{
					name: 'BuGn',
					num: '7',
					type: 'seq',
					color: ['DFF7D5', 'CFF3BD', 'C1EFA9', 'B1EB93', 'A1E97C', '89E35C', '60D926'],
				},
				{
					name: 'Blues',
					num: '7',
					type: 'seq',
					color: ['FEE0D2', 'FCBBA1', 'FC9272', 'FB6A4A', 'EF3B2C', 'CB181D', '99000D'],
				},
				{
					name: 'Blues',
					num: '7',
					type: 'seq',
					color: ['FBEAD7', 'F9DBC3', 'F7D4AF', 'F5C399', 'F5B785', 'F1A566', 'ED8734'],
				},
				{
					name: 'Reds',
					num: '7',
					type: 'seq',
					color: ['FBEAD7', 'F8E6C4', 'F7D4AF', 'F3D49B', 'F5C785', 'F1B966', 'EDA134'],
				},

				{
					name: 'Oranges',
					num: '7',
					type: 'seq',
					color: ['F9F1D9', 'F8E6C4', 'F5E1B1', 'F3D49B', 'EFD18B', 'EBC56C', 'E3B33C'],
				},

				{
					name: 'YlGn',
					num: '7',
					type: 'seq',
					color: ['F9F5D9', 'F7EFC5', 'F5E9B1', 'F1E59D', 'EFDF8B', 'EBD76C', 'E3C93C'],
				},

				{
					name: 'YlGnBu',
					num: '7',
					type: 'seq',
					color: ['F0F8D5', 'EBF4BE', 'E5F5A9', 'DFF193', 'D7EF7C', 'CFEB5C', 'BDE324'],
				},

				{
					name: 'BuGn',
					num: '7',
					type: 'seq',
					color: ['F0F8D5', 'EBF4BE', 'DEEDA9', 'DDE993', 'D7E37C', 'CDDD5C', 'BBD126'],
				},


				{
					name: 'PuBuGn',
					num: '7',
					type: 'seq',
					color: ['F0F8D5', 'E1F1BF', 'DEEDA9', 'CDE993', 'C3E37C', 'B5DD5C', '9BD126'],
				},


				{
					name: 'PuBu',
					num: '7',
					type: 'seq',
					color: ['D7F5DF', 'C1F1CF', 'ADEBBF', '97E7AF', '83E1A1', '64DB89', '30CD60'],
				},

				{
					name: 'BuPu',
					num: '7',
					type: 'seq',
					color: ['D3F2EC', 'BCEAE3', 'ABE5D3', '95DFC9', '81D7BF', '6AD1B3', '2ABD93'],
				},

				{
					name: 'RdPu',
					num: '7',
					type: 'seq',
					color: ['D3F2EC', 'BCEAE3', 'A3E3DF', '8BDBD7', '74D5CF', '52C9C3', '18B7AF'],
				},

				{
					name: 'PuRd',
					num: '7',
					type: 'seq',
					color: ['CFF3F5', 'BAE9F2', 'A3E1EE', '87DFE7', '70D9E3', '56D3DD', '10BFCF'],
				},

				{
					name: 'OrRd',
					num: '7',
					type: 'seq',
					color: ['D3F0F6', 'BAE9F2', 'A3E1EE', '8FDBEB', '77CFE5', '61C7E0', '1CB5D7'],
				},

				{
					name: 'YlOrRd',
					num: '7',
					type: 'seq',
					color: ['D3F0F6', 'BAE9F2', 'A3E1EE', '8FD3E7', '77CFE5', '61C7E0', '1EA9CF'],
				},

				{
					name: 'YlOrBr',
					num: '7',
					type: 'seq',
					color: ['D1E9F5', 'B9DDEF', 'A1D1E9', '8BC5E3', '6EB7DD', '50A7D5', '148BC7'],
				},

				{
					name: 'Purples',
					num: '7',
					type: 'seq',
					color: ['D1E3F3', 'B9D3ED', 'A1C5E5', '89B5DF', '6CA5D7', '4E91CF', '126CBF'],
				},
			],
			item: [
				{
					name: 'Blues',
					num: '7',
					type: 'seq',
					color: ['FEE0D2', 'FCBBA1', 'FC9272', 'FB6A4A', 'EF3B2C', 'CB181D', '99000D'],
				},
				{
					name: 'Blues',
					num: '7',
					type: 'seq',
					color: ['FBEAD7', 'F9DBC3', 'F7D4AF', 'F5C399', 'F5B785', 'F1A566', 'ED8734'],
				},
				{
					name: 'Reds',
					num: '7',
					type: 'seq',
					color: ['FBEAD7', 'F8E6C4', 'F7D4AF', 'F3D49B', 'F5C785', 'F1B966', 'EDA134'],
				},

				{
					name: 'Oranges',
					num: '7',
					type: 'seq',
					color: ['F9F1D9', 'F8E6C4', 'F5E1B1', 'F3D49B', 'EFD18B', 'EBC56C', 'E3B33C'],
				},

				{
					name: 'YlGn',
					num: '7',
					type: 'seq',
					color: ['F9F5D9', 'F7EFC5', 'F5E9B1', 'F1E59D', 'EFDF8B', 'EBD76C', 'E3C93C'],
				},

				{
					name: 'YlGnBu',
					num: '7',
					type: 'seq',
					color: ['F0F8D5', 'EBF4BE', 'E5F5A9', 'DFF193', 'D7EF7C', 'CFEB5C', 'BDE324'],
				},

				{
					name: 'BuGn',
					num: '7',
					type: 'seq',
					color: ['F0F8D5', 'EBF4BE', 'DEEDA9', 'DDE993', 'D7E37C', 'CDDD5C', 'BBD126'],
				},


				{
					name: 'PuBuGn',
					num: '7',
					type: 'seq',
					color: ['F0F8D5', 'E1F1BF', 'DEEDA9', 'CDE993', 'C3E37C', 'B5DD5C', '9BD126'],
				},
				{
					name: 'BuGn',
					num: '7',
					type: 'seq',
					color: ['DFF7D5', 'CFF3BD', 'C1EFA9', 'B1EB93', 'A1E97C', '89E35C', '60D926'],
				},

				{
					name: 'PuBu',
					num: '7',
					type: 'seq',
					color: ['D7F5DF', 'C1F1CF', 'ADEBBF', '97E7AF', '83E1A1', '64DB89', '30CD60'],
				},

				{
					name: 'BuPu',
					num: '7',
					type: 'seq',
					color: ['D3F2EC', 'BCEAE3', 'ABE5D3', '95DFC9', '81D7BF', '6AD1B3', '2ABD93'],
				},

				{
					name: 'RdPu',
					num: '7',
					type: 'seq',
					color: ['D3F2EC', 'BCEAE3', 'A3E3DF', '8BDBD7', '74D5CF', '52C9C3', '18B7AF'],
				},

				{
					name: 'PuRd',
					num: '7',
					type: 'seq',
					color: ['CFF3F5', 'BAE9F2', 'A3E1EE', '87DFE7', '70D9E3', '56D3DD', '10BFCF'],
				},

				{
					name: 'OrRd',
					num: '7',
					type: 'seq',
					color: ['D3F0F6', 'BAE9F2', 'A3E1EE', '8FDBEB', '77CFE5', '61C7E0', '1CB5D7'],
				},

				{
					name: 'YlOrRd',
					num: '7',
					type: 'seq',
					color: ['D3F0F6', 'BAE9F2', 'A3E1EE', '8FD3E7', '77CFE5', '61C7E0', '1EA9CF'],
				},

				{
					name: 'YlOrBr',
					num: '7',
					type: 'seq',
					color: ['D1E9F5', 'B9DDEF', 'A1D1E9', '8BC5E3', '6EB7DD', '50A7D5', '148BC7'],
				},

				{
					name: 'Purples',
					num: '7',
					type: 'seq',
					color: ['D1E3F3', 'B9D3ED', 'A1C5E5', '89B5DF', '6CA5D7', '4E91CF', '126CBF'],
				},
			],
		},
	},
};