首頁 > 軟體

關於找到任意元件範例的方法

2022-09-14 22:01:46

找到任意元件範例的方法

由一個元件,向上找到最近的指定元件

/**
 * 由一個元件,向上找到最近的指定元件
 * @param {*} context 當前上下文,比如你要基於哪個元件來向上尋找,一般都是基於當前的元件,也就是傳入 this
 * @param {*} componentName 要找的元件的 name
 */
function findComponentUpward(context, componentName) {
  let parent = context.$parent
  let name = parent.$options.name

  while (parent && (!name || [componentName].indexOf(name) < 0)) {
    parent = parent.$parent
    if (parent) name = parent.$options.name
  }
  return parent
}

由一個元件,向上找到所有的指定元件

/**
 * 由一個元件,向上找到所有的指定元件
 * @param {*} context 當前上下文,比如你要基於哪個元件來向上尋找,一般都是基於當前的元件,也就是傳入 this
 * @param {*} componentName 要找的元件的 name
 */
function findComponentsUpward(context, componentName) {
  let parents = []
  const parent = context.$parent

  if (parent) {
    if (parent.$options.name === componentName) parents.push(parent)
    return parents.concat(findComponentsUpward(parent, componentName))
  } else {
    return []
  }
}

由一個元件,向下找到最近的指定元件

/**
 * 由一個元件,向下找到最近的指定元件
 * @param {*} context 當前上下文,比如你要基於哪個元件來向上尋找,一般都是基於當前的元件,也就是傳入 this
 * @param {*} componentName 要找的元件的 name
 */
function findComponentDownward(context, componentName) {
  const childrens = context.$children
  let children = null

  if (childrens.length) {
    for (const child of childrens) {
      const name = child.$options.name

      if (name === componentName) {
        children = child
        break
      } else {
        children = findComponentDownward(child, componentName)
        if (children) break
      }
    }
  }
  return children
}

由一個元件,向下找到所有指定的元件

/**
 * 由一個元件,向下找到所有指定的元件
 * @param {*} context 當前上下文,比如你要基於哪個元件來向上尋找,一般都是基於當前的元件,也就是傳入 this
 * @param {*} componentName 要找的元件的 name
 */
function findComponentsDownward(context, componentName) {
  return context.$children.reduce((components, child) => {
    if (child.$options.name === componentName) components.push(child)
    const foundChilds = findComponentsDownward(child, componentName)
    return components.concat(foundChilds)
  }, [])
}

由一個元件,找到指定元件的兄弟元件

/**
 * 由一個元件,找到指定元件的兄弟元件
 * @param {*} context 當前上下文,比如你要基於哪個元件來向上尋找,一般都是基於當前的元件,也就是傳入 this
 * @param {*} componentName 要找的元件的 name
 * @param {*} exceptMe 是否把本身除外
 */
function findBrothersComponents(context, componentName, exceptMe = true) {
  let res = context.$parent.$children.filter((item) => {
    return item.$options.name === componentName
  })
  let index = res.findIndex((item) => item._uid === context._uid)
  if (exceptMe) res.splice(index, 1)
  return res
}

vue常用元件庫

行動端常用元件庫

1.Vant https://youzan.github.io/vant

2.CubeUI https://didi.github.io/cube-ui

3.MintUI https://mint-ui.github.io

3.NutUI https://nutui.jd.com/ // 京東自己的

pc端常用元件庫

1.ElementUI https://element.eleme.cn

2.IViewUI https://www.iviewui.com

2.AntDesignUI https://ant.design/

以上為個人經驗,希望能給大家一個參考,也希望大家多多支援it145.com。


IT145.com E-mail:sddin#qq.com