vuecssuiant-designantdreactantantd-vueenterprisefrontendui-designvue-antdvue-antd-uivue3vuecomponent
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
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> |
|
); |
|
}; |
|
}, |
|
});
|
|
|