@{
    Layout = "~/Views/Shared/_InfoLayout.cshtml";
}

<div class="yc-panel">
    <h3>数字格式化输入</h3>
    <hr />
    <div class="form-group">
        <label class="formlabel">百分号后缀</label>
        <input type="text" id="input1" placeholder="3位小数的百分比数字" />
    </div>
    <div class="form-group">
        <label class="formlabel">动态变化后缀</label>
        <input type="text" id="input2" placeholder="请输入数字" />
        <select id="selectInputType2" onchange="inputDynamic()" style="width:70px;">
            <option>吨</option>
            <option>千克</option>
            <option>无</option>
        </select>
    </div>
    <div class="form-group">
        <label class="formlabel">允许负号前缀</label>
        <input type="text" id="input3" placeholder="可为负数" />
    </div>
</div>

@section JS{
    <script>

        var numberInputPercent, numberInputDynamic, numberInputNegative;

        $(function () {

            //百分比数字
            numberInputPercent = FastVue.numberInput('input1', {
                append: '%',
                precision: 3,
                negative: false
            });
            numberInputPercent.setValue(1.5555555);

            //动态变化后缀
            inputDynamic();
            numberInputDynamic.setValue(100);

            //允许负号前缀
            numberInputNegative = FastVue.numberInput('input3', {
                append: '',
                precision: 2,
                negative: true
            });
        });

        //动态后缀
        function inputDynamic() {
            if (!numberInputDynamic) {
                numberInputDynamic = FastVue.numberInput('#input2');
            }
            let options = numberInputDynamic.getOptions();
            options.append = $('#selectInputType2').val();
            numberInputDynamic.setOptions(options);
        }
    </script>
}