I’m planning to do a little instant chat feature here, and the plan is to implement it in a drawer component.

I don’t know if it will work out in the end, I haven’t done it before, but the drawer assembly can be made in advance, it is not very difficult.

Code:

The Drawer. Vue:

<template>
  <div class="drawer">
    <! -- Mask layer -->
    <div class="mask-show" v-if="drawerShow" @click="close()" ></div>
    <! -- Drawer layer -->
    <div class="setbox" :class="{show: drawerShow}">
      <div class="header">
        <p class="fl">Instant messaging</p>
        <button class="off" @click="close()">Shut down</button>
      </div>
    </div>
  </div>
</template>
<script>
  // Import the js file
  import Drawer from "/@/assets/js/components/pc/Drawer";
  // Use the js object
  export default {
    ...Drawer,
  };
</script>
<style lang="scss" scoped>
    @import ".. /.. /assets/css/components/pc/Drawer.scss";
</style>
Copy the code

The Drawer. Ts:

import { useRouter } from "vue-router";
import {
  PropType,
  ref,
  watch,
  reactive,
  toRefs,
  inject,
  provide,
  onMounted
} from "vue";
import { common } from "/@/hooks/common.ts";
// Define the return type
interface dataRef {
  close: () = > void;
}
export default {
  name: "Drawer".// the VUE3 syntax setup function
  / / setup the official document: https://www.vue3js.cn/docs/zh/guide/composition-api-setup.html# parameters
  setup(props: any.content:any): dataRef 
  {
    const router = useRouter();
    / * * *@name: Listens for changes in public status bar values *@author: camellia
     * @email: guanchao_gc@qq.com
     * @date: the 2021-01-10 * /
    watch(
      () = > common.drawerShow,
      () = >{ data.drawerShow = common.drawerShow; });/ * * *@name: Declares data *@author: camellia
     * @email: guanchao_gc@qq.com
     * @date: the 2021-01-10 * /
    const data = reactive({
      drawerShow: common.drawerShow,
    });
    / * * *@name: Closes component *@author: camellia
     * @email: guanchao_gc@qq.com
     * @date: the 2021-01-10 * /
    const close = () = > {
      data.drawerShow = false;
      common.drawerShow = data.drawerShow;
    }
    / * * *@name: Binds data to the value dataRef *@author: camellia
     * @email: guanchao_gc@qq.com
     * @date: the 2021-01-10 * /
    const dataRef = toRefs(data);
    return{ close, ... dataRef } }, }Copy the code

The Drawer. SCSS:

.drawer {
  // height: 500px;
  width:100%;
  display:flex;
  display:-webkit-flex;
  flex-direction:column;  
  Mask / * * /
  .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 1sease; // Animate (position from -32%become0)right: -32%;
      padding:0px 0px 0px 20px; } / / animation.show {
    right: 0; }}Copy the code

Component call:

<template> <! -- Drawer Assembly --><drawer></drawer>
</template>
import {
    PropType,
    ref,
watch
} from "vue";
 
import Drawer from "/@/components/pc/Drawer.vue";
// Introduce the Axios hook
import axios from "/@/hooks/axios.ts";
export default {
    name: "label".components: {
        Drawer,
    },
};
Copy the code

The final effect is as shown below:

For good suggestions, please enter your comments below.

Welcome to guanchao.site

Welcome to applet: