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: guanchao_gc@qq.com
     * @date: 2021-01-10 
     */
    watch(
      () => common.drawerShow,
      () => {
        data.drawerShow = common.drawerShow;
      }
    );
    /**
     * @name: 声明data
     * @author: camellia
     * @email: guanchao_gc@qq.com
     * @date: 2021-01-10 
     */
    const data = reactive({
      drawerShow: common.drawerShow,
    });
    /**
     * @name: 关闭组件
     * @author: camellia
     * @email: guanchao_gc@qq.com
     * @date: 2021-01-10 
     */
    const close = () => {
      data.drawerShow = false;
      common.drawerShow = data.drawerShow;
    }
    /**
     * @name: 将data绑定值dataRef
     * @author: camellia
     * @email: guanchao_gc@qq.com
     * @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,
    },
};

最终效果如下图所示：

20210426090850945.gif

有好的建议，请在下方输入你的评论。

欢迎访问个人博客
https://guanchao.site