- 博客(36)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 element-ui el-tree 添加自定义图标与功能
message: `"${data.label}" 计数已减少`label: '用户管理',label: '权限管理',label: '日志管理',label: '技术部',label: '市场部',label: '人事部',label: '进行中',label: '已完成',label: '已延期',label: '图片',label: '文档',label: '视频',label: '部门管理',label: '项目管理',label: '系统设置',label: '个人文件',
2025-11-11 23:14:17
1058
原创 element-ui table表格相同名称合并，合并后的单选选择
el-table-column prop="date" label="日期" width="180"> </el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="address" label="地址"> </el-table-column><el-table-column prop="" label="姓名" width="180">
2025-11-10 22:39:32
429
原创 自定义右键菜单
打开文件</span><span>最近打开</span><span>新建</span><span>打开</span><span>复制</span><span>粘贴
2025-11-04 22:36:42
333
原创 数组的方法
/ 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。// 判断数组里是否有符合条件的只要有一个满足就返回true否则就返回false。// 判断数组里是否有符合条件的全部满足返回true一个不满足就返回false。// 查找数组里第一个符合条件的下标。// 循环遍历数组会返回一个新的数组。// 查找数组里面第一个符合条件的。// 用来判断是否以xx开头。// 过滤掉不满足条件的。
2024-01-24 17:03:43
441
原创 webpack 打包时index白屏控制台报错
我们需要在vue.config.js如果没有就新建一个 module.exports = { // 输出目录 assetsDir: 'static', // 基本路径 publicPath: './', }; 添加上面两行代码在从新打包就可以了
2022-05-19 13:16:43
342
原创 获取滚动条距离控制页面样式
<template> <h3 class="textChangee" :style="{ transform: translatechange }">xxx</h3> </template> <script> export default { data() { return { translatechange: 'translateX(0%)' } }, methods: {...
2022-05-18 20:53:39
216
原创 导航守卫/vuex
导航守卫 全局前置守卫 导航跳转就会触达前置守卫 fn回调接收三个参数，to将要访问的路由 from将要离开的地址 next()是放行的意思 router.beforeEach((to,from,next)=>{ to.path //将要访问的hash地址 from.path //将要离开的hash地址 next() }) vuex 项目数据共享的技术方案 数据存取一步到位，不需要层层传递 数据流动清晰 vuex数据都是响应式 安装 npm i vuex@3.6.2 初始化vuex 在src目录下.
2022-04-23 23:51:55
215
原创 自定义指令/路由/编程式导航
自定义指令 私有自定义指令 与data平级定义directives directives: { // color: { // bind(el, obj) { // el.style.color = obj.value // } // }, // color: { // update(el, obj) { // el.style.color = obj.value // } // }, colo...
2022-04-23 23:50:45
176
原创 组件传值/动态组件/插槽
组件传值 父-》子 props 在data数据里定义 <子组件 :msg='message'></子组件> data(){ return{ message:'父组件中的值' } } 子组件 <p>{{msg}}</p> export default{ props：['msg'] } 子-》父 子组件 <template> <div> <h4>count的值是：{{ count }}</h4>...
2022-04-23 23:47:20
1247
原创 vue全局注册与生命周期函数
全局注册 在main.js中，new Vue之前进行全局注册 语法：Vue.component("注册名称",需要注册的组件) 私有组件 导入组件-》在components里注册-》在页面使用 props 通过props选项声明自定义属性，让外界动态提供 与data平级定义props：["属性名"] 最简单的定义方法，无法控制每个属性的类型 props：{ 自定义属性名：数据类型（可以有多个类型[类型A,类型B]） } 优化 props：{ 自定义属性名：配置选项{ type用来约束数据类型 t...
2022-04-23 23:45:31
1786
原创 复习-vue指令
内容渲染指令： 插值表达式 {{}} 可以求值的式子，写js代码 v-html 当渲染的数据包含HTML标签，此时就用v-html 属性绑定指令： v-bind简写： v-bin：属性名="表达式" 事件绑定指令： v-on:事件名="处理函数" 简写 @事件名="处理函数" 定义函数在methods用this访问data里的数据 修饰符： 事件修饰符： .prevent阻止默认行为， .stop阻止冒泡 按键修饰符：@keyup.enter监听用户是否按下enter键 双向数据绑定： v-mode
2022-04-23 23:42:51
1442
原创 React中间件、React路由
React中间件 安装npm i redux-logger 导入redux-logger 在redux中导入applyMiddleware函数 调用applyMiddleware()并传入logger 中间件 redux-thunk 中间件可以处理函数形式的action，因此可以执行异步操作 React路由：可以把路由理解为，基于浏览器URL地址的条件渲染 window.location.hash(url地址栏/#后面的值).slice(1)切片从第几个开始 两种常见Router：HashRouter..
2022-04-06 19:02:09
1537
原创 action，reducer，store与React-Redux
Redux action(动作)：描述要干的事 { type： 'increment', payload: 10 } // +10 { type： 'decrement', payload: 10 } // -10 reducer（函数）：更新状态 reducer 它是一个纯函数。接收两个参数：action（要干啥），和一个给定的状态计算出一个新的状态。这个新的状态作为 reducer 下次处理数据（接收到action通知）的输入。 store（仓库）：配合action和reducer // 导入red
2022-04-06 18:54:23
1115
原创 Hooks
useState基本使用 import { useState } from "react"; export const Counter = () => { const [count, setCount] = useState(10) const [name, setName] = useState('wxq') const [books, setBook] = useState([ { id: 1, name: '大鱼海棠' }, { id: 2, name: '福尔摩斯...
2022-03-23 23:23:43
134
原创 children属性传值与生命周期函数
children属性传值 在Hello.js import React, { Component } from 'react' export class Hello extends Component { render() { return ( <div> <h1>Hello:{this.props.name}</h1> <hr></hr> <h2>{this.p...
2022-03-23 02:06:58
920
原创 组件通信传递数据
组件通信 父传子 Parent.js文件里（父组件） import React from "react"; import { Child } from './Child' export class Parent extends React.Component { state = { Name: 'zy' } render() { return ( <div> <div>我是父组件，我的名字：{this.state.Name}&l...
2022-03-22 00:52:11
1372
原创 箭头函数额外传参，控制表单元素值的显示与改变，其他受控组件
使用箭头函数额外传参{ import ReactDOM from 'react-dom'; import React from 'react'; class Time extends React.Component { state = { Time: new Date().toLocaleTimeString(), stat: [ { id: '1', naem: 'xx' }, { id: '2', naem: 'yy' }, { id: '3', ...
2022-03-20 23:04:06
158
原创 封装vuex持有化插件与计算数据精度丢
npm i -S vuex-persistedstate import persistedstate from 'vuex-persistedstate'; export default createStore({ plugins:[ createpersistedstate({ key:'xxxx-xxx-xxx-xxx', paths:['要持久化的名字'] }) ] }) ...
2022-03-20 23:00:55
147
原创 React组件基础
函数组件{ 1.符合JS的函数定义（函数定义，函数表达式，箭头函数） 2.函数名称必须以大写字母开头(为了区分标签和自定义组件) 3.必须有返回值 // 函数定义组件 function Hollo(){ return <div>我是函数定义组件</div> } //函数表达式组件 const Button = function (){ return <button>我是函数表达式组件</button> } //函数定义和函数表达式的区别（提升） //箭头..
2022-03-17 14:39:35
621
原创 React基础学习
react 声明式：声明你想要的结果，过程不用操心 array.forEach array, 命令式：for(let i =0 ; i<=arr.length; i++){ console.log(arr[i])} 基于组件：就是封装，可复用 （结构：HTML，样式css，行为js） 学习一次随处使用 React开发环境（前端工程化，单页面应用） 命令工具：create-reach-app 使用React api 在页面上创建UI //导入 import React from 'react' impo
2022-03-15 00:26:03
245
原创 封装一个通用的倒计时函数
import { ref } from 'vue' import { useIntervalFn } from '@vueuse/core' //封装一个函数useCountDown const useCountDown = () =>{ //time响应式数据 每隔一秒减1 const time =ref(0) //pause停止 resume开始 const { pause , resume } =useIntervalFn( () => { time.value -- .
2022-03-11 01:06:59
368
1
原创 移动web
找到父子关系，设置display: flex 弹性布局 确定主轴方向 flex-direction: row 水平 column 垂直 使用flex设置主轴方向的大小 auto项目既可以放大也可以缩小 none 项目不可以缩小 默认值 不会放大，但会缩小 数字 主轴对齐方式 justify-content 侧轴对齐方式 align-items（单行） 默认stretch(不设置高，侧轴会被拉伸) display:flex布局· 给父盒子设置，父盒子就变成容器，子盒子就变成项目了 flex布局..
2021-11-10 21:41:25
215
原创 2D 3D的运用
transform: translateX translateY 移动方向 transform: rotate 旋转以deg为单位 transform: scale 缩放 scaleX水平方向 scaleY垂直方向 transform-origin 旋转点两个方向 如果对一个元素同时使用多个2d效果，需要注意顺序，没有固定顺序 transform：translateX() rotate() scale transform:translantZ 3D效果 animation-iterat..
2021-10-30 22:42:19
147
原创 水平居中的方法
<!-- 水平居中 --> 文字，行内元素，行内块元素 给父元素设置text-align：center 块元素给当前设置margin：0 auto 浮动元素给外面标准流父元素设置margin：0 auto 定位元素 left：50；margin-left：-自身盒子宽度一半或者left：50%；transformX(-50%); <!-- 垂直居中 --> 文字在盒子中垂直居中 行高等于高 盒子在盒子垂直居中通过测量给小盒子设置margin或者给大盒子设置padding
2021-10-23 21:16:38
172
原创 清除浮动与定位
清除浮动 1.额外标签在浮动末尾添加空标签 2.在父元素添overflow：hidden； 3.伪元素清除浮动 .clearfix:after{ content:""; display:block; clear:both; height:0; visibility:hidden } 4.双伪元素 静态定位 sttic{} 默认值 加了边移也没效果 相对对定位 position: relative; 后面跟方向就可以了top left.....
2021-10-20 23:25:04
210
原创 浮动和伪类
li:last-child(找最后一个li)，li:first-child(找第一个li) li:nth-child()(根据自己写的值) li:nth-last-chid() 偶数2n 奇数2n+1 找前五个-n+5 从第五个往后n+5 浮动： 1:浮动的元素找相邻浮动的元素顶部对齐，在同一行显示 2：浮动的元素脱离标准流，在页面不占位置 3.浮动的元素只影响下面元素不会影响上面的元素 4.浮动的元素只能压住盒子，压不住盒子里面的内容 5.浮动的元素可以设置宽高，默认宽度是内容的宽度 6.
2021-10-19 23:10:27
148
原创 学习前端第六天
盒子的组成（内容content 边框border 内边距padding 外边距margin） border-width(边框粗细) border-style(solid实线 dashed虚线 dotted点线) border-color(边框颜色) 连写形式：border：1px solid red 盒子里定义width，height，是定义盒子的大小，加边框外边距内边距会撑大盒子 （内边距）padding：10px（上下左右）10px 20px(上下10xp 左右20px) 10px 20px 3
2021-10-17 21:37:52
196
原创 学习前端第五天
后代选择器：空格（选择器 选择器 {css}） 子代选择器：> 并集选择器：,（选择器，选择器{css}） 交集选择器：紧挨着 hover伪类选择器 选择器：hover{css} background-color 背景颜色 background-image 背景图片（背景图不经常替换，很大或很小的图片，常用背景来做）img（经常替换的产品类图片） background-repeat no-repeat不平铺 background-position图片背景位置 水平垂直 连写属性： b
2021-10-15 22:21:02
142
原创 学习前端第四天，第三天复习
内嵌式 在HTML里面写样式 外联式 新建一个css文件在通过link连接 行内式 在标签后面写 color颜色 rgba（0,0,0,0.5）最后一位是透明度 font-size字体大小 font-weight粗细 bold加粗 normal不加粗 lighead更细 font-style设置倾斜 normal不倾斜 italic倾斜 font-family设置字体 font连写属性 style weight size family连写顺序 text-indent文本缩进 t
2021-10-14 21:57:24
90
原创 基础第二天
无序列表 ul li 有序列表 ol li 自定义列表 dl dt dd 表格 table tr td（table表格整体 tr表格的每一行 td表格的单元格 ）caption表格标题 th表头 thead表头 tbody表身体 tfoot表底部 border边框 width 宽 height 高 rowspan 跨行合并 colspan 跨列合并 input表单：text文本框（placeholder提示文字）password(密码) radio单...
2021-10-12 21:20:15
72
原创 基础第一天
Web标准中三个结构： 结构（HTML）页面元素 表现（css）页面样式 行为（JavaScript）页面交互的动态效果 标签由两部分组成分别是：单标签和双标签 标签与标签的关系可分为：嵌套关系（父子关系），并列关系（兄弟关系） 父子关系： <head> <title></title> </head> 兄弟关系: <head></head> <body></body> 标题标签：&..
2021-10-11 23:33:33
179
循环数组，创建新的数组
2022-11-14
TA创建的收藏夹 TA关注的收藏夹
TA关注的人