【流莺书签】基础组件(Button,Overlay,Dialog,Message)

├── src 
     ├── assets      // 存放静态资源
     ├── baseComponents  // 基础组件
         └──Button    // 按钮组件
         │    └──Button.vue
         └── Message    // 弹窗组件
              ├──Message.vue
              └──index.ts
                 ......

<template>
  <div class="wh-button-box">
    <div class="btn">
      <a :class="{animation:useAnimation}" href="#">{{title}}</a>
    </div>
  </div>
</template>

<script lang='ts'>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Wh-button',
  props: {
    title: {
      type: String,
      default: '按钮',
    },
    backgroundColor: {
      type: String,
      default: 'rgba(16, 143, 111, 0.3)',
    },
    useAnimation: {
      type: Boolean,
      default: false,
    },
  },
  setup() {
    return {};
  },
});
</script>

<style lang='scss'>
//此处省略部分CSS代码,详情请查看源码
.wh-button-box {
  .btn {
    &amp;:hover .animation::before {
      transform: skewX(45deg) translateX(200%);
    }
    &amp;:hover .animation {
      background: v-bind('state.color');
    }
  }
}
</style>

<wh-button @click="onConfirm"  title='确认' :use-animation="true" :background-color="`rgba(160, 21, 114, 0.3)`"></wh-button>
<wh-button @click="onCancle" title='取消' :use-animation="true"></wh-button>

<template>
  <!-- 传送门  此处Dom节点会被插在body里 -->
  <teleport to='body'>
    <!-- 过渡动画  添加了0.3s的淡入淡出  显得更加平滑 -->
    <transition name="base">
      <!-- 遮罩层 -->
      <div class="overly" :style="`z-index:${zIndex}`" v-if="show" @click='handleClick'></div>
    </transition>
  </teleport>
</template>

<script lang='ts'>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Overlay',
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    zIndex: {
      type: Number,
      default: 2000,
    },
    closeOnClickModal: {
      type: Boolean,
      default: false,
    },
  },
  emits: ['close'],
  setup(props, { emit }) {
    const handleClick = () => {
      if (props.closeOnClickModal) {
        emit('close');
      }
      return;
    };
    return {
      handleClick,
    };
  },
});
</script>

<style lang='scss'>
//此处省略部分CSS代码,详情请查看源码
//淡入淡出
.base-enter-active,
.base-leave-active {
  transition: all 0.3s ease;
}
.base-enter-to,
.base-leave-from {
  opacity: 1;
}
.base-enter-from,
.base-leave-to {
  opacity: 0;
}
</style>

<overlay :show='dialogVisible' @close='onCancle' :close-on-click-modal='true'></overlay>

//创建DOM节点的hook函数 在body中插入一个自定义class的div节点 
//setup函数在执行时等同于created 所以没必要写入生命周期
import { onUnmounted } from 'vue';
const useDOMCreate = (nodeId: string): HTMLDivElement => {
  // 生成一个div的节点
  const node = document.createElement('div');
  // 给赋值一个class
  node.className = nodeId;
  // 在body中插入div节点
  document.body.appendChild(node);
  // 在组件卸载的时候移除dom节点
  onUnmounted(() => {
    document.body.removeChild(node);
  });
  return node;
};
export default useDOMCreate;

<template>
  <!-- 遮罩层 -->
  <overlay :show='dialogVisible' @close='onCancle' :close-on-click-modal='true'></overlay>
  <!-- 传送门  此处Dom节点会被插在.Dialog里 -->
  <teleport to='.Dialog'>
    <div class="dialog-box" v-bind='$attrs'>
      <!-- 过渡动画  添加了0.3s的淡入淡出  并且有20px的移动 显得更加平滑 -->
      <transition name="dialog">
        <div class="dialog-content" v-if='dialogVisible' :style="`width:${width};margin-top:${top}`">
          <!-- Dialog组件header部分 -->
          <div class="dialog-header">
            <h5 class="dialog-title">{{title}}</h5>
          </div>
          <!-- Dialog组件内容插槽 -->
          <slot>
          </slot>
          <!-- Dialog组件footer部分 -->
          <div class="dialog-footer">
            <wh-button @click="onConfirm" class="footer-btn" title='确认' :use-animation="true" :background-color="`rgba(160, 21, 114, 0.3)`"></wh-button>
            <wh-button @click="onCancle" class="footer-btn" title='取消' :use-animation="true"></wh-button>
          </div>
        </div>
      </transition>
    </div>
  </teleport>
</template>

