lvwatermarks/index.js

vue2-水印插件

const install = function (Vue) {
  Vue.prototype.$watermark = (context, ref, options = {}) => {
    const {
      watermarkText = '默认水印',
      angle = -20,          // 默认斜向角度
      gap = 260,            // 左右间距
      verticalGap = 150,     // 上下间距
      fontSize = 20,
      color = '#ccc',
      layout = 'diagonal',  // 水印排列形式：horizontal, vertical, diagonal
    } = options;

    // 添加水印样式
    addWatermarkStyle(color);

    // 清空之前创建的水印并添加新的水印
    removeAllWatermarkContainers().then(() => {
      context.$nextTick(() => {
        const targetElement = context.$refs[ref];
        if (!targetElement) {
          console.error(`Ref ${ref} not found`);
          return;
        }

        const rows = Math.ceil(targetElement.offsetHeight / (fontSize + verticalGap));
        const cols = Math.ceil(targetElement.offsetWidth / (fontSize + gap));

        for (let i = 0; i < rows; i++) {
          for (let j = 0; j < cols; j++) {
            const textElement = document.createElement('span');
            textElement.classList.add('watermark_shuiyin');
            textElement.style.fontSize = `${fontSize}px`;
            textElement.style.position = 'absolute';
            textElement.style.whiteSpace = 'nowrap';
            textElement.textContent = watermarkText;

            // 根据排列形式设置位置和旋转角度
            const x = j * (fontSize + gap) + gap / 2;
            const y = i * (fontSize + verticalGap) + verticalGap / 2;

            if (layout === 'horizontal') {
              textElement.style.transform = 'rotate(0deg)'; // 水平排列
              textElement.style.left = `${x}px`;
              textElement.style.top = `${i * (fontSize + verticalGap)}px`;
            } else if (layout === 'vertical') {
              textElement.style.transform = 'rotate(90deg)'; // 垂直排列
              textElement.style.left = `${j * (fontSize + gap)}px`;
              textElement.style.top = `${y}px`;
            } else if (layout === 'diagonal') {
              textElement.style.transform = `rotate(${angle}deg)`; // 斜向排列
              textElement.style.left = `${x}px`;
              textElement.style.top = `${y}px`;
            }

            // 仅添加在可见范围内的水印
            if (x + fontSize * watermarkText.length < targetElement.offsetWidth) {
              targetElement.appendChild(textElement);
            }
          }
        }
      });
    });
  };
};

// 清空水印函数
function removeAllWatermarkContainers() {
  return new Promise((resolve) => {
    const watermarkContainers = document.querySelectorAll('.watermark_shuiyin');
    if (watermarkContainers.length > 0) {
      watermarkContainers.forEach((container, index) => {
        container.parentNode.removeChild(container);
        if (index === watermarkContainers.length - 1) {
          resolve();
        }
      });
    } else {
      resolve();
    }
  });
}

// 添加水印样式
function addWatermarkStyle(color) {
  if (!document.getElementById('watermark-style')) {
    const style = document.createElement('style');
    style.type = 'text/css';
    style.id = 'watermark-style';
    style.innerHTML = `
      .watermark_shuiyin {
        position: absolute;
        opacity: 0.2;
        pointer-events: none;
        z-index: 1;
        font-size: 24px;
        color: ${color};
        text-align: center;
        white-space: nowrap;
      }
    `;
    document.head.appendChild(style);
  }
}

module.exports = install;