vue创建色带组件。

如图所示：

<template><div class="colour"><div class="border" @click.stop="choose" :style="{cursor: disabled ? 'no-drop' : 'pointer'}"><ul class="color-item"><liv-for="(itemc, index) in showFirst":key="index":style="{ background: '#' + itemc }"></li></ul></div><div class="choose" v-show="visible"><ulv-for="(item, index) in colorList":key="index"class="color-item"@click.stop="getColor(item.color, index)"><liv-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.jsexport 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'],},],},},
};

vue创建色带组件。相关推荐

modal组件 vue_Vue 2.0学习笔记：使用Vue创建Modal组件
Modal弹框在Web应用或者Web页面上非常常见,很多时候在不同的项目都会重写这样的一个Modal弹框.为了能偷懒,思考了一下,能不能写一个组件,比如说使用Vue创建一个组件,一个Modal组件,让 ...
Vue创建自定义组件，并详解整个创建自定义组件的过程
在vue开发项目中想自定义一个自己的组件,于是在网上找一下教程,教程基本的都一样,但是都不是很详细,我就按照网上的教程从头到尾学习了一遍,文章中如果有不正确的,还请各位大佬指出,共同进步. vue自定 ...
vue 创建动态组件
动态组件:官网介绍通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,我们让多个组件可以使用同一个挂载点.根据 v-bind:is="组件名" ...
Vue创建组件的三种方式
1.使用 Vue.extend 来创建全局的Vue组件 <div id="app"><!-- 如果要使用组件,直接,把组件的名称,以 HTML 标签的形式,引入到 ...
vue怎么自己创建组件并引用_Vue 实现创建全局组件,并且使用Vue.use() 载入方式
自定义vue组件,一般是局部引用的方式载入,使用的时候,在应用的组件中使用 import moduleName from 'module' 导入,在components中注册 {{info.title ...
render注册一个链接组件_详解vue 动态加载并注册组件且通过 render动态创建该组件...
基于 iview Tabs 组件实现功能:为每个 tab 动态创建不同的.特定的组件内容,而不需要大量的 import 组件并进行 component 注册 Index.vue import loa ...
Vue.js 3 Step 创建一个组件
Step1:Vue.extend()创建组件 Step2:Vue.component()注册组件,注册的标签一定要用小写 Step3:挂载点使用组件 <!doctype html> < ...
render vue 添加类_详解vue 动态加载并注册组件且通过 render动态创建该组件
基于 iview Tabs 组件实现功能:为每个 tab 动态创建不同的.特定的组件内容,而不需要大量的 import 组件并进行 component 注册 Index.vue import loa ...
使用vue创建一个遮罩组件_用于输入遮罩的另一个Vue组件
使用vue创建一个遮罩组件语音输入蒙版 (vue-input-mask) Yet another Vue component for input masking. Based on react-in ...

vue创建色带组件。

vue创建色带组件。相关推荐

最新文章

热门文章