js版本

封装一个scrollbar组件

// 创建滚动条组件
function Scrollbar(options) {
  // 默认配置
  var defaultOptions = {
    // 滚动条颜色
    color: '#999',
    // 滚动条宽度
    width: 10,
    // 滚动条位置，left或right
    position: 'right',
    // 滚动条是否可见
    visible: true
  };

  // 合并配置项
  this.options = Object.assign({}, defaultOptions, options);

  // 渲染滚动条
  this.render = function() {
    // 创建滚动条容器
    var container = document.createElement('div');
    container.style.position = 'fixed';
    container.style.top = 0;
    container.style.bottom = 0;
    container.style.width = this.options.width + 'px';
    container.style.backgroundColor = this.options.color;
// 根据配置项中指定的位置来设置滚动条容器的位置
if (this.options.position === 'left') {
  container.style.left = 0;
} else if (this.options.position === 'right') {
  container.style.right = 0;
}

// 根据配置项中的可见性来设置滚动条的可见性
if (this.options.visible === false) {
  container.style.visibility = 'hidden';
}

// 在body中添加滚动条容器
document.body.appendChild(container);
} }
// 使用默认配置创建一个滚动条 var scrollbar = new Scrollbar(); scrollbar.render();
// 使用自定义配置创建一个滚动条 var customScrollbar = new Scrollbar({ color: '#333', width: 5, position: 'left', visible: false }); customScrollbar.render();

class Scrollbar {
  constructor(options) {
    this.scrollbarElement = document.createElement("div");
    this.scrollbarElement.classList.add("scrollbar");

    this.scrollbarTrackElement = document.createElement("div");
    this.scrollbarTrackElement.classList.add("scrollbar__track");
    this.scrollbarElement.appendChild(this.scrollbarTrackElement);

    this.scrollbarThumbElement = document.createElement("div");
    this.scrollbarThumbElement.classList.add("scrollbar__thumb");
    this.scrollbarTrackElement.appendChild(this.scrollbarThumbElement);

    this.contentElement = options.contentElement;
    this.contentElement.classList.add("scrollbar__content");
    this.scrollbarElement.appendChild(this.contentElement);

    this.scrollbarElement.addEventListener("scroll", () => {
      this.update();
    });

    this.update();
  }

  get element() {
    return this.scrollbarElement;
  }

  update() {
    // 计算并设置滑块的高度和位置
    const contentHeight = this.contentElement.offsetHeight;
    const scrollbarHeight = this.scrollbarElement.offsetHeight;
    const scrollTop = this.scrollbarElement.scrollTop;

    const scrollbarRatio = scrollbarHeight / contentHeight;
    this.scrollbarThumbElement.style.height = scrollbarRatio * 100 + "%";
    this.scrollbarThumbElement.style.top = scrollTop / contentHeight * 100 + "%";
  }
}

// 使用该组件的方法如下所示
const contentElement = document.querySelector(".content");
const scrollbar = new Scrollbar({ contentElement });
document.body.appendChild(scrollbar.element);

封装一个Tooltip组件

full

class Tooltip {
    constructor(element, position = 'bottom') {
            this.element = element;
            this.position = position;
            this.tooltipElement = null;

            this.create();
            this.show();
            this.hide();
    }

    create() {
            // 创建tooltip元素
            const tooltipElement = document.createElement('div');
            tooltipElement.classList.add('tooltip');

            // 设置tooltip的文本内容
            const text = this.element.getAttribute('title');
            tooltipElement.textContent = text;

            // 将tooltip添加到文档中
            document.body.appendChild(tooltipElement);

            // 保存tooltip元素的引用，以便后面使用
            this.tooltipElement = tooltipElement;

            // 移除元素的title属性，防止浏览器默认的tooltip出现
            this.element.removeAttribute('title');
    }

