Vue
项目实战积累
Kingsaj
这个作者很懒,什么都没留下…
展开
-
vue3 -- 项目使用自定义字体font-family
引入字体文件: 首先,确保你的字体文件(通常是.woff、.woff2、.ttf等格式)位于项目中的某个目录下,比如src/assets/fonts/。在全局样式中定义字体: 在你的全局样式文件中(通常是App.vue或者一个单独的样式文件),使用@font-face规则引入字体文件,并定义字体名称。在Vue 3项目中使用自定义字体(font-family)的方法与在普通的HTML/CSS项目中类似。原创 2024-04-18 15:18:40 · 660 阅读 · 0 评论 -
vue2 -- 截图工具html2canvas
其中,this.$refs.capture 是一个引用,它可以指向组件内的某个 HTML 元素,以便让 html2canvas 截取该元素。:这样就可以在 Vue 中使用 html2canvas 实现截图功能了。在回调函数中,可以根据需要对生成的 Canvas 元素进行进一步处理,比如显示在页面上、下载为图像文件或上传到服务器等操作。1:安装 html2canvas 库。可以将网页中的指定元素或整个页面截取为图片,以便保存或分享。:3:编写截图逻辑。在 Vue 中使用 html2canvas 实现。原创 2024-01-18 14:14:36 · 430 阅读 · 0 评论 -
vue2 -- 子组件访问父组件的数据方法汇总
需要注意的是,在使用 $attrs 和 $listeners 时,子组件不能直接修改父组件的数据,因为这些属性只是只读的引用,attrs 包含了父组件传递给子组件但没有被子组件 prop 所接收的属性,$listeners 包含了父组件绑定在子组件上的所有事件监听器。因此,在子组件中可以通过 $attrs 获取到父组件的数据,通过 $listeners 监听和触发父组件的事件。在 Vue 2 中,子组件可以通过 props 属性接收父组件传递的数据,在子组件中使用 $emit 方法来触发父组件的事件。原创 2023-04-27 10:18:49 · 1119 阅读 · 0 评论 -
quill-editor:Vue轻量级富文本编辑器-Vue-Quill-Editor
1、下载Vue-Quill-Editornpm install vue-quill-editor --save2、下载quill(Vue-Quill-Editor需要依赖)npm install quill --save3: 使用<template> <div> <!-- 图片上传组件辅助 --> <el-upload class="avatar-uploader quill-img" :action="up原创 2021-11-29 22:37:57 · 387 阅读 · 0 评论 -
vue -- echarts 饼图/柱状图添加点击事件
echarts原生提供了相应的API,只需要在配置好echarts之后绑定相应的事件即可,即在echarts最后面添加上以下这段代码就可以了。绑定点击事件myChart.on("click", clickFunc);事件处理函数param : echarts的事件处理函数自带的参数,包含了本次触发对象的所有相关参数function clickFunc(param) { alert(param.data.name); // 当前点击对象的name}在vue中使用<temp原创 2021-11-15 15:05:50 · 9007 阅读 · 2 评论 -
vue -- el-tree 增删改操作
效果:实现代码:<template> <div class="app-container"> <el-row :gutter="20"> <el-col :span="4" :xs="24"> <el-scrollbar style="height:86vh;width:100%;"> <el-tree :data="deptOptions"原创 2021-11-14 20:09:48 · 1332 阅读 · 0 评论 -
若依 - vue 项目复盘
若依项目前端总结有table列表数据展示的页面,要有搜索功能,搜索功能,搭配重置搜索功能有table列表数据展示的页面,要有分页功能.如果后端没有提供分页查询功能,可以使用前端分页有table列表数据展示的页面,要有导出,导入功能(目前的项目是这个样子的)有删除功能,必须要有二次确认框(防止误删)有table列表数据展示的页面,thead 展示内容,要和新增数据时填写的 label,保持一致table列表,增删改查,都需要对接后台接口进行操作.否则会发生很诡异的事情(.原创 2021-11-11 23:40:42 · 488 阅读 · 0 评论 -
vue -- 使用element-ui tabs切换echarts 解决宽度100% 问题
vue使用element-ui tabs切换echarts 解决宽度100% 问题 问题echarts渲染时tab选项卡display为none,所以width:100%没有可继承项,被echarts自带方法切割成100px。解决思路: 销毁组件,在tab选项卡被选中时重新渲染组件,这个时候就会有宽度继承。建议使用第二种第一种 解决:通过 v-if 重新渲染组件即可。<template> <div> <el-tabs v-model="activeNa.原创 2021-11-10 23:16:55 · 1340 阅读 · 0 评论 -
vue -- el-tree 添加节点下的数据(递归处理数据)
<el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false" ref="tree" default-expand-all @node-click="handleNodeClick" :highlight-curr...原创 2021-11-09 18:41:17 · 2014 阅读 · 0 评论 -
vue -- 若依 element 前端分页实现
1: HTML 结构<el-table v-loading="loading" :data=" tableData.slice((queryParams.pageNumber-1)*queryParams.perSize,queryParams.pageNumber*queryParams.perSize)" border style="width: 100%" > <el-table-column label="序号" type="index" alig原创 2021-11-07 21:40:31 · 1233 阅读 · 0 评论 -
vue2 -- 响应式赋值组件更新数据v-model不生效问题
问题描述在使用Vue双向绑定(v-model)功能时,封装子组件通过Inject功能使用了父组件中的 model 中的属性进行双向绑定,此时在程序中去更新model的某个属性的值,发现子组件没有实时渲染。原因分析由于 JavaScript 的限制,Vue 不能检测数组和对象的变化。尽管如此我们还是有一些办法来回避这些限制并保证它们的响应性。解决方案 对于这种对象变化,我们有三种方法去解决:方法一使用Vue.set(object,key,value)Vue.set(vm.obj,"sex",原创 2021-11-05 10:40:04 · 3312 阅读 · 0 评论 -
vue -- 封装eacharts组件, watch监听报错
报错信息:Error in callback for immediate watcher错误提示很明显 immediate 错误, 删除 immediate: true 代码即可<template> <div :class="className" :style="{height:height,width:width}" /></template><script>import echarts from "echarts";req原创 2021-10-30 01:16:14 · 1617 阅读 · 1 评论 -
vue下载xlsx文档流(导出功能)
记录一次前端下载xlsx文档流:思路: 1. 调用接口接受后台返回的文档流资源,2.通过内置对象Blob构造器进行解析得到链接地址3.通过a标签的下载功能得到资源说下中间踩得坑, 首先项目中使用axios进行的接口调用, 你如果希望得到的是原始的二进制文档流 ,敲黑板: 那么你的请求头里面要明确设置renponseType:blob (防止浏览器默认给你json序列号)添加:renponseType:blob 属性,解决无法打开文件问题export function exportTerm原创 2021-10-20 22:51:45 · 3047 阅读 · 0 评论 -
Vue3 -- echarts 柱状图 使用
效果:<template> <div style="height: 400px; margin-top: 20px" ref="liveChart"></div></template><script>// 引入echartsimport * as echarts from "echarts/core";// 引入提示框,标题,直角坐标系等组件,组件后缀都为 Componentimport { TitleCompon原创 2021-09-29 15:48:18 · 2576 阅读 · 0 评论 -
Vue3环境搭建和脚手架的使用
传送门原创 2021-09-28 11:51:28 · 77 阅读 · 0 评论 -
手摸手,带你用vue撸后台
传送门原创 2021-09-27 23:46:57 · 225 阅读 · 0 评论 -
vue index.html中引入百度地图api出现警告
Vue 中引入百度地图api出现警告引入百度地图之后,页面出现黄色警告:api?v=3.0&ak=osgDoxZMdG0jUYRCM22zTTXF8fm6rBgA:1 A parser-blocking, cross site (i.e. different eTLD+1) script, http://api.map.baidu.com/getscript?v=3.0&ak=osgDoxZMdG0jUYRCM22zTTXF8fm6rBgA&services=&t=2原创 2021-09-27 16:15:21 · 1504 阅读 · 0 评论 -
vue dist包部署到码云服务
部署前提前端必须接入线上的后台服务api配置webpack(仅适用于vue-cli3以上)根目录新建vue.config.jsmodule.exports = { // 这里是脚手架的配置, // 其中如果想修改 webpack 配置 publicPath:'./', configureWebpack:{ // 声明在 configureWebpack 属性对象里面即可 // 如果没有这个需要, 这个文件可以不存在 }}原创 2021-09-25 22:11:17 · 474 阅读 · 0 评论 -
Vue2 — 插件百度地图vue-baidu-map
官方https://dafrok.github.io/vue-baidu-map/#/zh/start/installation申请密钥http://lbsyun.baidu.com/apiconsole/key自动生成器http://api.map.baidu.com/lbsapi/creatmap/index.html大佬例子https://www.cnblogs.com/jiekzou/p/10485604.html示例:$ npm install vue-baidu-map --s原创 2021-09-24 11:34:35 · 588 阅读 · 0 评论 -
Vuex 模块化,持久化
目录结构:app.jsexport default { // 命名 namespaced: true, // state 保存的状态 state: { slider: { opened: JSON.parse(sessionStorage.getItem("opened")), }, token: sessionStorage.getItem("token") || "", menu原创 2021-09-23 14:49:57 · 208 阅读 · 0 评论 -
Vue3 vue-router 使用
<template> <div> route <button @click="goBack">后退</button> <!-- 编程式跳转 --> <button @click="goProduct">编程式跳转</button> <!-- 声明式跳转 --> <router-link to="/serve">声明式跳转</router-lin原创 2021-09-23 10:36:57 · 771 阅读 · 0 评论 -
vue中router与route区别
vue-router中经常会操作的两个对象route和router两个。1、$route对象$route对象表示当前的路由信息,包含了当前 URL 解析得到的信息。包含当前的路径,参数,query对象等。1. $route.path 字符串,对应当前路由的路径,总是解析为绝对路径,如"/foo/bar"。2. $route.params 一个 key/value 对象,包含了 动态片段 和 全匹配片段, 如果没有路由参数,就是一个空对象。3.原创 2021-09-23 09:56:52 · 83 阅读 · 0 评论 -
$.ajax和axios的区别
1.两种方法请求接口代码axiosaxios({ url: '接口地址', method: 'get/post', responseType: 'json', // 默认格式 data: { "参数名" : "参数值" }}).then(function (response) { console.log(response);}).catch(function (error) { console.log(error);})ajax$.ajax({ ur原创 2021-09-23 09:30:13 · 610 阅读 · 0 评论 -
Vue3 数组转换成树形结构
需要处理的数据:[{ "CODE": "01", "NAME": "服务投诉"}, { "CODE": "04", "NAME": "停送电投诉"}, { "CODE": "0201", "NAME": "营业厅服务"}, { "CODE": "0202", "NAME": "营业厅人员服务态度"}, { "CODE": "0203", "NAME": "营业厅人员服务规范"}, { "CODE": "0101", "NAME": "收费标准"}原创 2021-09-18 15:15:01 · 793 阅读 · 2 评论 -
Vue 3 的组合 API 如何请求数据
传送门原创 2021-09-17 16:51:47 · 597 阅读 · 0 评论 -
Vue3通过axios来读取本地json文件
前言一般前端mock数据或者数据量过大且不需要考虑安全问题,或者数据稳定不需要常做变更的场景,这些数据可以由前端进行维护,将数据转为json文件放到前端本地进行读取。本人在项目开发中,要实现地图的下钻功能,将各省市的json下载到了本地静态资源包中,结果请求时总是报错404正题前端存放JSON文件的位置我们的项目是通过vue-cli3创建的,vue-cli3版本脚手架对外暴露的静态文件入口是public文件夹(原来是static文件夹),这里本地json文件也应该放在这里请求JSON数据直接原创 2021-09-17 16:42:28 · 4489 阅读 · 1 评论 -
Vue3使用axios
控制台安装axiosnpm install axios --save创建文件:src/axios/index.js。通过Promise封装axiosimport axios from 'axios';axios.defaults.baseURL='/api' //此路径为配置代理服务器时的代理路径 export default { get(url, data, responseType) { // url: 接口;路径;data: 请求参数;responseType:相应的原创 2021-09-17 14:42:55 · 1137 阅读 · 1 评论 -
Vue项目中使用字体图标 带详细图解
1、首先在iconfont添加图标 传送门2、把要添加的图标添加至购物车3、点击右上角的购物车,点击添加至项目。没有项目的话就点击旁边的 + 加号建立项目4、点击下载至本地5、下载完毕后,解压,在你的项目下的assets文件夹里建立一个fonts文件夹,放入解压之后的字体图标文件。主要放这几个文件:5、进入inconfont.css文件,修改以下路径:具体根据你放置的文件位置确定6、在main.js文件中引入iconfont.css:import ‘./assets/font原创 2021-09-17 11:32:55 · 615 阅读 · 0 评论 -
Vue3 Composition API如何替换Vue Mixins
传送门想在你的Vue组件之间共享代码?如果你熟悉Vue 2 则可能知道使用mixin,但是新的Composition API 提供了更好的解决方案。在本文中,我们将研究mixins的缺点,并了解Composition API如何克服它们,并使Vue应用程序具有更大的可伸缩性。回顾Mixins功能让我们快速回顾一下mixins模式,因为对于下一部分我们将要讲到的内容,请务必将其放在首位。通常,Vue组件是由一个JavaScript对象定义的,它具有表示我们所需功能的各种属性——诸如 data,met原创 2021-09-16 23:28:38 · 249 阅读 · 0 评论 -
vue3中watch函数
1. watchimport { watch } from 'vue'1.1. 监听普通类型// 监听,当路由发生变化的时候执行watch:{ $route(to,from){ console.log(to.path); }},或者// 监听,当路由发生变化的时候执行watch: { $route: { handler: function(val, oldVal){ console.log(val); }, // 深度观察监听原创 2021-09-16 16:01:23 · 3388 阅读 · 0 评论 -
HBuilderX 打包APP
第一步build的文件(dist目录下的文件)使用HBuilderX 打包成APP使用 HBuiderX 打包。(工具下载地址:http://www.dcloud.io/)一、创建项目【文件-新建-项目】 选择项目类型和填写项目名称创建生成如下目录二、dist目录下的文件拷贝到该工程(1)包里工程路面下unpackge目录和mainifest.json文件 其他文件目录全部删除(2)拷贝dist目录下的文件到该工程目录拷贝后目录结构大概如下:三、打包前项目配置双击文件main.原创 2021-09-15 11:05:43 · 1079 阅读 · 2 评论 -
前端面试常见问题--持续记录
Promise运行机制及async/awaitPromisePromise三种状态pending 过程中,不会触发then和catchresolved 成功,会触发后续的then回调函数rejected 失败,会触发后续的catch回调函数then正常返回resolved,有报错则返回rejectedcatch正常返回resolved,有报错则返回rejected案例: Promise.resolve() .then(() => { // 里面没有报错原创 2021-09-13 16:51:23 · 67 阅读 · 0 评论 -
vuex的模块化使用
传送门原创 2021-09-12 23:27:32 · 138 阅读 · 0 评论 -
Vue3组件通信总结
传送门原创 2021-09-10 17:46:55 · 121 阅读 · 0 评论 -
vue3 路由跳转、传参
1.路由的路径配置都在index.js文件里import { createRouter, createWebHistory } from 'vue-router'import Home from '../views/Home.vue'// 两种方式引入页面const routes = [ { path: '/', name: 'Start', // 方法一 component: () => import('../views/Start.vue') },原创 2021-09-10 16:41:08 · 1444 阅读 · 0 评论 -
移动端适配方案之postcss-px-to-viewport
之前做移动端适配时,基本上是采用rem方案,现在发现了一个新的方案,就是用viewport单位,现在viewport单位越来越受到众多浏览器的支持postcss-px-to-viewport,将px单位自动转换成viewport单位,用起来超级简单,postcss-px-to-viewport 文档安装npm install postcss-px-to-viewport --save-dev在src目录下创建postcss.config.jsmodule.exports = { pl原创 2021-09-09 11:42:33 · 421 阅读 · 0 评论 -
vscode 格式化代码 与 eslint 冲突的问题解决
项目中配置了eslint后,在使用vue界面里格式化的时候总是不一致。然后在配置中加了配置也无效(File - Preference - Setting)查了下原因是在vue开发的时候我们一般都安装了Vetur的插件来对.vue格式的文件进行处理,Vetur自带了格式化,规范就是使用prettier这时候装prettier插件,并且在设置或setting.json里配置了prettier的话是无效的解决方法:在setting.json中加入下面的配置就可以了{ "vetur.format..原创 2021-09-08 17:28:14 · 1039 阅读 · 0 评论 -
vue3 购物车:1:购物车是否全选功能 2:购物车金额总数
传送门原创 2021-09-08 11:04:57 · 170 阅读 · 0 评论 -
vue3知识梳理
1: ref() 函数接受参数类型:number,string,布尔值,数组,对象,null使用方法:<template> <div> <h3>ref的使用</h3> <p>a1的值{{a1}}</p> <p>a2的值{{a2}}</p> </div></template><script>// 先引入再使用import { re原创 2021-09-03 11:30:22 · 284 阅读 · 0 评论 -
如何搭建vue3项目(使用vite以及ts)
前言vue3已经正式发布有一段时间了,本着学习使人进步的原则,就开始了vue3的实践之路。vue3推出了一个web开发构建工具vite,那就放弃使用vue-cli尝尝鲜吧。vue3项目也是用了typescript,并且现在ts也很火,就正好一起实践一下。准备工作确保安装了node开始1、项目初始化npm init vite-app my-vue3此时项目就已经初始化好,并且可以正常运行了。cd my-vue3npm installnpm run dev使用vite搭建好的项目是没有原创 2021-09-01 12:38:14 · 2068 阅读 · 0 评论