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
957 B
44 lines
957 B
1 year ago
|
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={() => {
|
||
|
|
props.onClick(value);
|
||
|
|
}}
|
||
|
|
onMouseenter={() => {
|
||
|
|
props.onHover?.(value);
|
||
|
|
}}
|
||
|
|
onMouseleave={() => {
|
||
|
|
props.onHover?.(null);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{label}
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
},
|
||
|
|
});
|