vue自定义指令获取焦点及过滤器修改时间

<template id="comp3">
    <div id="app">
        <model :list="selectedlist" :isactive="isActive" v-cloak @change="changeOverlay" @modify="add" @msearch="search"></model>
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">网课管理</h3>
            </div>
            <div class="panel-body form-inline">
                <label>
                    搜索名称关键字：
                    <!-- 自定义获取焦点 指令    -->
                    <input type="text" class="form-control" v-focus v-model="keywords" id="search">&nbsp;&nbsp;
                    <input type="button" value="搜索" class="btn btn-primary" />
                </label>&nbsp;&nbsp;&nbsp;&nbsp;
                <label>
                    ID:
                    <input type="text" class="form-control" v-model="id">
                </label>
                <label>
                    网课名称:
                    <input type="text" class="form-control" v-model="subClassifyName" @keyup.enter="add">
                </label>
                <input type="button" value="添加" class="btn btn-primary" @click="add()" />
            </div>
        </div>
        <table class="table table-bordered table-hover table-striped">
            <thead>
                <tr>
                    <th class="text-center">网课ID</th>
                    <th class="text-center">网课名称</th>
                    <th class="text-center">创建时间</th>
                    <th class="text-center">更新时间</th>
                    <th class="text-center">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) of search(keywords)" :key="item.id">
                    <td class="text-center" v-text="item.id"></td>
                    <td class="text-center" v-text="item.subClassifyName"></td>
                    <td class="text-center" v-text="">{{item.createTime | dateFormat}}</td>
                    <td class="text-center" v-text="">{{item.updateTime | dateFormat}}</td>
                    <td class="text-center">
                        <!--data-toggle="modal" data-target="#update"-->
                        <a href="#" @click="showOverlay(index)">
                            <input type="button" data-toggle="modal" data-target="#compmodify_dialog" class="btn btn-primary" value="修改" />
                        </a>
                        <a href="#" @click.prevent="del(item.id)">
                            <input type="button" class="btn btn-danger" value="删除" />
                        </a>
                    </td>
                </tr>
            </tbody>
        </table>
        <!-- 底部索引 -->
        <div class="box-pagination">
            <ul class="pagination">
                <li><a href="#" aria-label="Previous" @click="getpageinfo(1)">首页</a></li>
            </ul>
            <ul class="pagination">
                <li><a href="#" @click="getprepageinfo()">&laquo;</a></li>
            </ul>
            <ul v-for="i in page" class="pagination">
                <li><a href="#" @click="getpageinfo(i)">{{i}}</a></li>
            </ul>
            <ul class="pagination">
                <li><a href="#" @click="getaftpageinfo()">&raquo;</a></li>
            </ul>
            <ul class="pagination">
                <li><a href="#" aria-label="Previous" @click="getpageinfo(page)">尾页</a></li>
            </ul>
        </div>
    </div>
</template>

// 网课管理 （comp3）
var register = {
    template: '#comp3',
    data() {
        return {
            isActive: false,
            selected: -1,
            selectedlist: {},
            classifyName: '',
            keywords: '',
            id: '',
            subClassifyName: '',
            creatTime: '',
            updateTime: '',

            pagenum: '',
            page: '',

            list: [],
        }
    },
    props: ['clist'],
    methods: {
        // 修改数据
        showOverlay(index) {
            this.selected = index;
            this.selectedlist = this.list[index];
            this.changeOverlay();
        },
        // 点击保存按钮
        modify(arr) {
            if (this.selected > -1) {
                Vue.set(this.list, this.selected, arr);
                this.selected = -1;
            } else {
                this.list.push(arr);
            }
            this.setSlist(this.list);
            this.changeOverlay();
        },
        // 添加 
        add: function() {
            //获取id subClassifyName 加入到数组
            var car = {
                id: this.id,
                subClassifyName: this.subClassifyName,
                createTime: new Date()
            }
            this.list.push(car)
            /*重置id subClassifyName 让对话栏里值空*/
            this.id = this.subClassifyName = ''
        },
        // 发起get请求后通过.then获取服务器返回的内容
        getpageinfo(pagenum) {
            this.pagenum = pagenum;
            this.$http.get('http://10.0.41.100:8096/course/list/' + pagenum).then(function(result) {
                this.list = result.body.list
                this.page = Math.ceil(result.body.total / 5)
                /*alert(Math.ceil(result.body.total/5))*/
            })
        },
        getprepageinfo() {
            if (this.pagenum > 0) {
                this.pagenum = this.pagenum - 1;
            }
            /*alert(pagenum)*/
            this.$http.get('http://10.0.41.100:8096/course/list/' + this.pagenum).then(function(result) {
                this.list = result.body.list
                this.page = Math.ceil(result.body.total / 5)
            })
        },
        getaftpageinfo() {
            if (this.pagenum < this.page) {
                this.pagenum = this.pagenum + 1;
            }
            /*alert(pagenum)*/
            this.$http.get('http://10.0.41.100:8096/course/list/' + this.pagenum).then(function(result) {
                this.list = result.body.list
                this.page = Math.ceil(result.body.total / 5)
            })

        },
        getinfo() {
            this.$http.get('http://10.0.41.100:8096/course/list/' + '1').then(function(result) {
                this.list = result.body.list
                this.page = Math.ceil(result.body.total / 5)
                /*alert(Math.ceil(result.body.total/5))*/
            })

        },
        /*根据id找到数据用list的 splice方法删除*/
        del(id) {
            this.list.some((item, i) => {
                if (item.id == id) {
                    this.list.splice(i, 1)
                    return true;
                }
            })
        },
        /*更改覆盖*/
        changeOverlay() {
            // 重置控件状态
            this.selected = -1;
            this.isActive = !this.isActive;
            this.createTime = new Date();
        },
        /*查询*/
        search(keywords) {
            /*includes() 检索该字符串中是否包含指定字符  是  返回*/
            return this.list.filter(item => {
                if (item.subClassifyName.includes(keywords)) {
                    return item
                }
            })
        }
    },
    created() { // 模板加载完成后立刻请求数据
        this.getinfo();
    }
}
// 网课管理 的模态框
Vue.component('model', {
    props: ['list', 'isactive', 'selectedlist', ],
    template: "#compmodify",
    computed: {
        modifylist() {
            return this.list;
        }
    },
    methods: {
        changeActive() {
            this.$emit('change');
        },
        modify() {
            this.$emit('add', this.modifylist);
        }
    }
});

/*1、日期过虑器--全局*/
Vue.filter('dateFormat', function(dateStr, pattern = "") {
    // 根据给定字符串 得到特定时间  yyyy-mm-dd
    var dt = new Date(dateStr)
    var y = dt.getFullYear()
    var m = dt.getMonth() + 1 //month从0开始
    var d = dt.getDate()
        
    if(pattern.toLowerCase() === 'yyyy-mm-dd') { //toLowerCase() 转换成小写
        return `${y}-${m}-${d}`
    } else {
        var hh = dt.getHours()
        var mm = dt.getMinutes()
        var ss = dt.getSeconds()
        return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
    }
})
/*2、自动获取光标--用Vue.directive()定义全局指令*/
Vue.directive('focus', {
    inserted: function(el) { // 表示元素插入到DOM中的时候，会执行inserted函数
        el.focus()
    },
})