🌈 An enterprise-class UI components based on Ant Design and Vue. 🐜
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

44 lines
995 B

import { defineComponent } from 'vue';
export default defineComponent({
name: 'PresetPanel',
props: {
prefixCls: String,
presets: {
type: Array,
default: () => [],
},
onClick: Function,
onHover: Function,
},
setup(props) {
return () => {
if (!props.presets.length) {
return null;
}
return (
<div class={`${props.prefixCls}-presets`}>
<ul>
{props.presets.map(({ label, value }, index) => (
<li
key={index}
onClick={e => {
e.stopPropagation();
props.onClick(value);
}}
onMouseenter={() => {
props.onHover?.(value);
}}
onMouseleave={() => {
props.onHover?.(null);
}}
>
{label}
</li>
))}
</ul>
</div>
);
};
},
});