VUE3（三十）自定義抽屜組件Drawer

我這里計划做一個即時聊天的小功能，計划是在一個抽屜組件中實現這個功能。

但是最后能不能成功我也不知道，畢竟我沒做過，但是抽屜組件可以提前做一個嘛，這個不是很難。

代碼：

Drawer.vue：

<template>
  <div class="drawer">
    <!-- 遮罩層 -->
    <div class="mask-show" v-if="drawerShow" @click="close()" ></div>
    <!-- 抽屜層 -->
    <div class="setbox" :class="{show: drawerShow}">
      <div class="header">
        <p class="fl">即時聊天</p>
        <button class="off" @click="close()">關閉</button>
      </div>
    </div>
  </div>
</template>
<script>
  // 引入js文件
  import Drawer from "/@/assets/js/components/pc/Drawer";
  // 使用js對象
  export default {
    ...Drawer,
  };
</script>
<style lang="scss" scoped>
    @import "../../assets/css/components/pc/Drawer.scss";
</style>

Drawer.ts：

import { useRouter } from "vue-router";
import {
  PropType,
  ref,
  watch,
  reactive,
  toRefs,
  inject,
  provide,
  onMounted
} from "vue";
import { common } from "/@/hooks/common.ts";
// 定義返回的類型
interface dataRef {
  close: () => void;
}
export default {
  name: "Drawer",
  // VUE3語法 setup函數
  // setup官方文檔:https://www.vue3js.cn/docs/zh/guide/composition-api-setup.html#參數
  setup(props: any, content:any): dataRef 
  {
    const router = useRouter();
    /**
     * @name: 監聽公共狀態欄值變化
     * @author: camellia
     * @email: [e-mail]
     * @date: 2021-01-10 
     */
    watch(
      () => common.drawerShow,
      () => {
        data.drawerShow = common.drawerShow;
      }
    );
    /**
     * @name: 聲明data
     * @author: camellia
     * @email: [e-mail]
     * @date: 2021-01-10 
     */
    const data = reactive({
      drawerShow: common.drawerShow,
    });
    /**
     * @name: 關閉組件
     * @author: camellia
     * @email: [e-mail]
     * @date: 2021-01-10 
     */
    const close = () => {
      data.drawerShow = false;
      common.drawerShow = data.drawerShow;
    }
    /**
     * @name: 將data綁定值dataRef
     * @author: camellia
     * @email: [e-mail]
     * @date: 2021-01-10 
     */
    const dataRef = toRefs(data);
    return {
      close,
      ...dataRef
    }
  },
}

Drawer.scss：

.drawer {
  // height: 500px;
  width:100%;
  display:flex;
  display:-webkit-flex;
  flex-direction:column;  
  /* 遮罩 */
  .mask-show {
    position:fixed;
      z-index:100;
      top:0px;
      bottom:0px;
      width:100%;
      height:100%;
      background-color: rgba(0, 0, 0, 0.5);
  }
  .setbox{
      position:fixed;
      z-index:1100;
      top:0px;
      bottom:0px;
      width:30%;
      height:100%;
      background:#FFFFFF;
      border-left: 1px solid #CFD8DC!important;
      box-shadow:0px 3px 12px rgba(0,0,0,0.12);
      -webkit-transition: all 1s ease;
      transition: all 1s ease;
      // 動畫（定位從 -32% 變成 0）
      right:-32%;
      padding:0px 0px 0px 20px;
  }
  // 動畫
  .show {
    right: 0;
  }
}

組件調用：

<template>
    <!-- 抽屜組件 -->
    <drawer></drawer>
</template>
import {
    PropType,
    ref,
watch
} from "vue";
 
import Drawer from "/@/components/pc/Drawer.vue";
// 引入axios鈎子
import axios from "/@/hooks/axios.ts";
export default {
    name: "label",
    components: {
        Drawer,
    },
};

最終效果如下圖所示：

有好的建議，請在下方輸入你的評論。

歡迎訪問個人博客
https://guanchao.site

歡迎訪問小程序：