weixin_47353884的博客

Vue.Draggable 是一款基于 Sortable.js 实现的 vue 拖拽插件，实现组件化的思想，可以结合 Vue，使用起来更方便如果是单列拖拽用vue.draggable group 拖拽分组多组之间相互拖拽，可以实现不同数组之间相互拖拽。比如 group 都为 componentsGroup 的组之间可以相互拖动，本文例子中 A 列和 B 列可以相互拖动，但是无法拖到 C 列。设置方式，object，也可以通过自定义函数 function 实现复杂的逻辑。

按下Esc键时，将会触发keyup.esc事件，也可以使用v-on指令监听该事件并做出相应的处理。方法来监听键盘事件，然后在检测到ESC键按下时，调用关闭弹框的方法来实现关闭弹框的功能。在Vue中，可以通过监听窗口上的键盘事件来实现ESC键关闭弹框的功能。例如，可以在组件的mounted() 钩子函数中使用。

计算属性：计算属性是 Vue 组件中的可观察属性，它可以根据其他属性的值自动计算出新的值。在代码审查时，可以关注计算属性的名称、类型、功能等。组件：组件是 Vue 中的基本构建块，可以将其视为可重用的 UI 片段。在代码审查时，可以关注组件的结构、命名、设计、功能等。在代码审查时，可以关注模板的结构、语法、命名、设计等。在代码审查时，可以关注事件处理函数的名称、参数、功能等。在代码审查时，可以关注数据的结构、类型、命名、初始化等。确保 Vue 代码使用合理的组件结构, 并使用清晰的命名方式。

可以使用 v-bind 指令将组件的 props 绑定到路由参数，然后通过路由参数来保留页码例如，假设你有一个组件 PaginatedList，它接受一个 page prop，表示当前页码。你想要在路由跳转时保留当前页码。示例：二、实现方法1. 绑定到路由参数在组件中使用 v-bind 指令将 page prop 绑定到路由参数：这样，当你在应用中跳转到 /paginated-list/2 时，PaginatedList 组件的 page prop 将被设置为 2，并且在路由跳转时页码将被保留。代码

在 Vue 组件中使用 JavaScript 内置的 setInterval 函数实现。可以在组件的 created 钩子函数中设置一个定时器，每隔一段时间就更新组件的数据。使用 Vue 的计时器指令 v-bind:interval。这个指令可以在模板中绑定一个数据，每隔一段时间就更新绑定的数据。注意：如果使用计时器指令，要确保 Vue 版本为 2.6.0 或以上。

this.addDisabledTag(treelist, 当前部门详情id, false);option form.obj // {name:‘财务部’,id:1}select form.obj.name // 财务部。进入部门详情时 出现 ‘上级部门’ （现在写的组件 下拉树）clear // 可清空的单选模式下用户点击清空按钮时触发。clearable // 是否可以清空选项。禁止选择 当前部门 和 当前子部门。清除树选中结构 下拉数据也会消失。根据业务情况 选择禁用。

用于 JavaScript 的小型、安全、URL 友好、唯一的字符串 ID 生成器。scoped不生效，将样式放全局，在当前组件加上一段不带scoped的style。

要启用，请在tsconfig或jsconfig的“compilerOptions”属性中配置“jsx”：“preserve”。要禁用此提示，请在“vueCompilerOptions”属性中配置“experimentalDisableTemplateSupport”：true。看数据很方便，都不知道可以选中组件 code直接打开对应文件，用vue这个扩展小程序真的很方便 能快速排查很多错误。各位同学有没有遇见过这样的情况，接手老项目，无人交接，需要紧急上需求但短时间找不到页面对应文件的场景。

HTML中的contentEditable的属性可以打开某些元素的可编辑状态．也许你没用过contentEditable属性．甚至从未听说过．contentEditable的作用相当神奇．可以让div或整个网页，以及span等等元素设置为可写。我们最常用的输入文本内容便是input与textarea，使用contentEditable属性后，可以在div,table,p,span,body,等等很多元素中输入内容．。

最近在项目中遇见一个bug - 关于key值表格一 为模拟初始数据表格二为筛选后结果当筛选项的值为"路人甲"时 表格会多一列 “city”关于是否有city这列是从筛选值获取这里我们可以通过计算属性给列添加v-if 来判断显示与隐藏（一开始尝试的v-show发现不生效，应该是组件库的原因）但是我在项目中遇见一个奇妙的bug在我切换表格列时 可能会出现数据错乱错误示例：数据是从后端接口里直接拿的本地也打过断点调试 是没问题的经过研究 发现问题出现在key上解决办法是:key=Math.random()给列加

示例：迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。当vue的选中值 但是没有发生变化 可以加change事件 强制刷新。阻止事件冒泡 只需要要点击事件后面加上.stop即可。

localeCompare 排序appList.sort((a, b) => { return a['name'].localeCompare(b['name']);});

let development = process.env.NODE_ENV == 'development' ? true : false;

<template slot="empty"> <el-button>暂无数据时显示</el-button></template>

由于element-ui把input进行了封装，input外面是多一层div的对于el-input，使用 @keyup.enter是无效的，需要加上native限制符。<el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="input" @keyup.enter.native="search"></el-input>@keyup.13.native 代表的是i

<div class="drawer"> <div class="setbox" :class="{show: isshow}"> <div class="header"> <p class="fl">标题</p> <button class="off" @click="close">关闭</button> </div> .

首先需要在表格里拿到下标借用 row-class-name 属性来给表格附上 index表格上添加 :row-class-name=“getRow”<el-table :data="tableList" :row-class-name="getRow"><el-table> getRow({row,rowIndex}) { row.index = rowIndex; },使用:ref="name${index}" ，为每一项动态添加ref比如：

需要新加一个字段在接口请求过来的时候就加到res.data里，然后赋值给this.tableList不然双向绑定不上res.data是原数组let newArr = []res.data.map((item, index) => { newArr.push( Object.assign(item, { editsave: false} ) ) })this.tableList=newArr...

代码留念父组件<template> <div> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="团队维护" name="latitude" :key="'latitude'"> <team v-if="isChildUpdate1"></team> </el-tab-pan

router.beforeEach((to, from, next) => { if (to.matched.some(res => res.meta.isLogin)) { //判断是否需要登录 if (localStorage['auth']) { next(); } else { next({ path: "/login", }); } } else { next() }});然后

组件通信方式大体有以下8种根据组件之间关系讨论组件通信父子组件兄弟组件跨层级关系props ⽗⼦emit/on ⼦⽗children/parent ⽗⼦/⼦⽗attrs/listeners 爷孙Provide/injectref ⽗⼦$root 任意eventbus 兄弟vuex 任意根据组件之间关系讨论组件通信父子组件props$emit / $on$parent / $children0ref$attrs / $listeners兄弟组件$parenteventbu

vue路由vue中通过路由跳转的三种方式标签路由 router-linkthis.$router.push()this.$router.replace()ps : this. $ router.push()和this. $ router.replace()的区别前端路由实现原理主要通过利用H5的history API实现back、forward、go三个方法利用url的hash实现abstract模式静态路由与动态路由的区别优点：缺点：#mermaid-svg-a3FODESelaJ8znB8 .labe

有关跨域什么是跨域所谓同源是指，域名，协议，端口均相同什么情况下会产生跨域跨域的解决方案目前有三种主流解决方案jsonp代理（前端代理和后端代理）Vuejs2.0 利用proxyTable实现跨域请求CORS注：现在主流框架都是用代理和CORS跨域实现的什么是跨域跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。所谓同源是指，域名，协议，端口均相同什么情况下会产生跨域跨域问题的出现是因为浏览器的同源策略问题,同源它是浏览器最核心也

Vite+VUEvite官方文档 https://vitejs.cn/不想写了 改天继续

新建空白文件夹通过 Git Bash Here 打开黑窗口vue create vue3(项目名)项目配置 :

关于VUE3vue3 怎么引入组件库vue3的路由配置以及跳转路由路由配置先创建两个页面router配置main.js引入路由跳转路由1 **可以继续使用 router-link**2 router.pushvue3 怎么引入组件库引入Vant组件库vant的vue3官方网址https://vant-contrib.gitee.io/vant/v3/#/zh-CN首先是安装Vue 3 项目，安装 Vant 3 : npm i vant@next -S然后导入组件项目优化时我们可以只引入需要

vue里的cookiejs-cookievue-cookiesjs-cookiejs-cookie安装npm install js-cookie 'js-cookie' --save在main.js里面引入import Cookies from 'js-cookie'//1 存cookieCookies.set('key', 'value'); //创建简单的cookie//2 取cookieCookies.get('key'); //取值//3 删除cookieCookies.remo

appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。设备间传输数据很方便 测试再也不用下软件了 使用起来也超级简单。增加一个指定名称和治的新属性，或者把一个现有属性设定为指定的值。给一个按钮绑定点击事件,以下是方法。页面 index.vue 使用。2.value:要设置的属性值。1.name：要设置的属性名。在main.js里引用。组件库是View UI。

项目性能优化路由懒加载开启Gzip压缩webpack使用vue的服务端渲染(SSR)路由懒加载vue路由懒加载主要解决打包后文件过大的问题，事件触发才加载对应组件中的js开启Gzip压缩webpack使用webpack的externals属性把不需要打包的库文件分离出去，减少打包后文件的大小使用vue的服务端渲染(SSR)...

ElementUI分页不刷新表格选中状态控制tag标签tag标签取消同步表格状态分页不刷新如果需要使用多选框选择多条数据，翻页后一般会重新请求后台，之前选择的数据就会丢失我们需要给表格行指定一个唯一的key值这个代码不知道为什么不是五颜六色的 我很不喜欢重点是ElementUI表格API里面的 row-key 可以自己去查阅看一下<el-table :data="LevelList.slice((page - 1) * size, page * size)" style="

<p @click="getCode"> <span>验证码:</span> <CommonInput placeholder="请输入内容" :values="this.yzmcode" ></CommonInput> <el-button class="greenFn">获取验证码{{ second }}s</el-butt

兄弟组件传值需要一个utils文件夹的eventBus.jsimport Vue from 'vue'export default new Vue()兄弟页面1兄弟页面2在需要引入bus在主页面引入兄弟页面们跟Bus传值 Bus.$emit("brotherA", "李钢筋嘤嘤嘤");接收值 bus.$on("brotherA", (val) => { this.text = val; });...

首先安装https://www.lodashjs.com/npm i lodash -S然后main.js引入import _ from 'lodash'Vue.use(_)这样引入 直接就可以用_.throttle不需要加this mounted() { window.addEventListener("touchmove", _.throttle(this.handleChageColor), true); },写个方法lengths就是主体 滑动的部分<se