pacholy的博客

【代码】Vue3 父组件调用子组件方法/获取修改值（$refs 在setup()、 中使用）

点击按钮，展示出来一个区域块，点击区域块内，区域块不隐藏，点击区域块以外的地方，就会隐藏。

1、要用computed2、watch要写在computed后面，不然监听不到3、要加deep:trueconst tag_list = ref([]); // 这是个数组对象const tagList = computed(()=>{ JSON.parse(JSON.stringify(tag_list.value)) })watch(tagList,(newList)=>{ console.log('qqqqqqq')}, {deep: true })...

最近使用vue3.0的watch监听数据时发现一些问题：监听数组时，用splice这种改变数组是正常的，但是如果数组直接置空，则监听失效const array = ref([1,2,3]);const changeArr = ()=>{ array.value = [];}watch(array.value,(now,old)=>{ console.log(now,old); // 触发changeArr的时候，监听不到})解决方案：watch(() => [ar

效果展示：思路：右边的button用插槽的方式添加<template> <div class="m-page"> <div class="content"> <div class="menu-data"> <div class="header"> <span class="name">菜单配置</sp

最近整理了一下关于vue后台管理项目动态路由权限管理及菜单的渲染：环境：vue3.0+element-plus+vue-router4.0思路：router/index.js文件：配置路由，路由分为两部分：公共路由+动态路由（注意：配置不存在路由跳转到默认页面的代码，需要写在动态路由里，否则会造成刷新页面，跳转到默认页面）router/permission.js文件全局导航守卫，设置路由拦截（在main.js引入）store/modules/user.js 获取用户信息

路由我们是用公共路由+动态路由，写的过程中发现，在动态路由的页面刷新页面后跳转到了默认页面，也就是我们设置的{ path: '/:pathMatch(.*)', redirect: '/dashboard', hidden: true }本来这行代码我是写到公共路由里面了，就会刷新跳到默认页面，解决方法：把这行代码放到动态路由里面去注意：这是vue3.0的写法...

直接通过watch监听对象，对象的属性值变化并不会触发这个监听，所以通过属性deep:true，可以深入监听，data:{ return { myObj:{ name: 'lily', age: 12 } } }, watch: { myObj: { handler: (val, olVal) => {

参考链接可见腾讯视频播放器文档使用过程官网很详细，就不写了，这里主要记录一个问题，就是第二次进入视频页面的时候，初始化有问题，所以这里我用了一个方法this.$nextTick(()=>{ 视频初始化})跟我猜测的一样，就是dom还未渲染就执行了视频初始化，所以这里把初始化放在dom渲染完成再执行...

具体可参考云点播官方文档（1）.在页面中引入文件在合适的地方引入播放器样式文件与脚本文件：<link href="https://imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.css" rel="stylesheet"> <!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 HLS 格式的视频，需要在 tcplayer.v4.1.min.js 之前引入 hls.min.0.13.2m.js。-

首先我们先把环境配置好1.安装antd vue（这里就不介绍了）2.安装moment.js步骤:（1）npm i moment（2)//main.jsimport moment from 'moment';Vue.prototype.$moment = moment;需求1：要求日期不可选择未来时间，日期范围不得超过半年<template> <a-range-picker @change="onChange" @calendarChange="handleCale

区别：v-if 和 v-show 都是用来控制DOM的显示隐藏，但是而这却有很大的区别1. v-if是通过控制dom节点的 存在与否，来控制元素的显隐，而v-show是通过设置dom的display：none；或者 display：block，来控制显隐2. v-if每次切换，都会重新创建或者销毁dom，比较消耗性能，如果初始条件为false，就不会创建标签，如果为true，才会创建标签；而v-show不管初始值为什么，都会创建标签，所以拥有较高的初始渲染耗能总结：如果频繁切换显隐，就用v-show

beforeRouteEnter(to,from,next)beforeRouteEnter 函数内部 this 是undefined，这是因为在执行路由钩子函数beforRouteEnter时候，组件还没有被创建出来；先执行beforRouteEnter，再执行组件周期钩子函数beforeCreate。我们可以通过 next 获取组件的实例对象，如：next( (vm)=>{} )，参数vm就是组件的实例化对象。<template> <div> 我

创建vue项目流程1.安装node.js首先查看一下你的node.js是否安装成功，如果安装成功第一步可以略过。验证是否安装成功node -v #查看nodejs版本号 比如：v8.4.0如果未安装，windows 在官网下载安装包，直接安装即可nodejs中文网：http://nodejs.cn/2.安装webpack环境npm install webpack -g3.安装...

1.安装Mint UI并配置环境安装模块npm i mint-ui -S引入 Mint UI（1）完整引入在 main.js 中写入以下内容：//main.jsimport Vue from 'vue'import MintUI from 'mint-ui'import 'mint-ui/lib/style.css'import App from './App.vue'...

在写项目的时候，我们经常因为一堆乱糟糟的代码而烦心，所以很多时候我们需要把代码封装起来，这样看起来简单有条理，而且方便使用。下面是我对vue项目中，axios请求的封装以及路由拦截，希望能帮助到你。1.Axios的封装1.安装axiosnpm install axios // 安装axios2.引入一般我会在src文件下建一个utils文件夹，里面建一个request.js文件，req...

1.父组件向子组件传值 props//父组件

啊关于这个问题，我想打自己一顿，明明是最简单的东西，结果我给忘掉了，写项目的时候，绑定在router-link标签上的点击事件竟然失效了，查了好久才发现只是因为自己忘了写.native。。。无语了。。。解决方案：<router-link @click.native="add">点击事件</router-link>...

1.阻止冒泡 stop当父标签和子标签都绑定事件的时候，点击事件会触发两次，这个时候我们要阻止子元素冒泡<button @click.stop="add"></button>2.阻止默认事件 prevent<button @click.prevent="add"></button>3.鼠标右键事件由两种写法，但是右键事件，浏览器窗口会...

vue项目修改滚动条样式这是我写的一个简单的效果，只是为了实现功能，具体样式样式可以根据自己的需求去写。1. 首先需要先下载我们所需要的模块，这里我用的是“vuescroll” //老规矩，先安装模块 npm install vuescroll2. 在项目中进行导入 //main.js import vuescroll from 'vuescro...