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

magix组件

<h2>mx-slider</h2>
<h3>默认情形</h3>
<div class="pt20 clearfix">
    <mx-view path="mx-slider/index"
        max="200"
        min="100"
        value="130"
        step="0.05"
        class="fl"
    ></mx-view>
</div>

<div class="pt20">
    <div>HTML Code:</div>
    <pre>&lt;mx-view path="mx-slider/index"
    max="200"
    min="100"
    value="130"
    step="0.05"
    class="fl"
&gt;&lt;/mx-view&gt;</pre>
</div>

<h3 class="mt30">垂直</h3>
<div class="pt20 clearfix">
    <mx-view path="mx-slider/index"
        max="200"
        min="100"
        value="130"
        step="0.05"
        class="fl"
        vertical="true"
    ></mx-view>
</div>

<div class="pt20">
    <div>HTML Code:</div>
    <pre>&lt;mx-view path="mx-slider/index"
    max="200"
    min="100"
    value="130"
    step="0.05"
    class="fl"
    vertical="true"
&gt;&lt;/mx-view&gt;</pre>
</div>

<h3 class="mt30">禁用</h3>
<div class="pt20 clearfix">
    <mx-view path="mx-slider/index"
        max="200"
        min="100"
        value="130"
        step="0.05"
        disabled="true"
        class="fl"
    ></mx-view>
</div>

<div class="pt20">
    <div>HTML Code:</div>
    <pre>&lt;mx-view path="mx-slider/index"
    max="200"
    min="100"
    value="130"
    step="0.05"
    disabled="true"
    class="fl"
&gt;&lt;/mx-view&gt;</pre>
</div>

<h3 class="mt30">响应change事件</h3>
<div class="pt20 clearfix">
    <mx-view path="mx-slider/index"
        max="200"
        min="0"
        value="130"
        step="5"
        mx-change="showValue()"
        class="fl"
    ></mx-view>
</div>

<div class="pt20">
    <div>HTML Code:</div>
    <pre>&lt;mx-view path="mx-slider/index"
    max="200"
    min="100"
    value="130"
    step="5"
    mx-change="showValue()"
    class="fl"
&gt;&lt;/mx-view&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();
    },
    'showValue&lt;change&gt;' (e) {
        this.gtipRT('value:' + e.value);
    }
});</pre>
</div>