前端
StellaXiao98
这个作者很懒,什么都没留下…
展开
-
【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 · 2008 阅读 · 0 评论 -
【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 · 4080 阅读 · 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 · 851 阅读 · 0 评论 -
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 · 1506 阅读 · 2 评论 -
@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 · 1032 阅读 · 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 · 2862 阅读 · 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 · 431 阅读 · 0 评论 -
VUE|实现静态网页多语言切换,并存储在cookie中
背景:VUE2.0项目,但其实应用的基本都是原生的方法,所以是不是vue项目应该都有共通之处。想要达成的效果:通过选择框选择语言设置给静态页面,刷新页面保存之前的语言选择。----------------------------------1.语言设置全局main.js文件引入i18n题外话:刚了解到i18n的命名原因觉得挺有意思的——internationalization 的首尾字母i、n,中间有18个字母,所以叫i18n安装vue-i18nnpm install原创 2021-09-02 11:31:14 · 834 阅读 · 0 评论