58 lines
814 B
Vue
58 lines
814 B
Vue
|
<template>
|
||
|
|
<article>
|
||
|
|
<section>
|
||
|
|
<strong :class="{ tabular }">
|
||
|
|
{{ value }}
|
||
|
|
</strong>
|
||
|
|
<veui-checkbox v-model="tabular">
|
||
|
|
Tabular numbers
|
||
|
|
</veui-checkbox>
|
||
|
|
</section>
|
||
|
|
<veui-slider
|
||
|
|
v-model="value"
|
||
|
|
:step="1"
|
||
|
|
:min="19000101"
|
||
|
|
:max="21001231"
|
||
|
|
/>
|
||
|
|
</article>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { Checkbox, Slider } from 'veui'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
'veui-checkbox': Checkbox,
|
||
|
|
'veui-slider': Slider
|
||
|
|
},
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
tabular: true,
|
||
|
|
value: 20170320
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
section {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 24px;
|
||
|
|
}
|
||
|
|
|
||
|
|
strong {
|
||
|
|
font-family: "Baidu Number", sans-serif;
|
||
|
|
font-size: 32px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tabular {
|
||
|
|
font-variant-numeric: tabular-nums;
|
||
|
|
}
|
||
|
|
|
||
|
|
.veui-slider {
|
||
|
|
width: 50%;
|
||
|
|
margin-top: 24px;
|
||
|
|
}
|
||
|
|
</style>
|