父组件控制子组件弹窗显示与隐藏
1.vue+js 语法
1.使用 v-model 实现双向绑定
父组件
12345678910111213141516171819202122232425<template> <div> <button @click="showModal">显示弹框</button> <my-modal v-model="modalVisible"></my-modal> </div></template><script> import MyModal from './MyModal.vue'; export default { components: { 'my-modal': MyModal, }, data() { return { modalVisible: false, & ...
vscode推荐安装的插件
git相关插件：gitLens、Git History、Git History Diff
汉化插件： Chinese (Simplified)
开发提示相关插件： Tabnine AI（强推）、Path Intellisense（路径提示）、Vetur、Volar、Auto Close Tag、Auto Complete Tag、Auto Rename Tag、HTML Snippets、Wrap Console Log Lite
浏览器调试插件： JavaScript Debugger、Debug Visualizer、scode-js-debug
静态服务器：Live Server
代码运行器： Code Runner
正则提示插件： any-rule、Regex Previewer（辅助验证正则结果）
Docker插件： Docker
格式化类插件： EditorConfig for VS Code、ESLint
进制文件查看： Hex Editor
TODO提示： Todo Tree
流程图绘制： drawio
PDF查看： vscode-pdf
Markdown预览：Mar ...
ECharts常用的一些属性
ECharts 是一个功能强大、灵活多样的数据可视化库，提供了丰富的配置选项和 API 接口。以下是一些常用的 ECharts 属性：
常用属性1234567891011121314151617181920212223title：图表标题，可以设置主标题和副标题。tooltip：提示框组件，用于展示鼠标悬停在数据点上时的信息。legend：图例组件，用于展示不同系列的名称和颜色。xAxis 和 yAxis：坐标轴组件，用于展示数据的数值范围和刻度。series：系列列表，用于展示图表的数据内容。grid：直角坐标系内绘图网格，可以设置图表的位置、大小和边距等。toolbox：工具箱，提供了一些常用的工具和功能，如下载、缩放等。dataZoom：数据区域缩放组件，用于对图表进行局部放大和缩小。visualMap：视觉映射组件，用于将数据映射到不同的视觉元素，如颜色、大小等。backgroundColor：图表背景色。animation：动画效果配置，可以控制图表的动画效果、时长和延迟等。color：图表的颜色主题，可以使用预定义的颜色主题或自定义颜色。
具体配置xAxis，yAxis简 ...
Vue2中ECharts的基本使用
要在 Vue2 中使用 ECharts，可以先在项目中引入 ECharts 库，然后在 Vue 组件中创建 ECharts 实例并传入配置选项。以下是封装 ECharts 组件的基本步骤：
安装 ECharts使用 npm 安装 ECharts：
1npm install echarts --save
创建一个 ECharts 组件在 components 文件夹下创建一个 ECharts 组件：
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859<template> <div :id="chartId" :style="{height: height,width: width}"></div></template><script> import echarts from 'echart ...
JavaScript 中创建随机 ID 的方法
Math.random()使用 Math.random() 函数生成随机数并转换为字符串，然后使用 substr() 函数截取字符串的一部分作为 ID：
1234function generateRandomId() { var id = Math.random().toString(36).substr(2, 10); return id;}
Date.now()使用 Date.now() 函数获取当前时间戳，并将其转换为字符串作为 ID：
1234function generateTimestampId() { var id = Date.now().toString(); return id;}
UUID生成符合 UUID（通用唯一标识符）标准的随机 ID：
1234567function createUUID() { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { var r ...
uni-app快速入门
uni-app 支持通过 可视化界面、vue-cli 命令行 两种方式快速创建项目。
可视化的方式比较简单，HBuilderX 内置相关环境，开箱即用，无需配置 nodejs。
开始之前，开发者需先下载安装如下工具：HBuilderX：官方 IDE 下载地址HBuilderX 是通用的前端开发工具，但为 uni-app 做了特别强化。
除了 HBuilderX 可视化界面，也可以使用 cli 脚手架，可以通过 vue-cli 创建 uni-app 项目。
因为习惯使用 vscode 进行开发，我选择 vue-cli 命令行的方式来创建项目，下面是具体操作。
初始化项目环境安装1npm install -g @vue/cli@4.5.15
创建 uni-app使用 Vue21vue create -p dcloudio/uni-preset-vue my-project
使用 Vue3/Vite 版创建以 javascript 开发的工程（如命令行创建失败，请直接访问 gitee 下载模板）
1npx degit dcloudio/uni-preset-vue#vite my- ...
大屏适配方案
使用 scale 适配大屏。实现数据大屏在任何分辨率的电脑上均可安然运作。无需特定编写 rem 单位，也不需要考虑单位使用失误导致适配不完全。您即使全部用 position 去定位在其他屏幕上都不会乱。（%和 px 随便用）
布局在 vue2 中的写法如下：12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061<template> <div class="dataScreen-container"> <div class="dataScreen" ref="dataScreenRef"> <div class="dataScreen-header"> <div class="header-lf"></div> ...
Sortable实现拖拽
最近遇到需求要求给 element 的 tabs 组件实现拖拽,通过查资料找到 Sortable 插件此插件既能支持拖拽 tabs,也能支持拖拽 table,具体使用代码如下:
[1]sortablejs官方文档
1.table 拖拽12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576<script>import { fetchList } from '@/api/article'import Sortable from 'sortablejs'export default { name: 'DragTable', filters: { statusFilter(status) { const statusMap ...
虚拟表格插件
虚拟表格是指只渲染当前可视区域内的数据，通过滚动页面或者表格来动态加载和渲染数据，从而提升页面的性能和用户体验。通常在 vue2 项目中，element-ui 和 ant design vue 组件库是不支持虚拟表格的。vue3 项目，element-plus 和 ant design vue 组件库已支持。在 Vue2 项目中，可以使用以下一些常用的虚拟表格插件：
[1]umy-ui官方文档
[2]vxe-table官方文档
1.umy-uiumy-ui 适合和 element ui 组件库搭配使用
快速使用：
1npm install umy-ui
123456789101112131415161718192021222324252627282930313233343536373839404142<template> <div> <u-table ref="plTable" :data="tableData" :height="height" use-virtual showBody ...
vue中常用的插件
在 Vue 项目开发中，有很多插件可以用来提高开发效率和功能实现，以下是一些常用的插件。
Vue 项目插件Vue-CLI：Vue 的官方命令行工具，用于快速搭建 Vue 项目的开发环境和构建打包等操作。
Vue-Router：一个 Vue 插件，用于实现路由功能。
Vuex：一个 Vue 插件，用于实现全局状态管理。
Axios：一个用于发送 HTTP 请求的 JavaScript 库。
Vue Test Utils：Vue 的官方测试工具库，用于编写和运行单元测试和端到端测试。
UI 组件库Element UI：一个基于 Vue 的 UI 组件库，提供丰富的 UI 组件和样式。
Ant Design Vue：一个基于 Vue 的 UI 组件库，提供丰富的 UI 组件和样式。
Bootstrap Vue：一个基于 Vue 的 UI 组件库，提供丰富的 UI 组件和样式。
Vuetify：另一个流行的基于 Vue.js 的 UI 组件库，提供了大量的现成的组件和布局，也可以根据自己的需要自定义主题。
富文本编辑器、代码编辑器CodeMirror：一个基于 JavaScript 的代码编 ...