【cocos creator】输入框滑动条联动小组建

滑动条滑动输入框内容会改变

输入框输入，滑动条位置改变

const { ccclass, property } = cc._decorator;

@ccclass()
export default class SliderEnter extends cc.Component {
    @property({ type: cc.Float, displayName: "最大值", tooltip: "" })
    public maxNum: number = 100;
    @property({ type: cc.Float, displayName: "最小值", tooltip: "" })
    public minNum: number = 0;
    @property({ type: cc.Float, displayName: "输入框初始值", tooltip: "" })
    public editBoxStart: number = 0;
    @property({ type: cc.Float, displayName: "滑动条初始位置", min: 0, max: 1, tooltip: "0～1，支持小数，对应输入框初始值" })
    sliderStart = 0;
    @property({ type: cc.Integer, displayName: "保留小数位数", tooltip: "" })
    public fixTo: number = 0;
    @property({ type: cc.EditBox, displayName: "输入框", tooltip: "" })
    public editBox: cc.EditBox = null;
    @property({ type: cc.Slider, displayName: "滑动条", tooltip: "" })
    public slider: cc.Slider = null;

    _sliderStart = 0;
    _editBoxStart = 0;

    protected onLoad(): void {
        this.onResetBtn()
        // this._sliderStart = this.slider.progress;
        // this._editBoxStart = this.checkEditBox()
        this.addHandler(this.slider.slideEvents, this.onSlide, "onSlide", this)
        this.addHandler(this.editBox.editingDidEnded, this.onSlide, "onEnter", this)
    }

    getData() {
        let num = this.checkEditBox()
        return num
    }

    onResetBtn() {
        this._sliderStart = this.sliderStart;
        this._editBoxStart = this.editBoxStart
        this.slider.progress = this._sliderStart
        this.editBox.string = this.fixForceStr(this._editBoxStart, this.fixTo)
    }

    checkEditBox() {
        let num = this.getInt(this.editBox.string, 0)
        if (num > this.maxNum) num = this.maxNum;
        if (num < this.minNum) num = this.minNum;
        this.editBox.string = num + ""
        return num;
    }

    onEnter() {
        let num = this.checkEditBox()
        if (num == this._editBoxStart) {
            num = this._sliderStart
        }
        else if (num <= this._editBoxStart) {
            this.slider.progress = (num - this.minNum) / (this._editBoxStart - this.minNum) * this._sliderStart
        }
        else {
            this.slider.progress = this._sliderStart + (num - this._editBoxStart) / (this.maxNum - this._editBoxStart) * (1 - this._sliderStart)
        }
    }

    onSlide() {
        let progress = this.slider.progress
        let num = 0
        if (progress < 0) progress = 0
        if (progress > 1) progress = 1
        this.slider.progress = progress
        if (progress == this._sliderStart) {
            num = this._editBoxStart
        }
        else if (progress <= this._sliderStart) {
            num = this.minNum + (this._editBoxStart - this.minNum) * progress / this._sliderStart
        }
        else {
            num = this._editBoxStart + (progress - this._sliderStart) * (this.maxNum - this._editBoxStart) / (1 - this._sliderStart)
        }
        this.editBox.string = this.fixForceStr(num, this.fixTo)
    }

    addHandler(fun: any, handler, fnName = "", scope, eventData = "") {
        if (!fnName || !scope[fnName]) {
            fnName = "__BtnClick__" + (Math.random() + "").slice(2, 15);
            scope[fnName] = handler;
        }
        let eventHandler = new cc.Component.EventHandler();
        eventHandler.target = scope.node;
        eventHandler.component = cc.js.getClassName(this);
        eventHandler.handler = fnName;
        eventHandler.customEventData = eventData;
        if (typeof (fun) == "object" && cc.isValid(fun.length)) fun.push(eventHandler);
        return eventHandler
    }

    fixForceStr(count, fixTo): string {
        let a = (count + "").split(".");
        if (fixTo == 0) return a[0]
        let b = a[0];
        if (a.length > 1) b = a[0] + "." + a[1].slice(0, fixTo);
        if (b == "0.00" || b == "0.0") {
            return a[0]
        }
        return b;
    }

    getInt(data, defaultNum) {
        let num = Number(data)
        return isNaN(num) ? defaultNum : num;
    }
}