123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100 |
- import { ref, onMounted, onUnmounted } from 'vue'
- import { ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus'
- import CipTableButton from '@cip/components/cip-table-button'
- const getButtonInfo = (vnode) => {
- if (vnode.component) {
- const text = vnode.component.slots.default()
- return {
- ...vnode.component.ctx._.props,
- ...vnode.component.ctx._.attrs,
- text
- }
- }
- return {}
- }
- const RenderComponent = (props) => {
- const list = props.buttonList // .value
- let dropDownNode
- let buttonNodeList = list
- if (list.length > props.limit) {
- buttonNodeList = list.slice(0, props.limit - 1)
- dropDownNode = <ElDropdown style={'margin-left: 8px'} size={'small'}>
- {{
- default: () => <CipTableButton>更多<i class={'el-icon-caret-bottom'}/></CipTableButton>,
- dropdown: () => <ElDropdownMenu>
- {
- list.slice(props.limit - 1).map(item => {
- const { onClick, text, disabled } = getButtonInfo(item)
- return <ElDropdownItem onClick={onClick} disabled={disabled}>{text}</ElDropdownItem>
- })
- }
- </ElDropdownMenu>
- }}
- </ElDropdown>
- }
- const result = buttonNodeList.map(item => {
- const { onClick, text, type, icon, disabled } = getButtonInfo(item)
- return <CipTableButton type={type} disabled={disabled} icon={icon} onClick={onClick}>{text}</CipTableButton>
- })
- if (dropDownNode) {
- result.push(dropDownNode)
- }
- return result
- }
- export default {
- name: 'CipTableHandler',
- props: {
- limit: { type: Number, default: 3 }
- },
- setup (props, { slots }) {
- const buttonList = ref([])
- const originRef = ref()
- onMounted(() => {
- collectButtons()
- const mutationObserver = new MutationObserver((mutations) => {
- console.log('mutations', mutations)
- collectButtons()
- })
- mutationObserver.observe(originRef.value, {
- childList: true,
- subtree: true,
- attributes: true,
- characterData: true
- })
- onUnmounted(() => {
- mutationObserver.disconnect()
- })
- })
- const collectButtons = () => {
- buttonList.value = []
- vnodeList.forEach(vnode => getButtons(vnode))
- }
- let vnodeList = []
- const getButtons = (vnode) => {
- if (vnode.shapeFlag === 16) {
- vnode.children.forEach(v => getButtons(v))
- }
- if (vnode.shapeFlag === 36) {
- const componentName = (vnode.type.name || '').toLowerCase()
- if (componentName.indexOf('button') > -1) {
- buttonList.value.push(vnode)
- } else {
- if (vnode.component) {
- const children = vnode.component.subTree.children || []
- children.forEach(v => getButtons(v))
- }
- }
- }
- }
- let count = 1
- return () => {
- vnodeList = slots.default?.()
- count++
- return <div class={'cip-table-handler'}>
- <div ref={el => { originRef.value = el }} style={'display: none'}>{vnodeList}</div>
- <RenderComponent key={count} limit={props.limit} buttonList={buttonList.value} />
- </div>
- }
- }
- }
|