vue alert component

alert.vue

import { default } from '../views/Home.vue';
<template>
  <div v-if="displayRef > 0">
    <p class="number-dispaly-old">
      title:{{ title }}
    </p>
    <p class="number-dispaly-old">
      desc:{{ desc }}
    </p>
    <button
      v-on:click="completed(0)"
      v-if="isDisplayButton(0)"
      class="btn btn-lg btn-color-primary"
    >
      {{ displayButton(0) }}
    </button>
    <button
      v-on:click="completed(1)"
      v-if="isDisplayButton(1)"
      class="btn btn-lg btn-color-primary"
    >
      {{ displayButton(1) }}
    </button>
  </div>
</template>
<script lang="ts">
/* eslint-disable */
import {
  defineComponent,
  ref,
  watch,
  reactive,
  computed,
  Ref
} from "@vue/composition-api";

export type AlertCompletedBlock = (index: number) => void;
interface Props {
  display: number;
  completedBlock: AlertCompletedBlock | null;
  title: string;
  desc: string;
  buttonTitles: string[];
}

// const alertInit: Props = {
//   display: 0,
//   title: "",
//   desc: "",
//   completedBlock: null,
//   buttonTitles: ["OK"]
// };

// type Props = {alert:Alert};

export default defineComponent<Props>({
  name: "Alert3",
  props:
   {
        display:{default:true, required:true},
        title:{default:"", required:true},
        desc:{default:"", required:true},
        buttonTitles:{default:["OK"], required:true},
        completedBlock:{default:()=>{}, required:true}
   } 
  ,
  setup(props, context) {
    const {displayRef,
         isDisplayButton, 
         displayButton, 
         completed} = useAlert(props);

    return {
      displayRef,
      isDisplayButton,
      displayButton,
      completed
    };
  }
});

function useAlert(alert:Props) {
    const displayRef = computed(() => alert.display);
    const isDisplayButton = useDisplayButton(alert.buttonTitles);
    const displayButton = useDisplayButtonTitle(alert.buttonTitles);
    const completed = useCompleted(alert);// ここでalert.completedBlockを渡すと反応しない。
    return {displayRef, isDisplayButton, displayButton, completed}
}

function useDisplayButton(buttonTitles: string[]): (val: number) => boolean {
  return (val: number): boolean => {
    if (buttonTitles.length > val) {
      return true;
    }
    return false;
  };
}

function useDisplayButtonTitle(
  buttonTitles: string[]
): (val: number) => string {
  return (val: number): string => {
    if (buttonTitles.length > val) {
      return buttonTitles[val];
    }
    return "";
  };
}

function useCompleted(alert:Props):(val:number) => void {
    return (val:number) => {
        console.log("completed:" + val);
        if (alert.completedBlock) {
            console.log("completeBlock:" + alert.completedBlock);
            alert.completedBlock(val); 
        }
    }
}

</script>

usage

  this.showAlert2(
      this.alert,
      "title",
      "desc",
      ["OK", "Cancel"],
      result => {
        console.log("result:" + result);
        this.alert2.display = 0;
      }

showAlert2(
    alert: Alert,
    title: string,
    desc: string,
    buttonTitles: string[],
    complete: (index: number) => void
  ) {
    console.log("showAlert");
    this.alert.title = title;
    this.alert.desc = desc;
    this.alert.buttonTitles = buttonTitles;
    this.alert.completedBlock = complete;
    this.alert.display = alert.display + 1;
  }

}

After refactoring,

usage

    <alert3
      v-bind:display="alert3.display"
      v-bind:completedBlock="alert3.completedBlock"
      v-bind:title="alert3.title"
      v-bind:desc="alert3.desc"
      v-bind:buttonTitles="alert3.buttonTitles"
    >

 onClickAlertTest4() {
    this.alert3.completedBlock =  (result:number) => {
        console.log("result:" + result);
        this.alert3.display = 0;
      };
    this.alert3.title = "title";
    this.alert3.desc = "test";
    this.alert3.buttonTitles = ["OK", "Cancel"];
    this.alert3.display = this.alert3.display + 1;