This commit is contained in:
こぴなたみぽ 2018-02-11 17:04:03 +09:00
parent b8f7eb9b58
commit b427807bf6
1 changed files with 24 additions and 42 deletions

View File

@ -1,5 +1,5 @@
<template> <template>
<div class="mk-timeline"> <div class="mk-timeline" ref="root">
<template each={ post, i in posts }> <template each={ post, i in posts }>
<mk-timeline-post post={ post }/> <mk-timeline-post post={ post }/>
<p class="date" v-if="i != posts.length - 1 && post._date != posts[i + 1]._date"><span>%fa:angle-up%{ post._datetext }</span><span>%fa:angle-down%{ posts[i + 1]._datetext }</span></p> <p class="date" v-if="i != posts.length - 1 && post._date != posts[i + 1]._date"><span>%fa:angle-up%{ post._datetext }</span><span>%fa:angle-down%{ posts[i + 1]._datetext }</span></p>
@ -10,49 +10,31 @@
</div> </div>
</template> </template>
<script lang="typescript"> <script lang="ts">
this.posts = []; import Vue from 'vue';
this.on('update', () => { export default Vue.extend({
this.posts.forEach(post => { props: ['posts'],
const date = new Date(post.created_at).getDate(); computed: {
const month = new Date(post.created_at).getMonth() + 1; _posts(): any {
post._date = date; return this.posts.map(post => {
post._datetext = `${month}${date}`; const date = new Date(post.created_at).getDate();
}); const month = new Date(post.created_at).getMonth() + 1;
post._date = date;
post._datetext = `${month}${date}`;
return post;
});
},
tail(): any {
return this.posts[this.posts.length - 1];
}
},
methods: {
focus() {
this.$refs.root.children[0].focus();
}
}
}); });
this.setPosts = posts => {
this.update({
posts: posts
});
};
this.prependPosts = posts => {
posts.forEach(post => {
this.posts.push(post);
this.update();
});
}
this.addPost = post => {
this.posts.unshift(post);
this.update();
};
this.tail = () => {
return this.posts[this.posts.length - 1];
};
this.clear = () => {
this.posts = [];
this.update();
};
this.focus = () => {
this.root.children[0].focus();
};
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>