wikijs-fork/client/js/components/anchor.vue

56 lines
1.5 KiB
Vue
Raw Normal View History

2017-05-22 17:32:52 +00:00
<template lang="pug">
2017-05-27 02:43:34 +00:00
transition(:duration="400")
.modal(v-show='isShown', v-cloak)
transition(name='modal-background')
.modal-background(v-show='isShown')
.modal-container
transition(name='modal-content')
.modal-content(v-show='isShown')
header.is-blue
span {{ $t('modal.anchortitle') }}
2017-05-27 02:43:34 +00:00
section
p.control.is-fullwidth
input.input(type='text', ref='anchorURLinput', v-model='anchorURL')
footer
a.button.is-grey.is-outlined(v-on:click='cancel') {{ $t('modal.discard') }}
a.button.is-blue(v-clipboard='anchorURL', @success="clipboardSuccess", @error="clipboardError") {{ $t('modal.copyclipboard') }}
2017-05-21 03:21:16 +00:00
</template>
<script>
2017-10-30 01:36:05 +00:00
export default {
name: 'anchor',
data () {
return {}
},
computed: {
anchorURL () {
return window.location.href.split('#')[0] + '#' + this.$store.state.anchor.hash
2017-05-22 17:32:52 +00:00
},
2017-10-30 01:36:05 +00:00
isShown () {
return this.$store.state.anchor.shown
}
},
methods: {
cancel () {
this.$store.dispatch('anchor/close')
},
clipboardSuccess () {
this.$store.dispatch('alert', {
style: 'blue',
icon: 'business_notes',
msg: this.$t('modal.anchorsuccess')
})
this.$store.dispatch('anchor/close')
2017-05-22 17:32:52 +00:00
},
2017-10-30 01:36:05 +00:00
clipboardError () {
this.$store.dispatch('alert', {
style: 'red',
icon: 'business_notes',
msg: this.$t('modal.anchorerror')
})
this.$refs.anchorURLinput.select()
2017-05-21 03:21:16 +00:00
}
}
2017-10-30 01:36:05 +00:00
}
2017-05-21 03:21:16 +00:00
</script>