vue
_Eolin
(⊙o⊙)…
展开
-
uniapp-微信小程序,对子组件实现onShow效果
背景:使用uni-app开发一个微信小程序,使用的vue子组件,发现在子组件里面不能使用onShow生命周期,但是可以在page里面可以调用,需要在使用uni.navigateBack()返回后,该组件能请求接口数据刷新。解决:父级组件中,在子组件上添加ref,在父级onShow中通过子组件ref调用方法。onShow执行子组件方法。原创 2022-11-30 21:56:51 · 4901 阅读 · 1 评论 -
饿了么UI 时间控件 el-date-picker时间范围限制
环境:vue:2.6 、element-ui: ^2.13.2需求:需要在日期控件中限制选择31天,根据选择的第一个日期进行判断组件代码:<el-date-picker v-model="formInfo.startTime" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start原创 2022-04-22 11:05:52 · 2580 阅读 · 0 评论 -
vue跳转外部链接
href = "www.baidu.com" 需要带上协议否则在当前地址下跳转如图所示这样了,把协议加上https或者http就可以直接跳转window.open(href);或window.location.href = href原创 2022-02-28 20:34:17 · 4311 阅读 · 0 评论 -
echarts首次加载不显示,再次刷新照常显示
参照了各种办法比如$nextTick、watch、setOption,然后发现是定位层级的问题,也是无语到无以复加,不过问题解决了 还是可喜可贺~问题:首次打开echart页面,数据有,图标不展示一开始没往样式上想,只以为echart写的方式不对,困扰了一天【捂脸】解决:因为样式问题需要父级设置position: relative;并且设置背景色(如果没背景色其实也可以正常显示),如图父级没有背景色生成echart图表会默认给div加个position: relativ.原创 2021-01-22 11:27:45 · 9160 阅读 · 0 评论 -
前端优化
项目加载的内容越来越多,但首屏加载的速度却会被拖慢,所以就需要作出对应的优化。1、分析1)、采用webpack-bundle-analyzer插件 用的vue-cli 2.x脚手架已经自带的该分析工具,运行时带上--reportnpm run build --report 或 yarn build --report如果是vue-cli 3的话,可先安装插件(我觉得也可以先运行下,如果没有report.html文件再安装插件)npm install webpack-bundl..原创 2020-10-09 13:47:05 · 294 阅读 · 0 评论 -
VUE路由去掉“#”
问题:今天做项目优化 发现地址栏带了个#号,觉得有点丑,想要去掉解决方法:在路由文件把mode改为history,原来是hash,果然解决掉了 带#号的问题。但是又发现个新问题,在根目录引入的静态文件 是没有问题的,但是在子页面引用的静态文件就会有问题,引入静态文件是加个@号引入。同样的引入方式同样的文件,home页是能加载出来的,子页面就加载不出来,然后度娘找了下答案,原来是因为hash模式下,根路径是不会变的,但是使用history模式后,根路径就不固定了。那么这种引入方式就不可原创 2020-09-21 10:34:30 · 2502 阅读 · 0 评论 -
Ant Design Vue之布局layout
根据业务需要想直接用layout组件,实现如下效果:然后吧代码复制:<template> <a-layout id="components-layout-demo-custom-trigger"> <a-layout-sider v-model="collapsed" :trigger="null" collapsible> <div class="logo" /> <a-menu theme="dark原创 2020-09-11 11:35:17 · 11257 阅读 · 5 评论 -
vue 动态显示实时时间
成品图:简单来说就两步,首先把时间转换成常规时间,再定时器让其动起来首先data里面定个变量showtime,用timeFormate方法转换当前时间,nowTimes动起来data() { return { showtime: "", }; }, created() { this.showTimes(); }, methods: { // 显示当前时间 timeFormate(timeStamp) { le原创 2020-08-31 17:47:33 · 11303 阅读 · 10 评论 -
vue调用echarts多个图标自适应
在图标的单个组件里面添加事件列表window.addEventListener("resize",()=>{barBox.resize();});当浏览器发生resize事件的时候,让其触发echart的resize事件,重绘canvas。随意拖动浏览器都可以实现自适应...原创 2020-08-29 15:34:42 · 369 阅读 · 0 评论 -
Vue-Devtools安装配置教程(献给伸手党)
最简便的方法是用FQ来通过google应用商店进行安装,但是大多数人还是处在非FQ的状态尝试过安装Node的方法来安装,但是极其不建议用这个方法安装,非常麻烦,而且必须要有node的基础,非常不接地气下面来一个最简便的方法(送给伸手党):查看过很多博客大多数都是,要安装Vue-Devtools,在一个github下面用git clone或者手动下载一个叫做vue-devtools-master的文件。然后呢,你就要用npm进行install,然后再npm install build。所以这意味着转载 2020-08-19 11:32:13 · 423 阅读 · 1 评论 -
vue项目cannot get/的解决办法
启动项目报 cannot get/错误, 一般是项目文件引用路径的问题,或者无意删除了已经被import引入的文件 总之 一般是文件路径的问题。 事实上 当你npm run dev之后,除了看浏览器控制台报什么错,还可以从WebStorm编辑器集成的node控制台查看报错信息。这个控制台一般会报类似这样的错误信息:This relative module was ...原创 2018-11-19 11:15:13 · 4893 阅读 · 0 评论 -
安装vue-amap
项目中需要调用高德地图,用的是vue2,所以上网搜索了一下 推荐用vue-amap 按官网推荐安装但是报一堆错误没办法英语不好 ,试几次也没办法 ,想着试试用cnpm安装然后就可以了...原创 2018-05-17 16:03:32 · 2073 阅读 · 0 评论