update checkbox style

梁灏
1 parent 69460a54
Showing 3 changed files with 121 additions and 64 deletions Show diff stats
examples/routers/carousel.vue
examples/routers/tree.vue
src/styles/mixins/checkbox.less
 <template>
     <div>
-        <Carousel v-model="v1" dots="inside" trigger="hover" autoplay loop radius-dot>
+        <Carousel v-model="v1" dots="inside" trigger="hover" autoplay loop radius-dot easing="fade">
             <Carousel-item>
                 <div class="demo-carousel">1</div>
             </Carousel-item>
+<!--<template>-->
+    <!--<div>-->
+        <!--<Tree :data="baseData" :load-data="loadData" multiple></Tree>-->
+        <!--<Button @click="handleAdd">add</Button>-->
+        <!--<Button @click="handleUpdate">update</Button>-->
+    <!--</div>-->
+<!--</template>-->
+<!--<script>-->
+    <!--export default {-->
+        <!--data () {-->
+            <!--return {-->
+                <!--baseData: [-->
+                    <!--{-->
+                        <!--expand: true,-->
+                        <!--title: 'parent 1',-->
+                        <!--children: [-->
+                            <!--{-->
+                                <!--title: 'parent 1-0',-->
+                                <!--expand: false,-->
+                                <!--children: [],-->
+                                <!--loading: false-->
+                            <!--},-->
+                            <!--{-->
+                                <!--title: 'parent 1-1',-->
+                                <!--expand: true,-->
+                                <!--checked: true,-->
+                                <!--children: [-->
+                                    <!--{-->
+                                        <!--title: '<span style="color: red">leaf</span>',-->
+                                        <!--render: (h) => {-->
+                                            <!--return h('Button', {-->
+                                                <!--props: {-->
+                                                    <!--type: 'primary',-->
+                                                    <!--size: 'small'-->
+                                                <!--},-->
+                                                <!--on: {-->
+                                                    <!--click: ({target}) => {-->
+                                                        <!--this.logger(target.textContent);-->
+                                                    <!--}-->
+                                                <!--}-->
+                                            <!--}, 'I\'m a button!');-->
+                                        <!--}-->
+                                    <!--}-->
+                                <!--]-->
+                            <!--}-->
+                        <!--]-->
+                    <!--}-->
+                <!--]-->
+            <!--};-->
+        <!--},-->
+        <!--methods: {-->
+            <!--handleAdd () {-->
+                <!--this.baseData.push(-->
+                    <!--{-->
+                        <!--title: 'test name',-->
+                        <!--checked: true-->
+                    <!--}-->
+                <!--);-->
+            <!--},-->
+            <!--handleUpdate () {-->
+                <!--const child = this.baseData[0].children[0].children[1];-->
+              <!--//  console.log(JSON.stringify(this.baseData), '\n', JSON.stringify(child));-->
+                <!--if (!child) return this.$Message.error('Node is async and is not loaded yet');-->
+                <!--else this.$set(child, 'checked', true);-->
+            <!--},-->
+            <!--logger (txt) {-->
+                <!--console.log(txt);-->
+            <!--},-->
+            <!--loadData (item, callback) {-->
+                <!--setTimeout(() => {-->
+                    <!--callback([-->
+                        <!--{-->
+                            <!--title: 'children-1',-->
+<!--//                            loading: false,-->
+                            <!--children: []-->
+                        <!--},-->
+                        <!--{-->
+                            <!--title: 'children-2',-->
+<!--//                            loading: false,-->
+                            <!--children: []-->
+                        <!--}-->
+                    <!--]);-->
+                <!--}, 2000);-->
+            <!--}-->
+        <!--}-->
+    <!--};-->
+<!--</script>-->
+
 <template>
-    <div>
-        <Tree :data="baseData" :load-data="loadData" show-checkbox multiple></Tree>
-        <Button @click="handleAdd">add</Button>
-        <Button @click="handleUpdate">update</Button>
-    </div>
+    <Tree :data="data3" show-checkbox multiple></Tree>
 </template>
 <script>
     export default {
         data () {
             return {
-                baseData: [
+                data3: [
                     {
-                        expand: true,
                         title: 'parent 1',
+                        expand: true,
+                        selected: true,
                         children: [
                             {
-                                title: 'parent 1-0',
-                                expand: false,
-                                children: [],
-                                loading: false
+                                title: 'parent 1-1',
+                                expand: true,
+                                disabled: true,
+                                children: [
+                                    {
+                                        title: 'leaf 1-1-1',
+                                        disabled: true
+                                    },
+                                    {
+                                        title: 'leaf 1-1-2'
+                                    }
+                                ]
                             },
                             {
-                                title: 'parent 1-1',
+                                title: 'parent 1-2',
                                 expand: true,
-                                checked: true,
                                 children: [
                                     {
-                                        title: '<span style="color: red">leaf</span>',
-                                        render: (h) => {
-                                            return h('Button', {
-                                                props: {
-                                                    type: 'primary',
-                                                    size: 'small'
-                                                },
-                                                on: {
-                                                    click: ({target}) => {
-                                                        this.logger(target.textContent);
-                                                    }
-                                                }
-                                            }, 'I\'m a button!');
-                                        }
+                                        title: 'leaf 1-2-1',
+                                        checked: true
+                                    },
+                                    {
+                                        title: 'leaf 1-2-1'
                                     }
                                 ]
                             }
                         ]
                     }
                 ]
-            };
-        },
-        methods: {
-            handleAdd () {
-                this.baseData.push(
-                    {
-                        title: 'test name',
-                        checked: true
-                    }
-                );
-            },
-            handleUpdate () {
-                const child = this.baseData[0].children[0].children[1];
-              //  console.log(JSON.stringify(this.baseData), '\n', JSON.stringify(child));
-                if (!child) return this.$Message.error('Node is async and is not loaded yet');
-                else this.$set(child, 'checked', true);
-            },
-            logger (txt) {
-                console.log(txt);
-            },
-            loadData (item, callback) {
-                setTimeout(() => {
-                    callback([
-                        {
-                            title: 'children-1',
-                            loading: false,
-                            children: []
-                        },
-                        {
-                            title: 'children-2',
-                            loading: false,
-                            children: []
-                        }
-                    ]);
-                }, 2000);
             }
         }
-    };
+    }
 </script>
@@ -204,6 +204,15 @@
             background-color: @primary-color;
             border-color: @primary-color;
         }
+        &.@{checkbox-prefix-cls}-disabled{
+            .@{checkbox-inner-prefix-cls}{
+                background-color: #f3f3f3;
+                border-color: @border-color-base;
+            }
+            .@{checkbox-inner-prefix-cls}:after{
+                border-color: @input-placeholder-color;
+            }
+        }
     }
     .@{checkbox-prefix-cls}-large {
         .@{checkbox-prefix-cls}-indeterminate{