- 博客(19)
- 收藏
- 关注
RSS订阅原创 removeEventListener 不生效问题
removeEventListener 不生效问题是由于我们私用内部函数，所以我们把用定义个函数就可以了const typeFunc=()=>{}target.addEventListener(type,typeFunc);target.removeEventListener(type,typeFunc)确保销毁的函数变量与监听的函数变量一致...
2022-07-12 11:25:00
1156
原创 子Id,递归查找父级Id
1.当我们使用elementui el-cascader组件的时候，获取到数据是一个包含父类子类ID的数组，但是有时候后端只需要最后一级的Id, 当我们传给他最后一级ID，他返回来也是同样的ID，这时候el-cascader就回显不了，因为缺少了父类的ID，所以我们可以通过递归查找父类ID 来完成回显...
2022-06-23 15:29:01
1837
原创 el-tree全部收缩
el-tree,没有提供全部收缩api给我们但是他是利用expanded属性来控制收缩的所以我们可以遍历他节点属性this.$refs.tree.root.childNodes.forEach((e) => {e.expanded = false;});
2022-05-18 13:54:30
1106
原创 react 组件懒加载
React.lazy接受一个函数，这个函数需要动态调用import()。它必须返回一个Promise，该 Promise 需要 resolve 一个defaultexport 的 React 组件。然后应在Suspense组件中渲染 lazy 组件，如此使得我们可以使用在等待加载 lazy 组件时做优雅降级（如 loading 指示器等）。fallback属性接受任何在组件加载过程中你想展示的 React 元素。你可以将Suspense组件置于懒加载组件之上的任何位置。你甚至...
2022-02-11 16:31:35
413
原创 react 生命周期
只执行一次： constructor、componentWillMount、componentDidMount执行多次：render 、子组件的componentWillReceiveProps、componentWillUpdate、componentDidUpdate有条件的执行：componentWillUnmount（页面离开，组件销毁时）不执行的：根组件（ReactDOM.render在DOM上的组件）的componentWillReceiveProps（因为压根没有父组件给传递p..
2022-02-11 15:49:17
75
原创 redux&&react-redux的使用
1.State (是只读的)用于存取数据!注意不能直接修改2.action用于修改 stateAction是把数据从应用（译者注：这里之所以不叫 view 是因为这些数据有可能是服务器响应，用户输入或其它非 view 的数据 ）传到 store 的有效载荷。它是 store 数据的唯一来源。一般来说你会通过store.dispatch()将 action 传到 store3.reducer为了描述 action 如何改变 state tree Reducer 只是一...
2022-02-11 09:40:33
491
原创 React组件通信方式
父组件传子组件方式//父组件import Home from "./home/home.js";class element extends Component { constructor(props) { super(props); this.state = { msg: "我是父组件的数据", }; } render() { return ( <div> <Home msg={this.state.msg} />//子组件
2022-02-10 14:26:50
1611
原创 React项目搭建和打包
使用react配套脚手架npm install -g create-react-app 下载脚手架项目创建create-react-app my-project进入项目cd my-project运行项目npm start项目框架|-node_modules //项目包|-public //一般用于存放静态文件，打包时会被直接复制到输出目录(./buidle)|-src//项目源代码||-...
2022-02-09 10:19:09
908
原创 Vue3 Teleport的使用
Teleport相当于一个传送门,把写好的组件传送到某个父元素//teleport 子组件<template> <teleport :to="props.childrenId">//支持id 类型 这里的传送门只作用于第一个 <div > 我是{{props.childrenId}}的子集 </div> </teleport> </template><sc
2022-02-08 10:20:20
586
原创 Vue3 单文件组件 ＜script setup＞＜/script ＞ 组件通信方式
1.props//接收父组件数据//使用单文件组件语法 props 传值方法 要使用defineProps方法,这个是不需要引入的//子组件<script setup>let prop = defineProps({ propA: { type: String, //数据类型 required: true, //是否必填 default: '你好,Vue3', //默认值 validator(value) {//验证数值 // 这个值必须与下列字符串中的
2022-01-25 17:31:19
1426
原创 Vue3 自定义指令引入方式
Vue3 全局引入的方式//在src 目录下util新建 directive.js 文件 用于输出指令export const directive=(app)=>{ app.directive('mydsa', (el) => { // 这将被作为 `mounted` 和 `updated` 调用 console.log(el) }) app.directive('permission', (el) => { // 这将被作为 `mounted` 和 `
2022-01-21 16:25:42
1201
原创 vite2 antD 动态切换主题
提示 antd 只能用less1.插件安装npm install @zougt/vite-plugin-theme-preprocessor -D2.vite.config.ts 代码import vue from '@vitejs/plugin-vue'import { defineConfig } from "vite";import path from "path";import themePreprocessorPlugin from "@zougt/vite-plug
2021-11-23 15:54:35
1804
2
原创 vite2.0+ts+vue3+antd,andt 按需加载
先下载unplugin-vue-components 插件npm i unplugin-vue-components -D在 vite.config.ts 引入import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import Components from 'unplugin-vue-components/vite'import { AntDesignVueResolver } from ..
2021-11-23 10:50:39
828
原创 ant-design按需加入
我用的是vue ant-design, 所以打开官网找到这个位置做完这一系列操作之后我们就可以在main.js 进行引入import {Menu,Icon} from"ant-design-vue"Vue.component(Menu.name,Menu);Vue.component(Icon.name,Icon); Vue.component(Menu.Item.name, Menu.Item)//想要用a-menu-item 组件必须引入,不然会报错Vue.component(
2021-05-11 16:17:46
403
原创 addRoute动态路由生成
一般我们做的管理系统,路由地址组件地址都是由后端传给我们的,所以一般都是动态生成路由addRoute这个api 是增加一级路由的,如果想要增加二级路由一定要带上父路由地址const routes = [{ path: "/index", alias: '/', component: index,}, ]//我们先定义父路由动态路由一般都是保存在Vuex里面的所以我们在Vuex 引入routerimport router from "@/router/index.js"//
2021-05-10 17:56:56
5164
原创 路由import懒加载不能识别变量解决办法
一般我们做动态路由的时候,数据都是有后端获取的,包括了component地址,现在有个需求必须要动态传入路径，发现传入变量后不能识别，代码如下//item.component 这个变量输出是 @/view/index.vue component:()=>import(item.component) //以这种方式引入变量就出报错//所以要改成以下方法//定义一个函数 let _import =(view) => { console.log(view) .
2021-05-10 17:44:03
1549
2
原创 js一维数组结构转化为树结构
平时我们用ajax 拿到的数据一般都是一维数组，但是我们想要渲染element树结构的时候就需要转化格式了思路我们要判断默认一级父元素，找到一级父元素，在递归匹配子元素上代码let jsonData = [{ "id": "1", "pid": "0", "name": "家用电器" }, { "id": "4", "pid": "1", "name": "大家电" }, { "id": "5", "pid": "1", "na
2021-05-08 17:23:44
2191
原创 mockjs结合Vue项目的使用
关于mockjs，官网描述的是1.前后端分离2.不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。3.数据类型丰富4.通过随机数据，模拟各种场景。npm i mock -d 下载mock创建mock文件import Mock from 'mockjs' //引入mock let url = "https://test/" //与axios baseurl地址一样 url+"" 拦截地址export default Mock.mock(url+'hl',..
2021-05-08 15:34:49
142
原创 vue-cli关闭/禁用/使用ESLint语法检测功能
ESLint的用途1.审查代码是否符合编码规范和统一的代码风格； 2.审查代码是否存在语法错误；中文网地址http://eslint.cn/取消ESLint在Vue.config.js文件中加入module.exports = { lintOnSave: true//false取消Eslink}查看详细地址https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint...
2021-04-28 11:54:24
273
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人