docs_vue2/one/docs/demo/check-button-group/default.vue
2020-09-22 11:06:13 +08:00

66 lines
1.0 KiB
Vue

<template>
<article>
<section>
<h4>Normal size</h4>
<veui-check-button-group
v-model="selected"
:items="licenses"
/>
<p>Checked: {{ readable }}</p>
</section>
<section>
<h4>Small size</h4>
<veui-check-button-group
v-model="selected"
ui="s"
:items="licenses"
/>
<p>Checked: {{ readable }}</p>
</section>
</article>
</template>
<script>
import { CheckButtonGroup } from 'veui'
export default {
components: {
'veui-check-button-group': CheckButtonGroup
},
data () {
return {
selected: null,
licenses: [
{
label: 'MIT License',
value: 'mit'
},
{
label: 'BSD License',
value: 'bsd'
},
{
label: 'Apache License 2.0',
value: 'apache2'
}
]
}
},
computed: {
readable () {
return (this.selected || []).join(', ') || '-'
}
}
}
</script>
<style lang="less" scoped docs>
section {
margin-bottom: 20px;
}
h4 {
margin-top: 0;
}
</style>