    show() {
            // 监听元素的mouseenter事件
            this.element.addEventListener('mouseenter', () = >{
                    // 计算tooltip的位置
                    const elementRect = this.element.getBoundingClientRect();
                    const elementPosition = {
                            left: elementRect.left + window.scrollX,
                            top: elementRect.top + window.scrollY,
                    };

                    const tooltipRect = this.tooltipElement.getBoundingClientRect();
                    const tooltipPosition = {
                            width: tooltipRect.width,
                            height: tooltipRect.height,
                    };

                    let left = 0;
                    let top = 0;

                    // 根据position属性设置tooltip的位置
                    switch (this.position) {
                    case 'bottom':
                            left = elementPosition.left + (elementRect.width - tooltipPosition.width) / 2;
                            top = elementPosition.top + elementRect.height;
                            break;
                    case 'top':
                            left = elementPosition.left + (elementRect.width - tooltipPosition.width) / 2;
                            top = elementPosition.top - tooltipPosition.height;
                            break;
                    case 'left':
                            left = elementPosition.left - tooltipPosition.width;
                            top = elementPosition.top + (elementRect.height - tooltipPosition.height) / 2;
                            break;
                    case 'right':
                            left = elementPosition.left + elementRect.width;
                            top = elementPosition.top + (elementRect.height - tooltipPosition.height) / 2;
                            break;
                    }
                    // 设置tooltip的位置
                    this.tooltipElement.style.left = `$ {
                            left
                    }
                    px`;
                    this.tooltipElement.style.top = `$ {
                            top
                    }
                    px`;

                    // 显示tooltip
                    this.tooltipElement.classList.add('tooltip-visible');
            });
            hide() {
                    // 监听元素的mouseleave事件
                    this.element.addEventListener('mouseleave', () = >{
                            // 隐藏tooltip
                            this.tooltipElement.classList.remove('tooltip-visible');
                    });
            }
    }

    // 使用方法
    const element = document.querySelector('#element');
    const tooltip = new Tooltip(element, 'top');

class


// 定义一个Tooltip类
class Tooltip {
// 构造函数，传入目标元素和文本内容
constructor(target, text) {
this.target = target;
this.text = text;
}

// 初始化函数，创建tooltip元素并添加事件监听
init() {
// 创建tooltip元素
const tooltip = document.createElement('div');
tooltip.className = 'tooltip';
tooltip.innerText = this.text;

// 监听目标元素的mouseover事件，显示tooltip
this.target.addEventListener('mouseover', () => {
  tooltip.style.display = 'block';
});

// 监听目标元素的mouseout事件，隐藏tooltip
this.target.addEventListener('mouseout', () => {
  tooltip.style.display = 'none';
});

// 将tooltip添加到目标元素的后面
this.target.parentNode.insertBefore(tooltip, this.target.nextSibling);
}
}

// 使用方法： const target = document.querySelector('.target'); // 目标元素 const tooltip = new Tooltip(target, '这是tooltip文本'); // 创建Tooltip实例 tooltip.init(); // 初始化

- function 
```js
// 创建Tooltip组件
function Tooltip(options) {
  // 设置默认值
  this.text = options.text || '';
  this.color = options.color || '#fff';
  this.backgroundColor = options.backgroundColor || '#000';
  this.element = options.element;

  // 创建tooltip元素
  this.tooltip = document.createElement('div');
  this.tooltip.innerHTML = this.text;
  this.tooltip.style.color = this.color;
  this.tooltip.style.backgroundColor = this.backgroundColor;
  this.tooltip.style.position = 'absolute';
  this.tooltip.style.display = 'none';

  // 添加tooltip到文档中
  document.body.appendChild(this.tooltip);

  // 绑定事件处理函数
  this.bindEvents();
}

// 绑定事件处理函数
Tooltip.prototype.bindEvents = function() {
  var that = this;
  this.element.addEventListener('mouseover', function() {
    that.show();
  });
  this.element.addEventListener('mouseout', function() {
    that.hide();
  });
}

// 显示tooltip
Tooltip.prototype.show = function() {
  this.tooltip.style.display = 'block';
  this.tooltip.style.left = this.element.offsetLeft + 'px';
  this.tooltip.style.top = this.element.offsetTop + 'px';
}

// 隐藏tooltip
Tooltip.prototype.hide = function() {
  this.tooltip.style.display = 'none';
}

// 使用示例
var ele = document.getElementById('someElement');
var tooltip = new Tooltip({
  element: ele,
  text: 'This is a tooltip',
  color: '#fff',
  backgroundColor: '#000'
});

控制tooltip的位置


function Tooltip(element, text, position) {
this.element = element;
this.text = text;
this.position = position || "top"; // 默认显示在元素的上方

// 显示tooltip this.show = function() { // 创建tooltip元素 var tooltip = document.createElement("div"); tooltip.innerHTML = this.text; tooltip.classList.add("tooltip"); this.element.appendChild(tooltip);

// 设置tooltip的位置 var rect = this.element.getBoundingClientRect(); switch (this.position) { case "top": tooltip.style.top = rect.top - tooltip.offsetHeight + "px"; tooltip.style.left = rect.left + "px"; break; case "right": tooltip.style.top = rect.top + "px"; tooltip.style.left = rect.left + rect.width + "px"; break; case "bottom": tooltip.style.top = rect.top + rect.height + "px"; tooltip.style.left = rect.left + "px"; break; case "left": tooltip.style.top = rect.top + "px"; tooltip.style.left = rect.left - tooltip.offsetWidth + "px"; break; } }

// 隐藏tooltip this.hide = function() { var tooltip = this.element.querySelector(".tooltip"); if (tooltip) { this.element.removeChild(tooltip); } } }

// 使用示例 var elem = document.querySelector("#elem"); var tooltip = new Tooltip(elem, "This is a tooltip", "right"); // 显示在元素的右侧

// 显示tooltip tooltip.show();

// 隐藏tooltip tooltip.hide();


## 封装一个Pagination分页组件
```js
class Pagination {
  constructor(options) {
    this.total = options.total; // 总数据条数
    this.pageSize = options.pageSize; // 每页显示的数据条数
    this.currentPage = options.currentPage; // 当前页码
    this.numBtn = options.numBtn; // 数字按钮的个数
  }

