other / mew-iview

Commit 3ea24615513932f970eeeac6277f424e94a3c180

Authored by 梁灏
1 parent 69460a54

update checkbox style

Showing 3 changed files with 121 additions and 64 deletions   Show diff stats
Inline Side-by-side
examples/routers/carousel.vue
  Show/Hide comments   View file @3ea2461
1 1 <template>
2 2 <div>
3   - <Carousel v-model="v1" dots="inside" trigger="hover" autoplay loop radius-dot>
  3 + <Carousel v-model="v1" dots="inside" trigger="hover" autoplay loop radius-dot easing="fade">
4 4 <Carousel-item>
5 5 <div class="demo-carousel">1</div>
6 6 </Carousel-item>
... ...
examples/routers/tree.vue
  Show/Hide comments   View file @3ea2461
  1 +<!--<template>-->
  2 + <!--<div>-->
  3 + <!--<Tree :data="baseData" :load-data="loadData" multiple></Tree>-->
  4 + <!--<Button @click="handleAdd">add</Button>-->
  5 + <!--<Button @click="handleUpdate">update</Button>-->
  6 + <!--</div>-->
  7 +<!--</template>-->
  8 +<!--<script>-->
  9 + <!--export default {-->
  10 + <!--data () {-->
  11 + <!--return {-->
  12 + <!--baseData: [-->
  13 + <!--{-->
  14 + <!--expand: true,-->
  15 + <!--title: 'parent 1',-->
  16 + <!--children: [-->
  17 + <!--{-->
  18 + <!--title: 'parent 1-0',-->
  19 + <!--expand: false,-->
  20 + <!--children: [],-->
  21 + <!--loading: false-->
  22 + <!--},-->
  23 + <!--{-->
  24 + <!--title: 'parent 1-1',-->
  25 + <!--expand: true,-->
  26 + <!--checked: true,-->
  27 + <!--children: [-->
  28 + <!--{-->
  29 + <!--title: '<span style="color: red">leaf</span>',-->
  30 + <!--render: (h) => {-->
  31 + <!--return h('Button', {-->
  32 + <!--props: {-->
  33 + <!--type: 'primary',-->
  34 + <!--size: 'small'-->
  35 + <!--},-->
  36 + <!--on: {-->
  37 + <!--click: ({target}) => {-->
  38 + <!--this.logger(target.textContent);-->
  39 + <!--}-->
  40 + <!--}-->
  41 + <!--}, 'I\'m a button!');-->
  42 + <!--}-->
  43 + <!--}-->
  44 + <!--]-->
  45 + <!--}-->
  46 + <!--]-->
  47 + <!--}-->
  48 + <!--]-->
  49 + <!--};-->
  50 + <!--},-->
  51 + <!--methods: {-->
  52 + <!--handleAdd () {-->
  53 + <!--this.baseData.push(-->
  54 + <!--{-->
  55 + <!--title: 'test name',-->
  56 + <!--checked: true-->
  57 + <!--}-->
  58 + <!--);-->
  59 + <!--},-->
  60 + <!--handleUpdate () {-->
  61 + <!--const child = this.baseData[0].children[0].children[1];-->
  62 + <!--// console.log(JSON.stringify(this.baseData), '\n', JSON.stringify(child));-->
  63 + <!--if (!child) return this.$Message.error('Node is async and is not loaded yet');-->
  64 + <!--else this.$set(child, 'checked', true);-->
  65 + <!--},-->
  66 + <!--logger (txt) {-->
  67 + <!--console.log(txt);-->
  68 + <!--},-->
  69 + <!--loadData (item, callback) {-->
  70 + <!--setTimeout(() => {-->
  71 + <!--callback([-->
  72 + <!--{-->
  73 + <!--title: 'children-1',-->
  74 +<!--// loading: false,-->
  75 + <!--children: []-->
  76 + <!--},-->
  77 + <!--{-->
  78 + <!--title: 'children-2',-->
  79 +<!--// loading: false,-->
  80 + <!--children: []-->
  81 + <!--}-->
  82 + <!--]);-->
  83 + <!--}, 2000);-->
  84 + <!--}-->
  85 + <!--}-->
  86 + <!--};-->
  87 +<!--</script>-->
  88 +
