vue3-ts项目练习

项目是对一些vue3新语法的使用，以及对ts的使用，基本都是一些常用逻辑，主要学习了一些组件的封装, 以及将一些逻辑封装成hooks。自己来实现一些常见ui库的一些组件。

1.axios封装

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

axios.defaults.baseURL = "/api/api/";    //配置默认url<br>// 对请求做封装，请求的时候加载loading组件，响应的时候关闭，收集错误的响应信息。 axios.interceptors.request.use((config) => {   store.commit("setLoading", true);   store.commit("setError", { status: false, message: "" });   return config; });　　　　　　　　　　 axios.interceptors.response.use(   (config) => {     store.commit("setLoading", false);     return config;   },   (e) => {     console.log(e.response);     const { error } = e.response.data;     store.commit("setError", { status: true, message: error });     store.commit("setLoading", false);     return Promise.reject(error);   } );

2.router，store的使用

?

1 2 3 4 5

import { useRouter } from "vue-router"; import { useStore } from "vuex";   const router = useRouter(); const store = useStore();

3.权限认证，可以在路由的meta里面添加对应信息，在route.beforeEach中添加相应的权限认证。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

const route = createRouter({   history: routerHistory,   routes: [     {       path: "/",       name: "home",       component: Home,     },     {       path: "/login",       name: "login",       component: Login,       meta: { redirectAlreadyLogin: true },     } ] })

4.setup中有两个参数，props，context

props为父组件传的参数，context中包含attrs 、 emit 、slots

5.封装一些组件，封装前想好可能的参数，自定义部分用slot来实现，将需要自定义的部分尽量细分。

6.drowdown组件的封装。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<dropdown :title="`你好 ${user.nickName}`">   <dropdown-item     ><a class="dropdown-item" href="#" @click.prevent="toCreate"       >新建文章</a     ></dropdown-item   >   <dropdown-item :disabled="true"     ><a class="dropdown-item" href="#">编辑资料</a></dropdown-item   >   <dropdown-item     ><a class="dropdown-item" href="#" @click="logout"       >退出登陆</a     ></dropdown-item   > </dropdown>

　　内部实现：dropdown中展示一个title，以及一个ul，ul中用slot来留给dropdown-item。

?

1 2 3 4 5 6 7 8 9 10 11 12

<div class="dropdown" ref="drowDownRef">   <a     href="#"     class="btn btn-outline-light my-2 dropdown-toggle"     @click.prevent="toggleOpen"   >     {{ title }}   </a>   <ul class="dropdown-menu" :style="{ display: 'block' }" v-if="isOpen">     <slot></slot>   </ul> </div>

　dropdown-item，外层用li，里面用slot自由发挥

?

1 2 3

<li class="dropdown-option" :class="{ 'is-disabled': disabled }">   <slot></slot> </li>

　判断当鼠标点击下拉框外部的时候下拉框关闭：点击处于非下拉框&&下拉框打开。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

import { ref, onMounted, onUnmounted, Ref } from "vue";   const useClickOutSide = (elementRef: Ref<null | HTMLElement>) => {   const isClickOutSide = ref(false);   const handler = (e: MouseEvent) => {     if (elementRef.value) {       if (!elementRef.value.contains(e.target as HTMLElement)) {         isClickOutSide.value = false;       } else {         isClickOutSide.value = true;       }     }   };   onMounted(() => {     document.addEventListener("click", handler);   });   onUnmounted(() => {     document.removeEventListener("click", handler);   });   return isClickOutSide; }; export default useClickOutSide;

　　

7.用teleport，封装一个最外层的loading组件

8.validateForm的封装，表单验证组件，分成表单及详细的input框，textarea框

　　validateForm

?

1 2 3 4 5 6 7 8

<form class="validate-form-container">   <slot name="default"></slot>   <div class="submit-area" @click.prevent="submitForm">     <slot name="submit">       <button type="submit" class="btn btn-primary">提交</button>     </slot>   </div> </form>

　　validateInput

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<input   v-if="tag !== 'textarea'"   class="form-control"   :class="{ 'is-invalid': inputRef.error }"   @blur="validateInput"   :value="inputRef.val"   @input="updateValue"   v-bind="$attrs" /> <textarea   v-else   class="form-control"   :class="{ 'is-invalid': inputRef.error }"   @blur="validateInput"   :value="inputRef.val"   @input="updateValue"   v-bind="$attrs" ></textarea> <span v-if="inputRef.error" class="invalid-feedback">{{   inputRef.message }}</span>

9.以及上传组件，消息框组件

10.封装路由导航hooks

?

1 2 3 4 5 6 7 8 9 10 11 12

// import { useRouter, RouteParamsRaw } from "vue-router"; import Vrouter, { RouteParamsRaw } from "vue-router"; const router = Vrouter; export default function useNavigate(   route: string,   params?: RouteParamsRaw ): void {   router.push({     name: route,     params,   }); }