内部样式编写方法

在可视化的组件开发中如果要穿透第三方的ui组件在vue文件中不能使用scope的情况下，可以使用内部样式去编写覆盖代码如下：

/**
 * 设置内部样式
 * @param {*} textContent 样式模板字符串
 * @param {*} id 样式唯一ID
 * @param {*} prefix 
 */
export const setHeaderStyle = (textContent,prefix,id) => {
  const useStyle = document.createElement("style");
  useStyle.id = `${prefix}-${id}`;
  useStyle.textContent =textContent
  if (document.querySelector(`#${prefix}-${id}`)) {
    const newStyle = document.querySelector(`#${prefix}-${id}`);
    newStyle.textContent = textContent
    document.head.removeChild(
      document.querySelector(`#${prefix}-${id}`)
    );
    document.head.appendChild(newStyle);
  } else {
    document.head.appendChild(useStyle);
  }
};

使用案例：

      let textContent = `
        #data-list-${this.elementUid}::-webkit-scrollbar-thumb{
          background: ${val};
          opacity: 0.12;
          border-radius: 0.125rem;
        }
      `;
      setHeaderStyle(textContent, 'custom-list',this.elementUid);

其中val就是传过来的动态值，uid是js方法生成的uuid