naive-ui
Version:
A Vue 3 Component Library. Fairly Complete, Theme Customizable, Uses TypeScript, Fast
43 lines • 1.05 kB
JavaScript
import { defineComponent, h } from 'vue';
export default defineComponent({
name: 'TimePickerPanelCol',
props: {
clsPrefix: {
type: String,
required: true
},
data: {
type: Array,
required: true
},
activeValue: {
type: [Number, String],
default: null
},
// It should be required but vue's type seems to have bugs
onItemClick: Function
},
render() {
const {
activeValue,
onItemClick,
clsPrefix
} = this;
return this.data.map(item => {
const {
label,
disabled,
value
} = item;
const active = activeValue === value;
return h("div", {
key: label,
"data-active": active ? '' : null,
class: [`${clsPrefix}-time-picker-col__item`, active && `${clsPrefix}-time-picker-col__item--active`, disabled && `${clsPrefix}-time-picker-col__item--disabled`],
onClick: onItemClick && !disabled ? () => {
onItemClick(value);
} : undefined
}, label);
});
}
});