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

magix组件

<h2>mx-taginput</h2>
<h3>默认情形</h3>
<div class="pt20 clearfix">
    <div mx-view="mx-taginput/index"
        view-list="<%@list%>"
        view-placeholder="请选择分类"
        class="fl"
    ></div>
</div>

<div class="pt20">
    <div>HTML Code:</div>
    <pre>&lt;div mx-view="app/gallery/mx-taginput/index"
    view-list="&lt;%@ list %&gt;"
    view-placeholder="请选择分类"
&gt;&lt;/div&gt;</pre>
    <div class="pt10">Javascript Code:</div>
    <pre>let Magix = require('magix');
Magix.applyStyle('@index.css');
module.exports = Magix.View.extend({
    tmpl: '@index.html',
    render() {
        let me = this;
        me.updater.digest({
            list: ['分类1', '分类2', '分类3', '分类4', '分类5', '分类6', '分类7', '分类8', '分类9', '分类10']
        });
    }
});</pre>
</div>
<h3 class="mt30">默认选中</h3>
<div class="pt20 clearfix">
    <div mx-view="mx-taginput/index"
        view-list="<%@list%>"
        view-selected="<%@selected%>"
        view-placeholder="请选择分类"
        class="fl"
    ></div>
</div>

<div class="pt20">
    <div>HTML Code:</div>
    <pre>&lt;div mx-view="app/gallery/mx-taginput/index"
    view-list="&lt;%@ list %&gt;"
    view-selected="&lt;%@ selected %&gt;"
    view-placeholder="请选择分类"
&gt;&lt;/div&gt;</pre>
    <div class="pt10">Javascript Code:</div>
    <pre>let Magix = require('magix');
Magix.applyStyle('@index.css');
module.exports = Magix.View.extend({
    tmpl: '@index.html',
    render() {
        let me = this;
        me.updater.digest({
            list: ['分类1', '分类2', '分类3', '分类4', '分类5', '分类6', '分类7', '分类8', '分类9', '分类10'],
            selected: ['分类1', '分类5', '分类10']
        });
    }
});</pre>
</div>
<h3 class="mt30">禁用</h3>
<div class="pt20 clearfix">
    <div mx-view="mx-taginput/index"
        view-list="<%@list%>"
        view-selected="<%@selected%>"
        view-placeholder="请选择分类"
        view-disabled="true"
        class="fl"
    ></div>
</div>

<div class="pt20">
    <div>HTML Code:</div>
    <pre>&lt;div mx-view="app/gallery/mx-taginput/index"
    view-list="&lt;%@ list %&gt;"
    view-selected="&lt;%@ selected %&gt;"
    view-placeholder="请选择分类"
    view-disabled="true"
&gt;&lt;/div&gt;</pre>
    <div class="pt10">Javascript Code:</div>
    <pre>let Magix = require('magix');
Magix.applyStyle('@index.css');
module.exports = Magix.View.extend({
    tmpl: '@index.html',
    render() {
        let me = this;
        me.updater.digest({
            list: ['分类1', '分类2', '分类3', '分类4', '分类5', '分类6', '分类7', '分类8', '分类9', '分类10'],
            selected: ['分类1', '分类5', '分类10']
        });
    }
});</pre>
</div>

<h3 class="mt30">数据列表为对象</h3>
<div class="pt20 clearfix">
    <div mx-view="mx-taginput/index"
        view-list="<%@ userList %>"
        view-selected="<%@ userSelected %>"
        view-placeholder="请选择用户"
        view-text-key="name"
        view-value-key="id"
        class="fl"
    ></div>
</div>

<div class="pt20">
    <div>HTML Code:</div>
    <pre>&lt;div mx-view="app/gallery/mx-taginput/index"
    view-list="&lt;%@ userList %&gt;"
    view-selected="&lt;%@ userSelected %&gt;"
    view-placeholder="请选择用户"
    view-text-key="name"
    view-value-key="id"
&gt;&lt;/div&gt;</pre>
    <div class="pt10">Javascript Code:</div>
    <pre>let Magix = require('magix');
Magix.applyStyle('@index.css');
module.exports = Magix.View.extend({
    tmpl: '@index.html',
    render() {
        let me = this;
        me.updater.digest({
            userList: [{
                name: 'xinglie',
                id: 58782
            }, {
                name: 'xinglie1',
                id: 587821
            }, {
                name: 'xinglie2',
                id: 587822
            }, {
                name: 'xinglie3',
                id: 587823
            }, {
                name: 'xinglie4',
                id: 587824
            }, {
                name: 'xinglie5',
                id: 587825
            }, {
                name: 'xinglie6',
                id: 587826
            }, {
                name: 'xinglie7',
                id: 587827
            }, {
                name: 'xinglie8',
                id: 587828
            }, {
                name: 'xinglie9',
                id: 587829
            }],
            userSelected: [58782]
        });
    }
});</pre>
</div>
<h3 class="mt30">change事件</h3>
<div class="pt20 clearfix">
    <div mx-view="mx-taginput/index"
        view-list="<%@ userList %>"
        view-selected="<%@ userSelected %>"
        view-placeholder="请选择用户"
        view-text-key="name"
        view-value-key="id"
        mx-change="showUserIds()"
        class="fl"
    ></div>
</div>

<div class="pt20">
    <div>HTML Code:</div>
    <pre>&lt;div mx-view="app/gallery/mx-taginput/index"
    view-list="&lt;%@ userList %&gt;"
    view-selected="&lt;%@ userSelected %&gt;"
    view-placeholder="请选择用户"
    view-text-key="name"
    view-value-key="id"
    mx-change="showUserIds()"
&gt;&lt;/div&gt;</pre>
    <div class="pt10">Javascript Code:</div>
    <pre>let Magix = require('magix');
let GTip = require('mx-gtip/index');
Magix.applyStyle('@index.css');
module.exports = Magix.View.extend({
    tmpl: '@index.html',
    mixins: [GTip],
    render() {
        let me = this;
        me.updater.digest({
            list: ['分类1', '分类2', '分类3', '分类4', '分类5', '分类6', '分类7', '分类8', '分类9', '分类10'],
            selected: ['分类1', '分类5', '分类10'],
            userList: [{
                name: 'xinglie',
                id: 58782
            }, {
                name: 'xinglie1',
                id: 587821
            }, {
                name: 'xinglie2',
                id: 587822
            }, {
                name: 'xinglie3',
                id: 587823
            }, {
                name: 'xinglie4',
                id: 587824
            }, {
                name: 'xinglie5',
                id: 587825
            }, {
                name: 'xinglie6',
                id: 587826
            }, {
                name: 'xinglie7',
                id: 587827
            }, {
                name: 'xinglie8',
                id: 587828
            }, {
                name: 'xinglie9',
                id: 587829
            }],
            userSelected: [58782]
        });
    },
    'showUserIds&lt;change&gt;' (e) {
        this.gtipRT('选中的用户ids:'+e.ids);
    }
});</pre>
</div>