<script lang='ts'>
//此处省略文件引用,详情请查看源码
export default defineComponent({
  components: {
    Overlay,
    WhButton,
  },
  name: 'Dialog',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '提示',
    },
    width: {
      type: String,
      default: '400px',
    },
    top: {
      type: String,
      default: '15vh',
    },
  },
  emits: ['cancle', 'confirm'],
  setup(props, { emit }) {
    // 创建dom节点 .Dialog
    useDOMCreate('Dialog');
    // 关闭Dialog
    const onCancle = () => {
      emit('cancle');
    };
    const onConfirm = () => {
      emit('confirm');
    };
    return {
      onCancle,
      onConfirm,
    };
  },
});
</script>

<style lang='scss'>
//此处省略部分CSS代码,详情请查看源码
.dialog-enter-active,
.dialog-leave-active {
  transition: all 0.3s ease;
}
.dialog-enter-to,
.dialog-leave-from {
  opacity: 1;
}
.dialog-enter-from,
.dialog-leave-to {
  transform: translateY(-20px);
  opacity: 0;
}
</style>

<!-- 添加单个书签的弹窗 -->
<Dialog :dialog-visible='isShowAddMarkDialog' @cancle='onCancle' @confirm='onConfirm' title='添加书签'>
  <wh-from ref='form'>
    </wh-from>
</Dialog>

//Message.vue
<template>
  <!-- 过渡效果 淡入淡出 并且移动一个身位 -->
  <transition name='message' @after-leave="$emit('destroy')">
    <div :class="classes" v-show='visiable' :style='styles' class="message">
      {{message}}
    </div>
  </transition>
</template>

<script lang='ts'>
//此处省略文件引用,详情请查看源码
export default defineComponent({
  name: 'Message',
  props: {
    id: {
      type: String,
      default: '',
    },
    type: {
      type: String as PropType<MessageType>,
      default: 'default',
    },
    message: {
      type: String,
      default: '这是一条提示',
    },
    duration: {
      type: Number,
      default: 2000,
    },
    offsetNumber: {
      type: Number,
      default: 0,
    },
  },
  setup(props) {
    const classes = computed(() => ['message-' + props.type]);
    const visiable = ref(false);
    let timer: any = null;
    const startTimer = () => {
      timer = setTimeout(() => {
        visiable.value = false;
      }, props.duration);
    };
    const styles = computed(() => {
      return { top: `${(props.offsetNumber - 1) * 55 + 20}px` };
    });
    // 组件渲染完了显示
    onMounted(() => {
      visiable.value = true;
      // 开启定时器
      startTimer();
    });
    onUnmounted(() => {
      clearTimeout(timer);
    });
    return {
      classes,
      visiable,
      styles,
    };
  },
});
</script>

<style lang='scss'>
//此处省略部分CSS代码,详情请查看源码
.message-enter-active,
.message-leave-active {
  transition: all 0.3s ease;
}
.message-enter-to,
.message-leave-from {
  opacity: 1;
}
.message-enter-from,
.message-leave-to {
  transform: translate(-50%,-100%);
  opacity: 0;
}
</style>

//index.ts
import Message from './Message.vue';
import { createVNode, render, VNode, reactive, computed } from 'vue';
// 类型
export type MessageType = 'success' | 'error' | 'default';
//一条消息的数据
export interface MessageOptions {
  id?: string;
  type?: MessageType;
  message?: string;
  duration?: number;
  offsetNumber?: number;
}

export type MessageParams = MessageOptions | string;
export type MessageList = MessageOptions[];

// 存放所有的message实例  用来计算偏移量
const instances = reactive<VNode[]>([]);
const offsetNumber = computed(() => instances.length + 1);
const createMessage = (options: MessageParams) => {
  // 如果参数是string类型,就把它转换为options对象
  if (typeof options === 'string') {
    options = {
      message: options,
    };
  }
  // 把组件创建为虚拟节点  也就是一个组件实例
  const vnode = createVNode(Message, {
    ...options,
    offsetNumber: offsetNumber.value,
  });

  // 创建一个容器
  const container = document.createElement('div');

  // 把实例渲染到容器里
  render(vnode, container);
  // 将渲染后的结果 放到body上
  // 因为会多一个div 所以插入第一个孩子
  // 为什么不直接放到body里,要创建一个容器再取里面的内容呢   为了销毁组件 如果直接放在body里,就清空所有节点了
  document.body.appendChild(container.firstElementChild!);
  instances.push(vnode);
  // 给实例添加一个销毁方法
  vnode.props!.onDestroy = () => {
    instances.shift();
    instances.forEach((item: any) => {
      item.component.props.offsetNumber -= 1;
    });
    // 移除dom
    render(null, container);
  };
};

export default createMessage;

//此处省略文件引用
createMessage({ type: 'success', message: '添加标签成功!' });