KingIQueen的博客

原创 ts类型适配（类型断言）Type Assertions

let message:any;message='abc'// message 赋值字符串，类型还是any类型message.endWith('c')//更改message类型-类型适配let str = (<string>message).endWith('c')// 第二种方法let str1 =（message as string）.endWith('c')...

原创 微前端启动所有子应用配置

原创 vue3.0技术——Teleport使用

原创 vue3技术Suspense使用

原创 vue3 中获取dom节点

<div ref="dropRef"></div><script lang="ts"> import {defineComponent, ref} from 'vue' export default defineComponent({ name:'Dropdown', setup(){ const dropRef = ref<null | HTMLElement>(null.

原创 vue3中suspense使用

<Suspanse> <template #default> // 自定义组件 <async></async> </template> <template #fallback> <h1>Loading !...</h1> </template></Suspense>自定义异步子组件...

原创 vue3中emit子组件使用

原创 vue3 teleport用法

app.vue文件中<div id="app"></div><div id="modal"></div>在modal.vue组建中<template> <teleport to="#madal"> <div>this is a modal</div> </teleport></template>在其他组件中引用modal组件使用

原创 vue3技术点 - 全局挂载

在main.js中import { createApp } from 'vue'import request from './utils/request'const app = createApp(app)app.config.globalProperties.$request = request //设置封装全局调用axios方法this.$request()axios二次封装

原创 mock数据 json-server

全局安装json-servernpm install json-server -g项目中创建db.json执行 json-server --watch db.json 启动项目中安装json-servernpm install json-server -D项目中创建文件夹__json_server_mock__，文件夹创建db.json文件在packge.json中配置启动npm run json-server...

原创 ES6 set集合简介

1、去重const arr = [1,1,2,2,]const arr2 = [...new Set(arr)]2、判断元素是否在集合中const arr = [1,1,2,2]const set = new Set(arr)const has = set.has(3)3、求交集const arr = [1,1,2,2]const set = new Set(arr)const set2 = new Set([2,3])const set3 = new Set([..

原创 qs使用介绍

题外：Object.assign({}, object)等同于：const result = {...object}qs格式化数据key=value&key1=value1npm i qs

原创 创建reacte+TS项目

npx create-react-app 项目名 --template typescripteslint、prettier、commitlint规范工程1、项目中安装插件prettiernpm install --save-dev --save-exact prettier2、创建.prettierrc.jsonecho {}> .prettierrc.json3、配置引入绝对路径tsconfig.json中配置baseurl: ./src4、配置commitlint

原创 表达式可选链“？.”使用

当前面表达式为undefind,获取undefind.属性不会报错，结果为undefind,上代码：表达式users.find(user=>user.id === project.personId) 结果有可能会返回undefind, 当返回undefind.name,代码会报错，使用"？.name"当为undefind时，会直接返回undefind不会报错...

原创 对比常见的mock方案 配置JSON SEVER

1、安装 json-servernpm i json-server -g2、启动serverjson-server --watch db.json 复制启动地址，到postman中，选择post请求添加数据3、项目中使用json-server　　npm i json-server -D创建__json_server_mock__文件夹，在此文件夹下创建db.json文件，在package.json中配置：json-server:"json-s...

原创 vue父组件向子组件动态传值的两种方法（父组件动态通过axios获取，子组件获取为空解决方法）

在一些项目需求中需要父组件向子组件动态传值，比如我这里的需求是，父组件动态通过axios获取返回的图片url数组然后传给子组件，上传图片的子组件拿到该数组后进行遍历并展示图片方法有两种，方法一：props传值，这里注意一个问题，传过来的值需要用watch监听并赋值，否则这里获取到的是空数组 父组件：<uploadImg :width="200" :height="200" name="productImage" size="750px*750px" ref="produc..

原创 Vue 父组件axios异步更新数据，子组件props 获取不到数据（mounted中），解决办法

当父组件axjos获取数据，子组件使用props接收数据时，执行mounted的时候axjos还没有返回数据，而且mounted只执行一次，这时 props中接收的数据为空解决方案：在对应组件中判断数据的长度...

原创 宇宙特效

宇宙特效body{margin: 0;padding: 0;background: url(images/bg.jpg);}         ul{          width: 600px;          height: 600px;          list-style: none;          margin: 500px auto;

原创 支付宝特效

支付宝特效         html,body{                 /*父元素.*/                 height: 100%;            }         body{                 display: flex;                 /*调整主轴以及侧轴的对其方式*/