<template>
    <div id="customMenu" ref="customMenu">
        <ul v-for="item in this.menu" :key="item.name">
            <li @click="clickBtn(item.method)">{{ item.name }}</li>
        </ul>
    </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
        menu:[]
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {},
  methods: {
    open(style,menu){
        if(menu){
            this.menu = menu
        }else{
            this.menu = [
                {
                    name: "波浪线",
                    method: "wave",
                },
                {
                    name: "下划线",
                    method: "underscore",
                },
                {
                    name: "加粗",
                    method: "bold",
                },
            ]
        }
        var customMenu = this.$refs.customMenu
        customMenu.style.display = style.display;
        customMenu.style.left = style.left;
        customMenu.style.top = style.left;
    },
    close(){
        var customMenu = this.$refs.customMenu
        customMenu.style.display = 'none';
    },
    clickBtn(method){
        this.$emit('click',method)
    }
  },
};
</script>
<style lang="scss" scoped>
#customMenu {
   display: none; /* 初始状态下不显示 */
   position: absolute;
}
</style>