Browse Source

🚀

master
wangxiang 2 years ago
parent
commit
94c3ba3f08
  1. 18
      src/components/Dropdown/src/Dropdown.vue
  2. 8
      src/layouts/default/header/components/user-dropdown/index.vue

18
src/components/Dropdown/src/Dropdown.vue

@ -1,10 +1,10 @@
<template> <template>
<Dropdown :trigger="trigger" v-bind="$attrs"> <Dropdown :class="[prefixCls]" :trigger="trigger" v-bind="$attrs">
<span> <span>
<slot/> <slot/>
</span> </span>
<template #overlay> <template #overlay>
<Menu :selectedKeys="selectedKeys"> <Menu :class="`${prefixCls}--menu`" :selectedKeys="selectedKeys">
<template v-for="item in dropMenuList" :key="`${item.event}`"> <template v-for="item in dropMenuList" :key="`${item.event}`">
<MenuItem <MenuItem
v-bind="getAttr(item.event)" v-bind="getAttr(item.event)"
@ -44,6 +44,7 @@
import { Icon } from '/@/components/Icon'; import { Icon } from '/@/components/Icon';
import { omit } from 'lodash-es'; import { omit } from 'lodash-es';
import { isFunction } from '/@/utils/is'; import { isFunction } from '/@/utils/is';
import { useDesign } from '/@/hooks/web/useDesign';
export default defineComponent({ export default defineComponent({
name: 'BasicDropdown', name: 'BasicDropdown',
@ -79,6 +80,7 @@
}, },
emits: ['menuEvent'], emits: ['menuEvent'],
setup(props, { emit }) { setup(props, { emit }) {
const { prefixCls } = useDesign('basic-dropdown');
function handleClickMenu(item: DropMenu) { function handleClickMenu(item: DropMenu) {
const { event } = item; const { event } = item;
const menu = props.dropMenuList.find((item) => `${item.event}` === `${event}`); const menu = props.dropMenuList.find((item) => `${item.event}` === `${event}`);
@ -98,6 +100,7 @@
}); });
return { return {
prefixCls,
handleClickMenu, handleClickMenu,
getPopConfirmAttrs, getPopConfirmAttrs,
getAttr: (key: string | number) => ({ key }), getAttr: (key: string | number) => ({ key }),
@ -105,3 +108,14 @@
}, },
}); });
</script> </script>
<style lang="less">
@prefix-cls: ~'@{namespace}-basic-dropdown';
.@{prefix-cls} {
&--menu{
.ant-dropdown-menu-item {
color: @primary-color;
}
}
}
</style>

8
src/layouts/default/header/components/user-dropdown/index.vue

@ -10,7 +10,7 @@
</span> </span>
<template #overlay> <template #overlay>
<Menu @click="handleMenuClick"> <Menu :class="`${prefixCls}--menu`" @click="handleMenuClick">
<MenuItem <MenuItem
key="accountSettings" key="accountSettings"
:text="t('layout.header.dropdownItemAccountSettings')" :text="t('layout.header.dropdownItemAccountSettings')"
@ -123,6 +123,12 @@
cursor: pointer; cursor: pointer;
align-items: center; align-items: center;
&--menu{
.ant-dropdown-menu-item {
color: @primary-color;
}
}
img { img {
width: 24px; width: 24px;
height: 24px; height: 24px;

Loading…
Cancel
Save