  // 生成页码
  generate() {
    // 计算总页数
    let totalPage = Math.ceil(this.total / this.pageSize);
    // 计算数字按钮的开始和结束位置
    let startNum,
    endNum;
    if (totalPage <= this.numBtn) {
      startNum = 1;
      endNum = totalPage;
    } else {
      let half = Math.floor(this.numBtn / 2);
      if (this.currentPage <= half) {
        startNum = 1;
        endNum = this.numBtn;
      } else if (this.currentPage > totalPage - half) {
        startNum = totalPage - this.numBtn + 1;
        endNum = totalPage;
      } else {
        startNum = this.currentPage - half;
        endNum = this.currentPage + half;
      }
    }

    // 生成HTML结构
    let html = '';
    // 前一页按钮
    if (this.currentPage !== 1) {
      html += ` < button data - page = "${this.currentPage - 1}" > 上一页 < /button>`;
    }
    / / 数字按钮
      for (let i = startNum; i <= endNum; i++) {
        if (i === this.currentPage) {
          html += ` < button class = "active"data - page = "${i}" > $ {
            i
          } < /button>`;
      } else {    html += `<button data-page="${i}">${i}</button > `;
        }
      }
      // 后一页按钮
      if (this.currentPage !== totalPage) {
        html += ` < button data - page = "${this.currentPage + 1}" > 下一页 < /button>`;
}

return html;
}
}

/ / 实例化分页组件
const pagination = new Pagination({
          total: 100,
          // 总数据条数
          pageSize: 10,
          // 每页显示的数据条数
          currentPage: 1,
          // 当前页码
          numBtn: 5 // 数字按钮的个数
        });

        // 生成页码
        const pageHTML = pagination.generate();
        console.log(pageHTML); // 输出页码的 HTML 结构

xlearns / myblog

组件库开发框架 #235

js版本

封装一个scrollbar组件

封装一个Tooltip组件

封装一个Upload 文件上传组件

封装一个TimePicker 时间选择组件

封装一个Carousel 走马灯组件

封装一个Table组件

封装一个form组件

封装一个Tree组件

封装一个Collapse 折叠面板组件

封装一个Dropdown 下拉菜单组件

封装一个BackTop 返回顶部组件

封装一个Message 信息弹窗组件

封装一个Layout 布局组件

封装一个Skeleton 骨架屏组件

封装一个Tabs 标签页组件

封装一个Steps 步骤条组件

封装一个倒计时组件

封装一个Tour漫游式引导组件