10

聊聊如何实现自定义滑块组件？

 1 year ago
source link: https://www.51cto.com/article/743764.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

聊聊如何实现自定义滑块组件？

作者：一点鑫得 2023-01-03 07:40:27
整个滑块组通过绝对定位的方式将其定位在web页面的右上角，取消ul列表的默认列表样式，每个滑块的名称、滑块、值居中对齐，只需要简单几个css样式就可以达到这个效果。

下面的动画展现了通过两个代表x、y轴的滑块来实现图形的平移效果动画，本文介绍怎么来实现这样的滑块。

61218fa45ab0685bfc856161cca52bf502414a.gif

滑块html结构

示例通过ul列表结构组织，每个li元素的内容表示一个滑块，每个滑块包含名称、滑块和值三部分内容，其中滑块使用input元素即可实现，只需要将type设置为range即可。

<div id="toolbox"><ul><li><!--滑块名称--><div>x</div><!--滑块--><input class="xin-widget-slider" type="range" min="0" max="1740" value="870"><!--滑块表示的值--><div class="xin-widget-value">399</div></li><li><div>y</div><input class="xin-widget-slider" type="range" min="0" max="860" value="430"><div class="xin-widget-value">312</div></li></ul>
</div>

滑块CSS样式

整个滑块组通过绝对定位的方式将其定位在web页面的右上角，取消ul列表的默认列表样式，每个滑块的名称、滑块、值居中对齐，只需要简单几个css样式就可以达到这个效果。

/*将toolbox容器绝对定位到web页面右上角*/
#toolbox {
    position: absolute;
    top: 0;
    right: 0;
    margin: 1rem 2rem;
    opacity: 0.6;
}
/*不显示ul任何列表样式*/
#toolbox ul {
    list-style-type: none;
}
/*居中对齐滑块名称、滑块、值*/
#toolbox ul li {
    display: flex;
    align-items: center;
}

TypeScript代码实现滑块组件封装

接下来，还需要通过js代码添加滑块监听处理方法，实时更新滑块的值，并提供回调入口供应用使用该滑块。这里通过TypeScript来实现，代码如下：

export class xinUI {

    // 创建滑块组件
    setupSlider(parent_selector: string, options: any) {
        var parent = document.querySelector(parent_selector);

        // 从options中提取滑块的名称、最小、最大值、当前值等，不存在的则取默认值
        var name = options.name;
        var min = options.min || 0;
        var max = options.max || 1;
        var callback = options.callback;
        var value = options.value || 0;
        // 创建一组滑块
        var elm_li = document.createElement("li");
        elm_li.innerHTML = `
            <div>${name}</div>
            <input class="xin-widget-slider" type="range" min="${min}" max="${max}" value="${value}">
            <div class="xin-widget-value">${value}</div>`;
        parent.appendChild(elm_li);
        var elm_slider = elm_li.querySelector(".xin-widget-slider");
        var elm_value = elm_li.querySelector(".xin-widget-value");
        // 更新显示滑块的值
        updateValue();
        // 添加input、change事件，实时改变滑块的值并回调options指定的方法
        elm_slider.addEventListener("input", handleChange);
        elm_slider.addEventListener("change", handleChange);

        function updateValue() {
            elm_value.textContent = value;
        }

        function handleChange(event) {
            value = event.target.value;
            updateValue();
            // 供用户回调
            callback(event, {value: value});
        }
    }
};

滑块组件示例

下面的示例在web页面的右上角创建两个滑块代表x、y坐标，滑动滑块将在控制台打印滑块的值。
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./src/css/layout.css">
    <title>滑块组件使用示例</title>
</head>
<body>
    <div id="toolbox">
        <ul>
        </ul>
    </div><!-- slider-ui.js为上面滑块组件代码编译为js后的代码，这里不再列出 -->
    <script type="module" src="./build/slider-ui.js"></script>
    <script type="module" src="./build/main.js"></script>
</body>
</html>

main.ts

import { xinUI } from "./slider-ui.js";

function main() {
    
    var translation = [10, 30];
    // 创建x、y平移滑块
    var myUI = new xinUI();
    myUI.setupSlider("#toolbox ul", {name: "x", max: 100, value: translation[0], callback: updatePosition(0)});
    myUI.setupSlider("#toolbox ul", {name: "y", max: 100, value: translation[1], callback: updatePosition(1)});
    
    function updatePosition(index) {
        return function(event, ui) {
            translation[index] = parseInt(ui.value);
            //以下为应用处理的代码，这里仅打印其信息以示例console.log(translation[index]);
        }
    }
}
main();

export {};
责任编辑：武晓燕 来源： 今日头条

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK