vvv3171071的博客

看了好多相关的文章都没有完全贴合选用Vue3+nuxt+ts框架的，也不太靠谱，只好自己踩坑实现了首先去高德开放平台用自己的账号申请一个key，位置如下，申请好后保存好生成的key我们使用，一个高德地图2.0版本的vue3对应封装由于我们使用了nuxt框架，组件库内部使用的插件会使用部分特殊的对象，比如process、window。因此在使用时需要根据Nuxt要求处理加载顺序和对象的默认值处理。在根目录的utils文件夹下创建文件，根据自己项目的规范在其他目录创建也可以在nuxt配置文件。

自从成为全栈后感觉思考问题和找bug的视野更广了，写代码也觉得越来越有趣，越来越顺畅。相信自己选择的路，即使它不一定对，只要努力让自己不后悔就好。祝大家学有所成，劳有所获，加油~

如果你的前端项目技术栈使用的是Vue3+nuxt+ts，并且老大让你集成一下那个传说中非常丝滑的TinyMCE富文本编辑器，那么恭喜你和我一样中大奖了。网上找了好久都没有找到同类型且靠谱的实现方案，于是就自己着手研究文档并踩着坑解决了。TinyMCE中文文档中文手册懒得看过程的直接跳到最下方复制组件源码后按自己项目微调即可。

本次需求中UI提供的设计图的一个模块：开发页面过程中写该模块样式时还原出的效果：实现方法：在的里进行配置：2、tooltip的文本框：这部分没有特供的配置属性，直接用配合超文本的形式进行样式加工：这边值得一提的是CSS中的backdrop-filter这个属性，在案例中实现了一个模糊滤镜的效果该属性的各项配置效果具体可参考该文章：css的backdrop-filter未来有时间再好好研究下这个属性并将经验输出成文章分享给大家~THX！

对于watch的使用大家都还是比较熟悉的，我们平时使用的比较多的就是watch一个变量，偶尔还是使用deep：true来监听对象，但是immediate的使用就相对比较少，之前有遇到过这个属性，而且也查找过资料，但是一直都是有点懵懵的，要深刻去理解他，我们还是主要是从它的作用，需要在那种情境下使用它。

@mouseenter与@mouseleave。适用于鼠标移入移出时该块整体元素只执行一次事件的场景，例如自行封装的多层级组件。

算是一个比较偏门的需求吧，具体UED给的设计图效果如下：看起来非常简单，但实际实现起来……也确实简单，就是步骤多一点~我们知道Echarts提供的markPoint标注最大值和最小值是会有一个水滴图案的：首先要做的就是隐藏这个水滴图案。但如果将markPoint.symbol设为’none’，会将label文本一同去除。所以思路应为将水滴图案的颜色置为透明。

$once是一个函数，可以为Vue组件实例绑定一个自定义事件，但该事件只能被触发一次，触发之后随即被移除。$once有两个参数，第一个参数为字符串类型，用来指定绑定的事件名称，第二个参数设置事件的回调函数。$once可以多次为同一个事件绑定多个回调，触发时，回调函数按照绑定顺序依次执行。还可以作为修饰符使用。

无论是什么层级的组件之间互相调用，掌握好ref后都是万变不离其宗。来练练手吧。

选择初始时间后，第二个选择的时间前后不能超过初始时间的一个月。且此时下拉框变成禁用状态。选好起始时间和结束时间后，下拉框与所有禁止选用的日期限制全部放开，以供下一轮的正常选择。例如：点击7月15日后，在8月14日往后的日期全部禁止选中。7月15日前一个月的6月15日之前的日期也全部禁止选中。未选择时间时，最初选择时间不能超过今天。...

vuex，虽说是一个可能即将要被淘汰的状态管理模式，但既然项目中遇到了，还是提出来记录一下开发思路，毕竟万变不离其宗~首先用户信息是从后端接口获取到的，我们将要调用的获取用户信息接口封装成方法放在api文件夹下的index.js或另开一个user.js文件，例如：然后我们来到vuex的store文件夹里，vuex的配置就不细说了，看官方文档或百度配置成自己习惯的方式即可，demo放出来仅供参考一下——在store文件夹下创建modules文件夹，分模块存放，新建我们的user.js文件用于存放用户权限信息

$confirm，你也不想让ElementUI蒙羞吧？那就听话，让我使使！

render-header就决定是你了

el-tree默认的focus样式颜色太浅，有时候电脑亮度低或者换个有色差的屏幕，根本看不出来哪一个节点被选中了。而且只有焦点在el-tree时才有颜色变化，鼠标在别的地方点一下就没了，这样会让用户忘记自己之前选的是哪个节点，很不方便。第一步：给el-tree组件标签加上属性highlight-current开启高亮加了这个属性，选中的节点的样式才会有highlight-current类，这样接下来才能改变选中的节点的样式。第二步：在css中修改高亮样式一个小tip：这里建议是给该页面文件最.

前提：时间选择器绑定的值类型取Date，当选择时间发生改变时，执行paramsChange方法，在该方法开头验证所选时间是否正确，若正确则进行接口请求，反之弹出错误提示信息。时间显示维度为日时，正常查询显示如下：若所选时间范围超过30天，则弹出错误提示信息：方法一：用时间戳验证时间范围 paramsChange(row) { this.params = { ...this.params, ...row, // 因为时间维度选的是

这篇文章用来分享自己项目中做el-calendar日历组件封装时的一些实用功能和踩的一些坑吧，毕竟ElementUI官方文档上对这个组件的描述实在太少了。1、给每一天增加可输入的input框其实这个功能在官方文档上基本已经实现了（在“自定义内容”那一块），直接在slot插槽里再加个input即可。 <el-calendar v-model="calendarDate"> <template slot="dateCell" slot-scope="{ da

网上查el-calendar相关的按钮点击事件文章，清一色都是在mounted挂载阶段通过document.querySelector绑定类名添加点击事件。我想说为啥要弄得这么麻烦？el-calendar组件标签中v-model绑定了一个Date/string/number的时间值，无论点击上述哪个按钮，该值都是会改变的。而我们想要实现的是当该时间值改变时（例如变成上个月或下个月或其他时间变回今天）执行某个事件，那直接用watch来监听该值来实现逻辑不就更方便且简单了么放一下我这边的代码：el-.

在工作中遇到的一些项目上有意思、实用性强、复用性广的开发思路

看了各个帖子的描述，还是未能参透$在vue中所想发挥的本意，将一些一知半解的理解摘抄下来，顺带附上自己常见的用法，以加深理解和记忆。摘抄这些只是Vue的命名规则，为了区分普通变量属性，避免我们自己声明或者添加自定义属性导致覆盖$event 是 vue 提供的传递实践的参数。$是在vue中所有实例中都可用的一个简单约定，这样做会避免和已被定义的数据，方法，计算属性产生冲突。$是在vue中所有实例中都可用的一个简单约定，这样做会避免和已被定义的数据，方法，计算属性产生冲突。另一个好问题

文章转自：思否链接项目中用到的地方：vue.config.js里的chainWebpack：前言在项目开发中我们难免碰到需要对webpack配置更改的情况，今天就主要来讲一下在vue.config.js中对一些配置的更改，简单介绍一下loader的使用；用configureWebpack简单的配置；用chainWebpack做高级配置；包括对loader的添加，修改；以及插件的配置1、首先简单介绍一下webpack中loader的简单使用：loader：是webpack用来预处理模块.

ElementUI下拉框+树形控件+搜索+标签功能

项目中做看板重构时遇到的开发需求，不能使用组件，乍一看感觉很头大，但实际上手做出来后还是小有成就的。直接进入正题：先创建一个简单的vue demo项目<template> <div class="drag"> <div class="back_box"> 这是一个背景 <div class="drag_box">这是一个蓝色可拖拽元素</div> </div> </div&g

业务场景：渲染一个这样框框的数据，html代码如下：其中meters数组是有初始数据的，而statusData初始是个空对象：在该情况下，页面DOM肯定是在我请求到statusData数据之前就已渲染完成了，而在我拿到statusData后，页面上的数据也未产生变化。statusData内容：楼主首先想到的是用$set代替直接赋值，然而马上发现了问题：我statusData原本就是个空数组，没有初始属性，要怎么用$set呢？那就得在使用$set前给对象一个默认值，在data里给statu

promise解决异步

①. 首先介绍一下window.onresize，这个方法可以监听窗口变化。将window.onresize写在mounted中，在窗口变化时就会执行它的内容。如： mounted() { window.onresize = () => { console.log("窗口发生变化时会打印该条"); }; },②. 接下来，只要在window.onresize中写入重新绘制echarts的逻辑就OK了echarts自带resize这个API，即.

test组件代码<template> <div class="test_box"> <p @click="go">测试组件内部守卫的作用，点击跳到HelloWorld</p> </div></template><script>export default { data() { return { } }, methods: { go() { this.

普通的vue项目使用this.$router.go(-1)就能同时实现后退+刷新了。但是在vue-element-admin或其他复杂的项目中（尤其是后台管理系统），有独特的路由跳转配置，比如在vue-element-admin中使用this.$router.go(-1)，原页面的数据并不会刷新，因为配置了快捷导航(标签栏导航)该方案运用了 keep-alive 和 router-view 的结合，所以跳转路由后原页面的数据仍然存活。解决方案：①、首先，找到页面恢复初始化数据的方法，我采用的是以

案例：从a页面=>b页面=>c页面，当前在c页面，执行某方法后可以如同按了浏览器后退键一样返回b页面方法：若使用vue-router，this.$router.go(-1)可以回到上一页this.$router.back()window.history.go(-1)区别①与②的区别是：go(-1): 原页面表单中的内容会丢失： 1. this.$router.go(-1)：后退+刷新； 2. this.$router.go(0)：刷新； 3. this.$route

一般情况下，我们需要给后台的时间格式是：“yyyy-MM-dd”但是使用Element ui日期选择器DatePicker获取的值是这样的：Thu Nov 04 2021 00:00:00 GMT+0800 (中国标准时间)在官方文档中，有提到可以使用value-format日期格式我们采用"yyyy-MM-dd"，此时，我们只需在时间选择器上加value-format="yyyy-MM-dd"的属性就可以了若使用的是选择日期范围型的DatePicker，返回的时间值为一个数组

后端传来的数据是数据0，1，2。0代表js报错，1代表白屏，2代表其他错误，要求动态显示在表格中 <el-table-column align="center" prop="errorText" label="异常类型" width="150"> <template slot-scope="{row: {errorText}}"> <span v-if="+errorText === 0">js报错</span> <span .

案例：阿里云官网（https://www.aliyun.com）下方的“全面、专业、智能的解决方案”模块进行组件化自己实现出来的效果：gitee仓库：https://gitee.com/Yuzaki-Nasa/aliyun-ace-view-fullColumnvue实现：<template> <div class="common-fadein"> <div class="bg"> <div class="view-center

目的： 图片预加载能够使得用户在浏览后续页面的时候，不会出现图片加载一半导致浏览不流畅的情况。场景：在开发的过程，我们经常会遇到这样的要求，当鼠标hover上去的时候，更改菜单的背景。如果没有进行图片预加载的话，会出现闪烁。那么拥有1px的眼睛的设计师们不会放过你的。为什么会出现这张情况？因为hover的时候，图片才会去加载。那么我们现在来解决这个问题。首先我们要知道一点：如果图片在使用之前就已经请求过了，那么再次使用的时候，就不会再去请求（ps：图片路径一样）。下面讲实现方式：一、方法一项目打

注：是适应不是自适应，指移动端不同尺寸的手机下，为了让canvas宽高能根据外层盒子的大小进行匹配，而非自适应（让canvas随外层盒子大小变化实时自变化）。场景：案例采用的是阿里的AntV F2图表库html：<!-- 环形饼图开始 --><div class="bingtu" id="huanjing"> <div class="chart"> <canvas id="container" :height="chartHeight" :

页面进入时，导航栏背景色为透明：鼠标移入时，导航栏背景变白，鼠标停留的标签字体颜色变换，出现底边框，若有二级下拉菜单，则平滑向下弹出菜单：gitee仓库地址：https://gitee.com/Yuzaki-Nasa/dji-nav实现导航栏二级从上往下弹出效果：https://blog.youkuaiyun.com/vvv3171071/article/details/121002283导航栏的tab还有点击跳转、点击滚动页面等功能，可自行使用。DJINav.vue：<template>

占位

组长两句话说明的需求，其实也简单，就改一行代码。打开vue.config.js，找到assetsDir，默认输出路径是’static’，改成你想要将静态资源输出到的路径就可以了。我改成了’home/static’ // assetsDir: 'static', assetsDir: 'home/static',然后打包后的dist里的静态资源就放到了dist/home/static目录下题外话：这样做好像是利于Nginx的部署啥的，等这几天忙完项目后好好请教一下原理吧，太菜了，还得更加努

最左的图片是解决后加载成功的，另外三张是加载失败的。原因：webpack把img当成是一种资源，所以使用时要先引进，给路径加上require()即可~解决方法：数组的第一个对象的pic_url是加了require()的，第二个是没加的，对应最初那张页面效果。所以第一张能显示，第二到第四张加载失败。上红框为能加载成功的图片的路径（打包到了dist目录下的assets静态资源文件夹下），下红框为加载失败的路径（依旧是本地的原路径）全部url都加上require()，完工！（手动水印，哈哈）..

原贴地址：https://blog.youkuaiyun.com/qq_36538012/article/details/1187880871、打开src/router下的index,js，把路由模式改成hash模式，改成这样：const createRouter = () => new Router({ mode: 'hash', // require service support scrollBehavior: () => ({ y: 0 }), routes: constantR

页面样式如下：html：<li> <div class="nav-tab">技术分析</div> <ul class="nav-menu"> <li>音视频</li> <li>语言</li> <li>Firebase</li> <li>Google AAB</li> <li>百度</li> </ul&gt

设计案例：左对齐前左对齐后html：<h1 class="module-title">核心产品</h1><ul class="core-top"> <li v-for:'xxx'> <img :src="xxx" alt="" /> <div class="content"> <h3>xxx</h3> <p>xxx</p>