other / mew-iview

Commit 9af2f01cb22c046698f0bdbedd2bf176f6b3ee0a

Authored by 梁灏
1 parent 9673dcb0

update ColorPicker

Showing 4 changed files with 117 additions and 8 deletions   Show diff stats
Inline Side-by-side
examples/routers/color-picker.vue
  Show/Hide comments   View file @9af2f01
1 1 <template>
2 2 <div style="margin: 100px;">
3 3 <!--<Input placeholder="请输入..." size="large" style="width: 50px;"></Input>-->
4   - <color-picker placement="bottom-start" size="large"></color-picker>
  4 + <!--<color-picker placement="bottom-start" size="large"></color-picker>-->
5 5 <!--<Date-picker type="date" placeholder="选择日期" size="large" style="width: 200px"></Date-picker>-->
6   - <color-picker placement="bottom-start" size="default"></color-picker>
  6 + <color-picker recommend alpha placement="bottom" size="default"></color-picker>
7 7 <!--<Date-picker type="date" placeholder="选择日期" style="width: 200px"></Date-picker>-->
8   - <color-picker placement="bottom-start" size="small"></color-picker>
  8 + <!--<color-picker placement="bottom-start" size="small"></color-picker>-->
9 9 <!--<Date-picker type="date" placeholder="选择日期" size="small" style="width: 200px"></Date-picker>-->
10 10 </div>
11 11 </template>
... ...
src/components/color-picker/color-picker.vue
  Show/Hide comments   View file @9af2f01
... ... @@ -7,9 +7,17 @@
7 7 </div>
8 8 </div>
9 9 <Dropdown-menu slot="list">
10   - <p>常用于各种自定义下拉内容的场景。</p>
11   - <div style="text-align: right;margin:10px;">
12   - <Button type="primary">关闭</Button>
  10 + <div :class="[prefixCls + '-picker']">
  11 + <div :class="[prefixCls + '-picker-panel']"></div>
  12 + <div :class="[prefixCls + '-picker-hue-slider']">
  13 + <Slider v-model="hueNumber" :min="0" :max="255"></Slider>
  14 + </div>
  15 + <div v-if="alpha" :class="[prefixCls + '-picker-alpha-slider']">
  16 + <Slider v-model="alphaNumber" :min="0" :max="100"></Slider>
  17 + </div>
  18 + <recommend-colors v-if="colors.length" :list="colors" :class="[prefixCls + '-picker-colors']"></recommend-colors>
  19 + <recommend-colors v-if="!colors.length && recommend" :list="recommendedColor" :class="[prefixCls + '-picker-colors', prefixCls + '-picker-colors-recommended']"></recommend-colors>
  20 + <Confirm></Confirm>
13 21 </div>
14 22 </Dropdown-menu>
15 23 </Dropdown>
... ... @@ -17,6 +25,9 @@
17 25 <script>
18 26 import Dropdown from '../dropdown/dropdown.vue';
19 27 import DropdownMenu from '../dropdown/dropdown-menu.vue';
  28 + import Slider from '../slider/slider.vue';
  29 + import RecommendColors from './recommend-colors.vue';
  30 + import Confirm from '../date-picker/base/confirm.vue';
20 31 import { oneOf } from '../../utils/assist';
21 32  
22 33 const prefixCls = 'ivu-color-picker';
... ... @@ -24,7 +35,7 @@
24 35  
25 36 export default {
26 37 name: 'ColorPicker',
27   - components: { Dropdown, DropdownMenu },
  38 + components: { Dropdown, DropdownMenu, Slider, Confirm, RecommendColors },
28 39 props: {
29 40 value: {
30 41 type: String
... ... @@ -33,11 +44,21 @@
33 44 type: Boolean,
34 45 default: false
35 46 },
  47 + recommend: {
  48 + type: Boolean,
  49 + default: false
  50 + },
36 51 format: {
37 52 validator (value) {
38 53 return oneOf(value, ['hsl', 'hsv', 'hex', 'rgb']);
39 54 }
40 55 },
  56 + colors: {
  57 + type: Array,
  58 + default () {
  59 + return [];
  60 + }
  61 + },
41 62 disabled: {
42 63 type: Boolean,
43 64 default: false
... ... @@ -61,7 +82,31 @@
61 82 data () {
62 83 return {
63 84 prefixCls: prefixCls,
64   - currentValue: this.value
  85 + currentValue: this.value,
  86 + hueNumber: 0,
  87 + alphaNumber: 0,
  88 + recommendedColor: [
  89 + '#2d8cf0',
  90 + '#19be6b',
  91 + '#ff9900',
  92 + '#ed3f14',
  93 + '#00b5ff',
  94 + '#19c919',
  95 + '#f9e31c',
  96 + '#ea1a1a',
  97 + '#9b1dea',
  98 + '#00c2b1',
  99 + '#ac7a33',
  100 + '#1d35ea',
  101 + '#42bd82',
  102 + '#f16b62',
  103 + '#ea4ca3',
  104 + '#0d94aa',
  105 + '#febd79',
  106 + '#3b90fc',
  107 + '#000000',
  108 + '#ffffff'
  109 + ]
65 110 };
66 111 },
67 112 computed: {
... ...
src/components/color-picker/recommend-colors.vue 0 → 100644
  Show/Hide comments   View file @9af2f01
  1 +<template>
  2 + <div>
  3 + <template v-for="(item, index) in list">
  4 + <span><em :style="{'background': item}"></em></span>
  5 + <br v-if="(index + 1) % 10 === 0 && index !== 0 && (index + 1) !== list.length">
  6 + </template>
  7 + </div>
  8 +</template>
  9 +<script>
  10 + export default {
  11 + props: {
  12 + list: Array
  13 + },
  14 + data () {
  15 + return {
  16 +
  17 + };
  18 + },
  19 + methods: {
  20 +
  21 + }
  22 + };
  23 +</script>
0 24 \ No newline at end of file
... ...
src/styles/components/color-picker.less
  Show/Hide comments   View file @9af2f01
... ... @@ -21,4 +21,45 @@
21 21 height: 14px;
22 22 top: 3px;
23 23 }
  24 +
  25 + &-picker{
  26 + padding: 8px 8px 0;
  27 + &-panel{
  28 + width: 200px;
  29 + height: 200px;
  30 + margin: 0 auto;
  31 + background: #47cb89;
  32 + border-radius: 50%;
  33 + }
  34 + &-hue-slider{
  35 +
  36 + }
  37 + &-alpha-slider{
  38 +
  39 + }
  40 + &-colors{
  41 + margin-top: 8px;
  42 + span{
  43 + display: inline-block;
  44 + width: 18px;
  45 + height: 18px;
  46 + em{
  47 + display: block;
  48 + width: 16px;
  49 + height: 16px;
  50 + border: 1px solid transparent;
  51 + cursor: pointer;
  52 + border-radius: 2px;
  53 + }
  54 + }
  55 + }
  56 + &-colors-recommended{
  57 + span:last-child em{
  58 + border: 1px solid #6b6f78;
  59 + }
  60 + }
  61 + .@{picker-prefix-cls}-confirm{
  62 + margin-top: 8px;
  63 + }
  64 + }
24 65 }
25 66 \ No newline at end of file
... ...