56 lines
1.1 KiB
Vue
56 lines
1.1 KiB
Vue
|
<template>
|
||
|
|
<slot v-if="show" name="default" />
|
||
|
|
<span v-else>***</span>
|
||
|
|
<button :class="`tag button icon is-${button_class} ml-2`" @click="on_click">
|
||
|
|
<font-awesome-icon :icon="`fa-solid fa-${button_icon}`" />
|
||
|
|
</button>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
import { Options, Vue } from "vue-class-component";
|
||
|
|
|
||
|
|
enum ClickState {
|
||
|
|
Green = 0,
|
||
|
|
Yellow = 1,
|
||
|
|
Red = 2,
|
||
|
|
}
|
||
|
|
|
||
|
|
@Options({
|
||
|
|
emits: ["load"],
|
||
|
|
})
|
||
|
|
export default class extends Vue {
|
||
|
|
public click_state = ClickState.Green;
|
||
|
|
|
||
|
|
public on_click(): void {
|
||
|
|
this.click_state = (this.click_state + 1) % 3;
|
||
|
|
|
||
|
|
if (this.click_state === ClickState.Red) {
|
||
|
|
this.$emit("load");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
public get show(): boolean {
|
||
|
|
return this.click_state === ClickState.Red;
|
||
|
|
}
|
||
|
|
|
||
|
|
public get button_class(): string {
|
||
|
|
switch (this.click_state) {
|
||
|
|
case ClickState.Red:
|
||
|
|
return "danger";
|
||
|
|
case ClickState.Yellow:
|
||
|
|
return "warning";
|
||
|
|
default:
|
||
|
|
return "primary";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
public get button_icon(): string {
|
||
|
|
if (this.click_state === ClickState.Red) {
|
||
|
|
return "eye-slash";
|
||
|
|
} else {
|
||
|
|
return "eye";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|