drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update checkbox style

Browse source
This commit is contained in:
梁灏 2017-10-25 14:33:22 +08:00
parent 69460a549c
commit 3ea2461551
3 changed files with 122 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
examples/routers/carousel.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div> <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> <Carousel-item>
<div class="demo-carousel">1</div> <div class="demo-carousel">1</div>
</Carousel-item> </Carousel-item>

176
examples/routers/tree.vue
View file

@ -1,87 +1,135 @@
<!--<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> <template>
<div> <Tree :data="data3" show-checkbox multiple></Tree>
<Tree :data="baseData" :load-data="loadData" show-checkbox multiple></Tree>
<Button @click="handleAdd">add</Button>
<Button @click="handleUpdate">update</Button>
</div>
</template> </template>
<script> <script>
export default { export default {
data () { data () {
return { return {
baseData: [ data3: [
{ {
expand: true,
title: 'parent 1', title: 'parent 1',
expand: true,
selected: true,
children: [ children: [
{
title: 'parent 1-0',
expand: false,
children: [],
loading: false
},
{ {
title: 'parent 1-1', title: 'parent 1-1',
expand: true, expand: true,
checked: true, disabled: true,
children: [ children: [
{ {
title: '<span style="color: red">leaf</span>', title: 'leaf 1-1-1',
render: (h) => { disabled: true
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', title: 'leaf 1-1-2'
}
]
},
{
title: 'parent 1-2',
expand: true,
children: [
{
title: 'leaf 1-2-1',
checked: true 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', title: 'leaf 1-2-1'
loading: false, }
children: [] ]
}
]
}
]
} }
]);
}, 2000);
} }
} }
};
</script> </script>

9
src/styles/mixins/checkbox.less
View file

@ -204,6 +204,15 @@
background-color: @primary-color; background-color: @primary-color;
border-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}-large {
.@{checkbox-prefix-cls}-indeterminate{ .@{checkbox-prefix-cls}-indeterminate{