vue.ts 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. // @ts-nocheck
  2. interface SelectOptions {
  3. context?: any
  4. needAll?: boolean
  5. node?: boolean
  6. }
  7. // #ifdef MP
  8. function selectMPComponent(key: string, name: string, context: any, needAll: boolean) {
  9. const {proxy, $vm} = context
  10. context = $vm || proxy
  11. if(!['ref','component'].includes(key)) {
  12. const queue = [context]
  13. let result = null
  14. const selector = (key == 'id' ? '#': '.') + name;
  15. while(queue.length > 0) {
  16. const child = queue.shift();
  17. const flag = child?.selectComponent(selector)
  18. if(flag) {
  19. if(!needAll) {return result = flag.$vm}
  20. return result = child.selectAllComponents(selector).map(item => item.$vm)
  21. } else {
  22. child.$children && (queue.push(...child.$children));
  23. }
  24. }
  25. return result
  26. } else {
  27. const {$templateRefs} = context.$
  28. const nameMap = {}
  29. for (var i = 0; i < $templateRefs.length; i++) {
  30. const item = $templateRefs[i]
  31. nameMap[item.i] = item.r
  32. }
  33. let result = []
  34. if(context.$children.length) {
  35. const queue = [...context.$children]
  36. while(queue.length > 0) {
  37. const child = queue.shift();
  38. if(key == 'component' && (child.type?.name === name || child.$?.type?.name === name)) {
  39. result.push(child)
  40. } else if(child.$refs && child.$refs[name]) {
  41. result = child.$refs[name]
  42. } else if(nameMap[child.id] === name){
  43. result.push(child)
  44. } else {
  45. child.$children && (queue.push(...child.$children));
  46. }
  47. if(result.length && !needAll) {
  48. return;
  49. }
  50. }
  51. }
  52. return needAll ? result : result[0]
  53. }
  54. }
  55. // #endif
  56. // #ifdef H5
  57. function selectH5Component(key: string, name: string, context: any, needAll: boolean) {
  58. const {_, component } = context
  59. const child = {component: _ || component || context, children: null , subTree: null, props: null}
  60. let result = []
  61. let queue = [child]
  62. while(queue.length > 0 ) {
  63. const child = queue.shift()
  64. const {component, children , props, subTree} = child
  65. if(key === 'component' && component?.type?.name == name) {
  66. result.push(component)
  67. } else if(key === 'ref' && component && (props?.ref == name || component[key][name])) {
  68. if(props?.ref == name) {
  69. //exposed
  70. result.push(component)
  71. } else if(component[key][name]) {
  72. result.push(component[key][name])
  73. }
  74. } else if(key !== 'ref' && component?.exposed && new RegExp(`\\b${name}\\b`).test(component.attrs[key])) {
  75. // exposed
  76. result.push(component)
  77. } else if(children && Array.isArray(children)) {
  78. queue.push(...children)
  79. } else if(!component && subTree) {
  80. queue.push(subTree)
  81. } else if(component?.subTree) {
  82. queue.push(component.subTree)
  83. }
  84. if(result.length && !needAll) {
  85. break
  86. }
  87. }
  88. return needAll ? result : result[0]
  89. }
  90. // #endif
  91. // #ifdef APP
  92. function selectAPPComponent(key: string, name: string, context: any, needAll: boolean, node: boolean) {
  93. let result = []
  94. // const {_, component} = context
  95. // const child = {component: _ || component || context, children: null, props: null, subTree: null}
  96. const queue = [context]
  97. while(queue.length > 0) {
  98. const child = queue.shift()
  99. const {component, children, props, subTree} = child
  100. const isComp = component && props && component.exposed && !node
  101. if(key == 'component' && child.type && child.type.name === name) {
  102. result.push(component)
  103. } else if(props?.[key] === name && node) {
  104. result.push(child)
  105. } else if(key === 'ref' && isComp && (props.ref === name || props.ref_key === name)) {
  106. // exposed
  107. result.push(component)
  108. } else if(key !== 'ref' && isComp && new RegExp(`\\b${name}\\b`).test(props[key])) {
  109. // exposed
  110. result.push(component)
  111. }
  112. // else if(component && component.subTree && Array.isArray(component.subTree.children)){
  113. // queue.push(...component.subTree.children)
  114. // }
  115. else if(subTree) {
  116. queue.push(subTree)
  117. } else if(component && component.subTree){
  118. queue.push(component.subTree)
  119. }
  120. else if(children && Array.isArray(children)) {
  121. queue.push(...children)
  122. }
  123. if(result.length && !needAll) {
  124. break;
  125. }
  126. }
  127. return needAll ? result : result[0]
  128. }
  129. // #endif
  130. export function selectAllComponent(selector: string, options: SelectOptions = {}) {
  131. // . class
  132. // # id
  133. // $ ref
  134. // @ component name
  135. const reg = /^(\.|#|@|\$)([a-zA-Z_0-9\-]+)$/;
  136. if(!reg.test(selector)) return null
  137. let { context, needAll = true, node} = options
  138. const [,prefix, name] = selector.match(reg)
  139. const symbolMappings = {'.': 'class', '#': 'id', '$':'ref', '@':'component'}
  140. const key = symbolMappings [prefix] //prefix === '.' ? 'class' : prefix === '#' ? 'id' : 'ref';
  141. // #ifdef MP
  142. return selectMPComponent(key, name, context, needAll)
  143. // #endif
  144. // #ifdef H5
  145. return selectH5Component(key, name, context, needAll)
  146. // #endif
  147. // #ifdef APP
  148. return selectAPPComponent(key, name, context, needAll, node)
  149. // #endif
  150. }