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-server npm install json-server -g 项目中创建db.json 执行 json-server --watch db.json 启动 项目中安装json-server npm 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=value1 npm i qs

原创 创建reacte+TS项目

npx create-react-app 项目名 --template typescript eslint、prettier、commitlint规范工程 1、项目中安装插件prettier npm install --save-dev --save-exact prettier 2、创建.prettierrc.json echo {}> .prettierrc.json 3、配置引入绝对路径 tsconfig.json中配置baseurl: ./src 4、配置commitlint

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

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

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

1、安装 json-server npm i json-server -g 2、启动server json-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;                  /*调整主轴以及侧轴的对其方式*/