1 89 <template>
2   - <div>
3   - <Tree :data="baseData" :load-data="loadData" show-checkbox multiple></Tree>
4   - <Button @click="handleAdd">add</Button>
5   - <Button @click="handleUpdate">update</Button>
6   - </div>
  90 + <Tree :data="data3" show-checkbox multiple></Tree>
7 91 </template>
8 92 <script>
9 93 export default {
10 94 data () {
11 95 return {
12   - baseData: [
  96 + data3: [
13 97 {
14   - expand: true,
15 98 title: 'parent 1',
  99 + expand: true,
  100 + selected: true,
16 101 children: [
17 102 {
18   - title: 'parent 1-0',
19   - expand: false,
20   - children: [],
21   - loading: false
  103 + title: 'parent 1-1',
  104 + expand: true,
  105 + disabled: true,
  106 + children: [
  107 + {
  108 + title: 'leaf 1-1-1',
  109 + disabled: true
  110 + },
  111 + {
  112 + title: 'leaf 1-1-2'
  113 + }
  114 + ]
22 115 },
23 116 {
24   - title: 'parent 1-1',
  117 + title: 'parent 1-2',
25 118 expand: true,
26   - checked: true,
27 119 children: [
28 120 {
29   - title: '<span style="color: red">leaf</span>',
30   - render: (h) => {
31   - return h('Button', {
32   - props: {
33   - type: 'primary',
34   - size: 'small'
35   - },
36   - on: {
37   - click: ({target}) => {
38   - this.logger(target.textContent);
39   - }
40   - }
41   - }, 'I\'m a button!');
42   - }
  121 + title: 'leaf 1-2-1',
  122 + checked: true
  123 + },
  124 + {
  125 + title: 'leaf 1-2-1'
43 126 }
44 127 ]
45 128 }
46 129 ]
47 130 }
48 131 ]
49   - };
50   - },
51   - methods: {
52   - handleAdd () {
53   - this.baseData.push(
54   - {
55   - title: 'test name',
56   - checked: true
57   - }
58   - );
59   - },
60   - handleUpdate () {
61   - const child = this.baseData[0].children[0].children[1];
62   - // console.log(JSON.stringify(this.baseData), '\n', JSON.stringify(child));
63   - if (!child) return this.$Message.error('Node is async and is not loaded yet');
64   - else this.$set(child, 'checked', true);
65   - },
66   - logger (txt) {
67   - console.log(txt);
68   - },
69   - loadData (item, callback) {
70   - setTimeout(() => {
71   - callback([
72   - {
73   - title: 'children-1',
74   - loading: false,
75   - children: []
76   - },
77   - {
78   - title: 'children-2',
79   - loading: false,
80   - children: []
81   - }
82   - ]);
83   - }, 2000);
84 132 }
85 133 }
86   - };
  134 + }
87 135 </script>
... ...
src/styles/mixins/checkbox.less
  Show/Hide comments   View file @3ea2461
... ... @@ -204,6 +204,15 @@
204 204 background-color: @primary-color;
205 205 border-color: @primary-color;
206 206 }
  207 + &.@{checkbox-prefix-cls}-disabled{
  208 + .@{checkbox-inner-prefix-cls}{
  209 + background-color: #f3f3f3;
  210 + border-color: @border-color-base;
  211 + }
  212 + .@{checkbox-inner-prefix-cls}:after{
  213 + border-color: @input-placeholder-color;
  214 + }
  215 + }
207 216 }
208 217 .@{checkbox-prefix-cls}-large {
209 218 .@{checkbox-prefix-cls}-indeterminate{
... ...