164 lines
3.4 KiB
Vue
164 lines
3.4 KiB
Vue
<template>
|
|
<article>
|
|
<section>
|
|
<veui-transfer
|
|
v-model="selected"
|
|
:datasource="coffees"
|
|
/>
|
|
</section>
|
|
<section>
|
|
<veui-transfer
|
|
v-model="selected"
|
|
:datasource="coffees"
|
|
ui="s"
|
|
/>
|
|
</section>
|
|
<p>Selected: {{ selected }}</p>
|
|
</article>
|
|
</template>
|
|
|
|
<script>
|
|
import { Transfer } from 'veui'
|
|
|
|
export default {
|
|
components: {
|
|
'veui-transfer': Transfer
|
|
},
|
|
data () {
|
|
return {
|
|
coffees: [
|
|
{
|
|
label: 'Infused',
|
|
value: 'infused',
|
|
children: [
|
|
{
|
|
label: 'Brewed',
|
|
value: 'brewed',
|
|
children: [
|
|
{
|
|
label: 'Drip brewed',
|
|
value: 'drip-brewed'
|
|
},
|
|
{
|
|
label: 'Filtered',
|
|
value: 'filtered'
|
|
},
|
|
{
|
|
label: 'Pour-over',
|
|
value: 'pour-over'
|
|
},
|
|
{
|
|
label: 'Immersion brewed',
|
|
value: 'immersion-brewed'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
label: 'French press',
|
|
value: 'french-press'
|
|
},
|
|
{
|
|
label: 'Cold brew',
|
|
value: 'cold-brew'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
label: 'Boiled',
|
|
value: 'boiled',
|
|
children: [
|
|
{
|
|
label: 'Percolated',
|
|
value: 'percolated'
|
|
},
|
|
{
|
|
label: 'Turkish',
|
|
value: 'turkish'
|
|
},
|
|
{
|
|
label: 'Moka',
|
|
value: 'moka'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
label: 'Espresso',
|
|
value: 'espresso',
|
|
children: [
|
|
{
|
|
label: 'Caffè Americano',
|
|
value: 'caffe-americano'
|
|
},
|
|
{
|
|
label: 'Cafe Lungo',
|
|
value: 'cafe-lungo'
|
|
},
|
|
{
|
|
label: 'Café Cubano',
|
|
value: 'cafe-cubano'
|
|
},
|
|
{
|
|
label: 'Caffè crema',
|
|
value: 'caffe-crema'
|
|
},
|
|
{
|
|
label: 'Cafe Zorro',
|
|
value: 'cafe-zorro'
|
|
},
|
|
{
|
|
label: 'Doppio',
|
|
value: 'doppio'
|
|
},
|
|
{
|
|
label: 'Espresso Romano',
|
|
value: 'espresso-romano'
|
|
},
|
|
{
|
|
label: 'Guillermo',
|
|
value: 'guillermo'
|
|
},
|
|
{
|
|
label: 'Ristretto',
|
|
value: 'ristretto'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
label: 'Milk coffee',
|
|
value: 'milk-coffee',
|
|
children: [
|
|
{
|
|
label: 'Flat white',
|
|
value: 'flat-white'
|
|
},
|
|
{
|
|
label: 'Latte',
|
|
value: 'latte'
|
|
},
|
|
{
|
|
label: 'Macchiato',
|
|
value: 'macchiato'
|
|
},
|
|
{
|
|
label: 'Cappuccino',
|
|
value: 'cappuccino'
|
|
},
|
|
{
|
|
label: 'White coffee',
|
|
value: 'white-coffee'
|
|
}
|
|
]
|
|
}
|
|
],
|
|
selected: []
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
section {
|
|
margin-bottom: 20px;
|
|
}
|
|
</style>
|