瀏覽代碼

characters menu bubble or not bubble !

master
choj 4 年之前
父節點
當前提交
e33440db7e
共有 1 個文件被更改,包括 83 次插入0 次删除
  1. +83
    -0
      src/components/CharactersMenu.vue

+ 83
- 0
src/components/CharactersMenu.vue 查看文件

@@ -0,0 +1,83 @@
<template>

<div @hide="hideLinkMenu" class="menubar char-menubar">

<div v-bind:key="opt.label" v-for="opt in environment.getCharacterOptions()" class="dropdown">
<button class="dropbtn border-left">{{opt.label|capitalize}}</button>
<div class="dropdown-content">
<a v-for="style in opt.styles" v-bind:key="style.label">
<button
class="menubar__button"
:class="{ 'is-active': slots.isActive.customstyle({ type: style.class }) }"
@click="slots.commands.customstyle({ type: style.class })">
{{style.label | capitalize}}
</button>
</a>
</div>
</div>


<form class="menububble__form" v-if="linkMenuIsActive"
@submit.prevent="setLinkUrl(slots.commands.link, linkUrl)">
<input class="menububble__input" type="text" v-model="linkUrl" placeholder="https://"
ref="linkInput" @keydown.esc="hideLinkMenu"/>
<button class="menububble__button" @click="setLinkUrl(slots.commands.link, null)" type="button">
Supprimer le lien
</button>
</form>

<template v-else>
<button id="link__button"
class="menububble__button"
@click="showLinkMenu(slots.getMarkAttrs('link'))"
:class="{ 'is-active': slots.isActive.link() }"
>
<span>{{ slots.isActive.link() ? 'Modifier le lien' : 'Lien'}}</span>
</button>
</template>
</div>

</template>

<script>


export default {
props: ["slots","environment"],
components: {},
data() {
return {
linkUrl: null,
linkMenuIsActive: false,
}
},
beforeDestroy() {

},

mounted() {

},

methods: {

showLinkMenu(attrs) {
this.linkUrl = attrs.href
this.linkMenuIsActive = true
this.$nextTick(() => {
this.$refs.linkInput.focus()
})
},
hideLinkMenu() {
this.linkUrl = null
this.linkMenuIsActive = false
},
setLinkUrl(command, url) {
command({href: url})
this.hideLinkMenu()
},

}
}
</script>


Loading…
取消
儲存