基本功能

首先创建代表单点的组件：

Vue.component('instance', {
    template: '#v-template-instance',
});

模板：

<script type="text/x-template" id='v-template-instance'>
<div :id="instance.display_name"
     :class="['per-instance', status, hotStatus, highlight]"
     @dblclick="openConsole()"
     @click="showPopover()"
     :title="instance.display_name">
</div>
</script>

其中，status等都是计算属性，通过当前点的数据计算出对应的class，并自动更新。

状态改变

载入时进行索引：

        created: function () {
            insIndex[this.instance.display_name] = this;
        },

当有数据更新时，通过索引更新数据，计算属性的值就会自动更新。

判断连接状态使用了如下计算属性：

        computed: {
            isActive: function () {
                t = this.time2number(this.instance.last_active);
                return t && t + busy_limit > this.$root.now;
            },
        }

其中，last_active存了该节点上次活跃时间，busy_limit为有效时间。通过当前时间与上次活跃时间的差判断活跃。如果在这里直接使用$.now()作为当前时间，vue是不会追中这个值的，也就是说这个计算属性的值不会随着$.now()的改变而改变（虽然可以声明不缓存此计算属性的值，但只对js调用有效，对dom无效）。在这里，我定时更新最上层组件的now值，再在这里进行计算比较。

定时更新now的值：

            ready: function () {
                var self = this;
                this.intervalId = setInterval(function () { self.now = $.now(); }, 10000)
            },
            beforeDestroy: function () {
                clearInterval(this.intervalId);
            },

搜索

通过一个计算属性来标识这个点是否匹配搜索：

        computed: {
            ifMatch: function () {
                if (!(this.$root.search)) return false;
                var toTest = [data......];
                var search = this.$root.search;
                for (str in toTest) {
                    if (toTest[str] && toTest[str].indexOf(search) >= 0) return true;
                }
                return false;
            },
        }

最上层组件的数据绑定：

<input v-model="search" type="text" placeholder="..." id="searchbox">

在组件上可以使用class，style，或者v-show来控制搜索结果的显示。

P.S.

改完一共少了一百多行代码，代码结构也清晰了，还是值得的。

• 相关文章