wip
This commit is contained in:
parent
c70e56dd1d
commit
a89aea142b
|
@ -1,80 +0,0 @@
|
||||||
<mk-detailed-post-window>
|
|
||||||
<div class="bg" ref="bg" @click="bgClick"></div>
|
|
||||||
<div class="main" ref="main" v-if="!fetching">
|
|
||||||
<mk-post-detail ref="detail" post={ post }/>
|
|
||||||
</div>
|
|
||||||
<style lang="stylus" scoped>
|
|
||||||
:scope
|
|
||||||
display block
|
|
||||||
opacity 0
|
|
||||||
|
|
||||||
> .bg
|
|
||||||
display block
|
|
||||||
position fixed
|
|
||||||
z-index 1000
|
|
||||||
top 0
|
|
||||||
left 0
|
|
||||||
width 100%
|
|
||||||
height 100%
|
|
||||||
background rgba(0, 0, 0, 0.7)
|
|
||||||
|
|
||||||
> .main
|
|
||||||
display block
|
|
||||||
position fixed
|
|
||||||
z-index 1000
|
|
||||||
top 20%
|
|
||||||
left 0
|
|
||||||
right 0
|
|
||||||
margin 0 auto 0 auto
|
|
||||||
padding 0
|
|
||||||
width 638px
|
|
||||||
text-align center
|
|
||||||
|
|
||||||
> mk-post-detail
|
|
||||||
margin 0 auto
|
|
||||||
|
|
||||||
</style>
|
|
||||||
<script lang="typescript">
|
|
||||||
import * as anime from 'animejs';
|
|
||||||
|
|
||||||
this.mixin('api');
|
|
||||||
|
|
||||||
this.fetching = true;
|
|
||||||
this.post = null;
|
|
||||||
|
|
||||||
this.on('mount', () => {
|
|
||||||
anime({
|
|
||||||
targets: this.root,
|
|
||||||
opacity: 1,
|
|
||||||
duration: 100,
|
|
||||||
easing: 'linear'
|
|
||||||
});
|
|
||||||
|
|
||||||
this.api('posts/show', {
|
|
||||||
post_id: this.opts.post
|
|
||||||
}).then(post => {
|
|
||||||
|
|
||||||
this.update({
|
|
||||||
fetching: false,
|
|
||||||
post: post
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
this.close = () => {
|
|
||||||
this.$refs.bg.style.pointerEvents = 'none';
|
|
||||||
this.$refs.main.style.pointerEvents = 'none';
|
|
||||||
anime({
|
|
||||||
targets: this.root,
|
|
||||||
opacity: 0,
|
|
||||||
duration: 300,
|
|
||||||
easing: 'linear',
|
|
||||||
complete: () => this.$destroy()
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
this.bgClick = () => {
|
|
||||||
this.close();
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
</mk-detailed-post-window>
|
|
Loading…
Reference in New Issue