C7n-Pro UI 中的LOV多選框添加懸浮title

lov多選模式下,輸入框中的內容如果比較長的話可能會無法完整地顯示文字內容,這時候就希望在鼠標懸停時能有popover將完整的文字展示出來。
組件原本沒有提供這個功能,但是這難不倒冰雪聰明的我,讓我們來開動小腦瓜,使用一些奇奇怪怪的小方法來實現它。

const ds = (setLovTitle = () => {}) => ({
  fields: [
    {
      name: 'fieldName',
      label: '我是label',
      type: 'object',
      multiple: true,
      lovCode: 'HELLO.MY_LOV_CODE',
    },
],

  events: {
    update: ({ name }) => {
      if (name === 'fieldName') {
        setTimeout(() => {
          setLovTitle(name);
        }, 2000);
      }
    },
  },
});

/**
   * @description: 給多選lov內容添加懸浮title,要打開element面板分析一下dom結構,就能寫出來了
   * @author: ChenJJ
   * @param {String} id dom元素id
   */
  setMultiLovTitle = (id) => {
    const field = document.getElementById(id);
    if (field) {
      const father = field.parentNode;
      if (father) {
        const ul = father.parentNode;
        if (ul) {
          const divList = ul.getElementsByTagName('div');
          if (divList) {
            for (let i = 0; i < divList.length; i++) {
              const content = divList[i].innerText;
              divList[i].setAttribute('title', content);
            }
          }
        }
      }
    }
  };

<Form dataSet={this.ds}>
                  <Lov
                    name="fieldName"
                    id="fieldName"
                    // 只在onChange里面寫是不夠的,后面再打開modal框去改變內容時,是無法觸發(fā)這個的,但是可以寫在dataSet的events里面的update監(jiān)聽回調函函數里面。
                    onChange={this.setMultiLovTitle('fieldName')}
                  />
 </Form>
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容