magix-components/tmpl/mx-number/__test__/index.html

magix组件

<h2>mx-number</h2>
<h3>默认情形</h3>
<div class="pt20 clearfix">
    <mx-number /><mx-input type="number" />
</div>

<div class="pt20">
    <div>HTML Code:</div>
    <pre>&lt;mx-number /&gt;</pre>
</div>

<h3 class="mt30">最大值、最小值及step</h3>
<div class="pt20 clearfix">
    <mx-number
        max="10"
        min="-10"
        step="0.5"
        ratio="4"
        value="8.5" />
</div>

<div class="pt20">
    <div>HTML Code:</div>
    <pre>&lt;mx-number
    max="10"
    min="-10"
    step="0.5"
    value="8.5" /&gt;</pre>
</div>

<h3 class="mt30">禁用</h3>
<div class="pt20 clearfix">
    <mx-number disabled="true" value="20" />
</div>

<div class="pt20">
    <div>HTML Code:</div>
    <pre>&lt;mx-number disabled="true" value="20" /&gt;</pre>
</div>


<h3 class="mt30">响应事件</h3>
<div class="pt20 clearfix">
    <mx-number
        max="10"
        min="-10"
        step="0.5"
        value="8.5"
        mx-change="show()" />
</div>

<div class="pt20">
    <div>HTML Code:</div>
    <pre>&lt;mx-number
    max="10"
    min="-10"
    step="0.5"
    value="8.5"
    mx-change="show()" /&gt;</pre>
    <div class="pt10">Javascript Code:</div>
    <pre>let Magix = require('magix');
let GTip = require('app/gallery/mx-gtip/index');
module.exports = Magix.View.extend({
    tmpl: '@index.html',
    mixins: [GTip],
    render() {
        let me = this;
        me.updater.digest();
    },
    'show&lt;change&gt;' (e) {
        this.gtipRT('当前值：' + e.eventTarget.value);
    }
});</pre>
</div>