StellaXiao98-CSDN博客

原创【Vue3 + element plus】Icon全局注册组件过程踩坑

过程：历史项目用的是vue 3.0.0，element plus 1.0.0参考其他大佬的方法(文末)，全局install并注册了element plus 的 icon 组件库。npm install @element-plus/icons-vueimport ElementPlus from 'element-plus'import 'element-plus/dist/index.css'import * as ELIcons from '@element-plus/icons

2022-04-27 19:46:29 1996

原创【Vue3.0 + Element-plus】el-tree树状结构节点前箭头样式修改

Vue2和Vue3 的修改方法略有不同.el-tree .el-icon svg{ //原有的箭头去掉 display: none !important; height: 0; width: 0;}.el-tree-node__expand-icon{ //引入的图标（图片）size大小 => 树节点前的预留空间大小 font-size:16px;}//图标是否旋转，如果是箭头类型的，可以设置旋转90度。如果是两张图片，则设为0.el-tree .el-tree

2022-04-27 19:39:04 4068 4

原创 HTML页面多语言登录页的实现（Vue项目背景）

背景：一直以来都是做的Vue项目，这次使用Vue框架，结合appWeb的框架（登录、上传等不变）来将之前的项目改为前后端分离式开发。碰到的需求点是，在html写的登录页面中，做简单的多语言。项目结构如下：需求：在login.html中可以根据浏览器或cookie缓存的语言状态来改变页面文字。代码：<head> <meta charset="utf-8"> <script language="javascript" type="t

2022-04-15 15:29:20 848

原创 Vue+Element-UI，表单校验多语言切换

技术栈：Vue、Element-UI、Vi18n在做项目时，按照ElementUI官方demo写法，将validator的函数和rules写在了data里，然后发现当表单有错误提示信息时，切换语言而不清除错误提示（clearValidate），校验文字的语言并没有跟着改变，必须手动刷新才能实现想要的效果。如下图：解决方法：将rules写入计算属性computed:{ rules(){ let checkName = (rule,value,callback)=&

2022-04-07 19:02:40 1498 2

原创废话文学｜小白如何定位并解决问题？避免做伸手党

这篇文章算是吐槽+随笔性质的吧，暂定的标题其实并不能完全概括我的内容????本文对大部分CSDN用户来讲都是通篇废话，受众：小白！小白！比小白还小白的小白！不知道怎么定位错误解决问题，又不想做“伸手党”麻烦别人的朋友！（比较有经验的朋友就当看废话文学看个乐子就好，不喜勿喷）可能看起来全是废话，如果有那么一点点帮助????，笑过还请点个赞目录起因是这样方法起因是这样某vue技术交流群里有一位小白同学，经常提一些让人啼笑皆非的问题。他的提问，70%是很基础很简单的问题，比如说怎

2021-10-26 15:35:39 255

原创 @Amap/Amap-vue实现拖拽Marker点坐标踩坑记录（续）

实现效果：地图上有很多覆盖物marker，marker的位置可以通过拖拽的方式设置坐标；同时可以从工具栏拖拽新的坐标点到地图上。点击marker显示信息窗。功能示意图：可以从右侧的设备列表中拖拽图标到地图上，并设定位置，点击设备，可以显示实时信息窗。代码：html:<template> <div class="container-box" @mousemove="moveMouse" @dragover="deviceDropOver($event)" @dr

2021-09-03 15:31:18 1030 2

原创 @Amap/Amap-vue使用（踩坑）记录

官方文档：https://jimnox.gitee.io/amap-vue/references/map/Amap是封装好的高德地图组件，易于使用。但私心说一句，不熟悉高德地图原生API的话，Amap-vue的官方文档对新手来讲不是很细致，还是多参考高德官方文档，对照着学习。安装： npm install --save @amap/amap-vuemain.jsimport AmapVue from '@amap/amap-vue';AmapVue.config.version

2021-09-03 14:48:29 2850 4

原创提问：使用原生的XMLHttpRequest请求时JSON.parse()有报错

背景：一个几乎全静态页面的项目中，有一个地方涉及到了请求后端，不想从api/model从头写起，于是使用原生的xhr方法发get请求。created() { let requestApp = new XMLHttpRequest();//new一个请求 let that = this; requestApp.onreadystatechange = function () { if (requestApp.status === 200) {

2021-09-02 12:08:53 429

原创 VUE｜实现静态网页多语言切换，并存储在cookie中

背景：VUE2.0项目，但其实应用的基本都是原生的方法，所以是不是vue项目应该都有共通之处。想要达成的效果：通过选择框选择语言设置给静态页面，刷新页面保存之前的语言选择。----------------------------------1.语言设置全局main.js文件引入i18n题外话：刚了解到i18n的命名原因觉得挺有意思的——internationalization 的首尾字母i、n，中间有18个字母，所以叫i18n安装vue-i18nnpm install

2021-09-02 11:31:14 832

原创 Vue3.0 + Element Plus｜踩坑：表单重置按钮resetForm失效

在项目过程中按照之前的经验写重置按钮时发现不生效，换了原生的重置按钮也不行。后来发现还是版本移植的问题。vue2.0和vue3.0的语法不一样，在main.js中引入resetform函数时语法出错// Vue2.0Vue.prototype.resetForm = resetForm;//Vue3.0let app = createApp(App);//...app.config.globalProperties.resetForm = resetForm;..

2021-07-20 16:12:46 2835 4

原创 element plus 组件默认英文改为中文

此方法全局修改，并非按需引用main.js文件import 'dayjs/locale/zh-cn'import locale from 'element-plus/lib/locale/lang/zh-cn'...let app = createApp(App);app.use(router);app.use(ElementPlus,{locale});app.mount('#app');

2021-07-20 16:04:18 1624 1

原创 Vue3.0 + Element Plus｜侧边导航栏、标题栏组件应用全局

刚开始接触项目，从0开始搭建管理平台，最开始先写的页面布局，采用的很笨的方法：每写一个页面就写一次页面布局样式<el-container> <el-aside style="width: auto" v-if="$route.meta.keepAlive"> <keep-alive>  <com-sidebar ></com-side

2021-07-20 16:01:20 4615

原创新手入门vue-element-admin框架（三）：实例：支持后台的登录功能改造

前言：（一）环境配置：https://blog.csdn.net/StellaXiao98/article/details/116790478?spm=1001.2014.3001.5502（二）vue-element-admin简介及安装：https://blog.csdn.net/StellaXiao98/article/details/116791368?spm=1001.2014.3001.5502第三部分实例：实现登录页面本文将介绍vue-element-admin框架中..

2021-05-14 16:07:48 2137 1

原创新手入门vue-element-admin框架（二）：安装并运行vue-element-admin框架

前言：环境配置：第二部分初步接触vue-element-admin框架这一部分介绍了笔者安装并运行vue-element-admin框架的过程。

2021-05-14 15:13:18 1954 1

原创新手入门vue-element-admin框架（一）：MAC系统下的环境配置

新手入门vue-element-admin框架（一）：MAC系统下的环境配置本系列记录了笔者在学习vue-element-admin框架过程中的经历和心得，如有不足，请多指教。参考资料都有注明来源，如有遗漏，还请指出，并多多包涵。第一部分环境配置众所周知，配环境是做开发的第一道坎。参考资料：https://cn.vuejs.org/v2/guide/installation.html---------------------------------------...

2021-05-14 14:40:21 1036

StellaXiao98的博客