@vrx-arco/pro-components
Version:
<p align="center"> <img src="https://vrx-arco.github.io/arco-design-pro/favicon.svg" width="200" height="250"> </p>
64 lines (63 loc) • 1.61 kB
JavaScript
import { defineComponent, createVNode, isVNode } from "vue";
import { Dropdown, Avatar } from "@arco-design/web-vue";
import { propsSlot } from "@vrx-arco/use";
import { style } from "../style/var.mjs";
function _isSlot(s) {
return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
}
const AvatarDropDown = /* @__PURE__ */ defineComponent({
name: "vrx-arco-avatar-drop-down",
props: {
/**
* 用户名
*/
username: String,
/**
* 下拉框选项
*/
dropdown: {
type: Array,
default: () => []
}
},
emits: ["select"],
setup: (props, {
slots,
emit
}) => {
const {
bemClass
} = style("avatar-dropdown");
const handleSelect = (select) => {
emit("select", select);
};
return () => {
const {
dropdown
} = props;
const username = propsSlot(slots, props, "username", "default");
return createVNode(Dropdown, {
"onSelect": handleSelect
}, {
default: () => [createVNode(Avatar, {
"class": bemClass()
}, _isSlot(username) ? username : {
default: () => [username]
})],
content: () => {
var _a;
return ((_a = slots.content) == null ? void 0 : _a.call(slots)) || dropdown.map((item) => createVNode(Dropdown.Option, {
"key": item.value,
"value": item.value,
"disabled": item.disabled
}, {
default: () => [item.title]
}));
}
});
};
}
});
export {
AvatarDropDown
};