Ant Design Vue Mentions例子

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Ant Design Vue Mentions例子</title>
    <script src="//www.itxst.com/package/vue/vue.min.js"></script>
    <script src="//www.itxst.com/package/ant-design-vue/antd.js"></script>
    <link href="//www.itxst.com/package/ant-design-vue/antd.min.css" rel="stylesheet" />
    <style>
        body {
            padding: 10px
        }
    </style>
</head>
<body>
    <div id="app">
        <a-mentions v-model="value" :loading="loading" @search="onSearch" @select="onSelect" style="width:300px">
            <a-mentions-option :value="item.name" v-for="item in options" :key="item.value">
                {{item.value}}
            </a-mentions-option>
        </a-mentions>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    value: '@itxst.com',
                    loading: false,//是否正在加载数据
                    options: []    //数据集
                };
            },
            methods: {
                //选择事件
                onSelect(option) {
                    alert('你选择了:' + JSON.stringify(option.value));
                },
                onSearch(keyword) {
                    var that = this;
                    if (that.loading == true) return;
                    that.loading = true;//设置正在加载数据
                    setTimeout(function () {
                        that.loadData(keyword);
                    }, 2000)
                },
                //模拟向服务器请求数据
                loadData(keyword) {
                    var that = this;
                    that.options = [];
                    for (var i = 0; i < 10; i++) {
                        that.options.push({ name: 'n' + i, value: i });
                    }
                    //数据加载完成
                    that.loading = false;
                }
            },
        });
    </script>
</body>
</html>