Ant Design Vue or AntD Vue, is a useful UI framework made for Vue.js.
In this article, we’ll look at how to use it in our Vue apps.
Checkbox Groups
We can add checkbox groups with various options.
For example, we can write:
<template>
<div>
<a-checkbox-group
v-model="value"
name="checkboxgroup"
:options="plainOptions"
@change="onChange"
/>
<br>
<a-checkbox-group :options="plainOptions" :default-value="['Apple']" @change="onChange"/>
<br>
<a-checkbox-group :options="options" :value="['Pear']" @change="onChange"/>
<br>
<a-checkbox-group
:options="optionsWithDisabled"
disabled
:default-value="['Apple']"
@change="onChange"
>
<span slot="label" slot-scope="{ value }" style="color: red">{{ value }}</span>
</a-checkbox-group>
</div>
</template>
<script>
const plainOptions = ["Apple", "Pear", "Orange"];
const options = [
{ label: "Apple", value: "Apple" },
{ label: "Pear", value: "Pear" },
{ label: "Orange", value: "Orange" }
];
const optionsWithDisabled = [
{ value: "Apple" },
{ label: "Pear", value: "Pear" },
{ label: "Orange", value: "Orange", disabled: false }
];
export default {
data() {
return {
plainOptions,
options,
optionsWithDisabled,
value: []
};
},
methods: {
onChange(checkedValues) {
console.log(checkedValues);
console.log(this.value);
}
}
};
</script>
The a-checkbox-group lets us set various options.
v-model binds the checkbox to a reactive property.
options has an array of options. It can be an array of strings.
And it can have array of objects with the label and value properties.
label has the labels and value has the values.
Date Picker
We can add a date picker with the a-date-picker component.
For example, we can write:
<template>
<div>
<a-date-picker @change="onChange"/>
<br>
<a-month-picker placeholder="Select month" @change="onChange"/>
</div>
</template>
<script>
export default {
methods: {
onChange(date, dateString) {
console.log(date, dateString);
}
}
};
</script>
The a-month-picker component lets us select the month.
The change event is emitted with the date with selected date object.
And the dateString has the string representation of the date.
It also comes with the a-range-picker and a-week-picker to select the date range and the week:
<template>
<div>
<a-range-picker @change="onChange"/>
<br>
<a-week-picker placeholder="Select week" @change="onChange"/>
</div>
</template>
<script>
export default {
methods: {
onChange(date, dateString) {
console.log(date, dateString);
}
}
};
</script>
Customized Date Rendering
The rendering of the selected date can be changed by populating the dateRender slot:
<template>
<div>
<a-date-picker>
<template slot="dateRender" slot-scope="current, today">
<div class="ant-calendar-date" :style="getCurrentStyle(current, today)">{{ current.date() }}</div>
</template>
</a-date-picker>
<a-range-picker>
<template slot="dateRender" slot-scope="current">
<div class="ant-calendar-date" :style="getCurrentStyle(current)">{{ current.date() }}</div>
</template>
</a-range-picker>
<a-week-picker>
<template slot="dateRender" slot-scope="current">
<div class="ant-calendar-date" :style="getCurrentStyle(current)">{{ current.date() }}</div>
</template>
</a-week-picker>
</div>
</template>
<script>
export default {
methods: {
getCurrentStyle(current, today) {
const style = {};
if (current.date() === 1) {
style.border = "1px solid #1890ff";
style.borderRadius = "50%";
}
return style;
}
}
};
</script>
We set the styles with the getCurrentStyle method.
It takes the current and today parameters to set the border of the date according to whether it’s selected or not.
current.date() has the day of the month. So we render the first of the month with a circle border.
Conclusion
We can add checkbox groups and date pickers to let us add checkboxes and select dates.
