update checkbox style
This commit is contained in:
梁灏
parent
69460a549c
commit
3ea2461551
3 changed files with 122 additions and 65 deletions
|
|
@ -1,6 +1,6 @@
|
|||
<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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<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,
|
||||
checked: true,
|
||||
disabled: 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-1-1',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
title: 'leaf 1-1-2'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'parent 1-2',
|
||||
expand: true,
|
||||
children: [
|
||||
{
|
||||
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{
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue