lee_amazing的博客

首先需要定义一个存储筛选结果的数组，还有筛选内容的变量。此处用的是typescriptconst resolveArr = ref<any>([])const searchValue = ref<string>('');定义筛选的方法，假设我们要筛选的数据源为dataSource数组对象// 假设数据源dataSource = [ { name: 'aa', detail: 'detaila', children: { obj: 'cc' } }

第一步：使用AE的插件bodymovin生成json文件。我这里使用的是ae2018版本，需要对应的是bodymovin5.6.6版本。参考例子第二步：安装lottie-player插件引用json文件。lottie-player文档其中需要注意的是本地的文件src指向localhost路径级别，比如这个例子的路径。<lottie-player autoplay loop mode="normal" src="src/assets/json/data.js..

首先引用useRoute，然后用route获取，剩下的想要取什么看自己需求import { useRoute } from 'vue-router'const route = useRoute()console.log(route)

在使用vue3时，想要使用ant design vue的input组件里的textarea来适应文本高度。坑：可是直接使用textarea标签的话是获取到的vue中的textarea标签。而ant组件的textarea只需要import Input组件即可，所以此时可以通过重新命名的方式避免标签重名的错误。如下：// 导入Input组件即可import { Input } from 'ant-design-vue'// 组件注册重新命名components: { InputTextArea: I

如上图所示，自定义封装了一个vue的边框组件，代码如下，具体的样式可以自己调整，当前案例支持传入宽度、高度、最小高度、标题。<template> <div :style="{ width: width, height: height, minHeight: minHeight }" class="box"> <div class="box-content"> <div class="title"> {{title}}.

此处的项目为vue2版本，因为pc端的项目没有采用响应式自适应手机端的设计，所以使用lodash插件实现屏幕移动端自适应。首先下载lodash插件。npm i lodash -S然后在App.vue中导入，此处的App.vue主要指的是主框架，因不同项目可自行选择。import _ from 'lodash'然后给app容器挂上ref=“app”<template> <a-config-provider :locale="locale"> <div id

在vue项目中，通常运行项目后，会生出两个链接，一个是本地的127.0.0.1和局域网的本机ip地址链接。然后我发现当其他设备在局域网打开该项目的时候使用数据库的api访问会请求失败，查阅了大量资料后才发现，解决方法很简单。是自己设置的axios请求链接需要修改一下。import axios from 'axios'Vue.prototype.$http = axios.create({ baseURL: 'http://localhost:3001/api'})只需要将上述的localh

为了实现ant-design-vue的table列时间排序功能，我们可以在columns中添加：{ title: "发布时间", dataIndex: "releaseTime", key: "releaseTime", sorter: (a, b) => { let aTimeString = a.releaseTime; let bTimeString = b.rele

我们看官方文档的Calendar组件是通过switch来将数据渲染到每日的格子上的，可是我却发现这个渲染会使得每个月的同一天都会出现这种情况，case：1则每个月的1日都会有数据渲染上去。那么我就想通过导入一个数组就可以实现每日的格子数据渲染，那么我们就得了解Calendar渲染到每个日期格子的原理。首先它是通过v-for遍历到每个日期格子的。<li v-for="item in getListData(value)" :key="item.content">如上，主要看getList

vue-tree-chart首页：https://github.com/tower1229/Vue-Tree-Chart安装npm i vue-tree-chart --save使用<TreeChart :json="treeData" />import TreeChart from "vue-tree-chart";export default { components: { TreeChart }, data() {

效果如下图所示。通过点击左侧的选项可以在右侧的表格展示对应选项包含的数据。页面代码如下：<template> <div style="display: flex;"> <a-card style="width: 20%;"> <a-table :data-source="data" :columns="columns1" :customRow="Rowclick" >

由于 Vue 会在初始化实例时进行双向数据绑定，使用Object.defineProperty()对属性遍历添加 getter/setter 方法，所以属性必须在 data 对象上存在时才能进行上述过程 ，这样才能让它是响应的。如果要给对象添加新的属性，此时新属性没有进行过上述过程，不是响应式的，所以会出想数据变化，页面不变的情况。此时需要用到$set。this.$set(Array, index, newValue)...

我们如果忘了自己安装的vue的版号是多少，则可以在cmd中输入npm list vue来查询vue的版号，结果为`-- vue@2.6.12那么vue的版号为@后面的2.6.12如果直接使用vue -V或者vue --version，那么我们查询到的是vue-cli的版本。...

当我们有多个项目的时候，后台服务器的启动如果用powershell逐个启动则需要多个窗口，也不方便，所以在此记录自己使用pm2同时管理多个项目的方法。以下的“脚本”为后台启动文件名称，“自定义名称”为自己为脚本设置的一个名字。全局安装pm2npm i pm2 -g启动项目pm2 start 脚本//或者将脚本自定义一个名称pm2 start 脚本 --name 自定义名称查看运行项目pm2 ls重启项目pm2 restart 自定义名称（或者id）停止项目pm2 stop

在vue项目中安装好插件npm install vue-json-excel//或者cnpm install vue-json-excel在main.js文件中导入插件//import插件import JsonExcel from 'vue-json-excel'//使用插件Vue.component('downloadExcel', JsonExcel)在页面中使用download-excel<download-excel class = "export-.

延迟5s加载并及时清除计时，只需要吧clearInterval内嵌在setInterval中即可。var loadingTime = setInterval(() => { this.loading = false clearInterval(loadingTime) }, 5000)