vue
阿晏_
这个作者很懒,什么都没留下…
展开
-
elementUI+vue实现商城分类导航弹出二级菜单悬浮展示(鼠标经过时显示)
效果二级菜单显示是用了elementUI的两个组件:el-tooltip + el-cascader-panelvue代码<!-- 分类 --><div class="category-box"> <span class="category-label">分类</span> <div class="flex-1"> <div class="category-list">原创 2022-03-09 20:29:58 · 6732 阅读 · 0 评论 -
vue3 Teleport的应用示例
首先看下官方文档里Teleport的介绍,Teleport也是一种组件,例如下面的代码,能够将<child-component name="John" />组件传送到#endofbody的标签里去渲染。<teleport to="#endofbody"> <child-component name="John" /></teleport>同时,props参数name="John"可以正常传递,就是说,在代码中Teleport保持原有布局层级、参数传原创 2021-08-31 20:04:40 · 669 阅读 · 0 评论 -
小程序页面移到vue项目中后使用正则匹配替换字符view、wx:for、rpx等;vsCode使用正则表达式替换字符
最近做得一个需求是,将线上小程序的某部分功能页面,加到APP版本上。幸好APP版本是vue项目,小程序的代码又与h5相似,所以样式结构逻辑直接挪过来再慢慢改也能做。小程序页面挪到vue项目,那就是:.wxss代码放在 <style scoped></style>标签里.wxml代码放在 <template></template>标签里,可能需要加层<div></div>.js里的data、onLoad、properties等放原创 2021-07-02 11:21:02 · 1253 阅读 · 0 评论 -
vue中beforeRouteEnter、beforeRouteLeave的应用场景
每个vue单文件组件中,可以加入三种route navigation guards(导航守卫钩子):beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave,比较常用的是beforeRouteEnter和beforeRouteLeave,这里总结下项目中遇到的应用场景。beforeRouteEnter比较常见的一种应用场景就是,当前页面是数据列表页并且开启了缓存,跳转到其他子页面再跳转回来时,需要根据不同的页面或参数来判断是否重新加载列表页的数据。有一种方原创 2021-02-03 14:30:16 · 16382 阅读 · 0 评论 -
vue+axios拦截处理、简单二次封装
代码http.jsimport Vue from 'vue'import { Loading,Message } from 'element-ui';// 防止一开始弹出提示框Vue.component(Message.name, Message);//axios 设置import axios from 'axios'axios.defaults.timeout = 180000; //3min超时//默认网关-计划系统网关const BASE_API = "/api/myclient原创 2020-10-12 18:28:55 · 215 阅读 · 2 评论 -
vue+elementui 房贷计算器
loan房贷计算组件<template> <el-tabs type="border-card" v-model="loanType"> <el-tab-pane label="商业贷款" name="1" class="load-card"> <!-- 商业贷款 --> <el-form :model="commercialLoans" :rules="rules" ref="r原创 2020-10-12 14:13:33 · 2807 阅读 · 0 评论 -
element-ui大图预览el-image-viewer组件,实现图片查看
在不使用Image组件的时候,可以用el-image-viewer组件实现大图预览。<!-- 大图预览 --><el-image-viewer v-if="showBig" :on-close="closeViewer" :url-list="showBigImgList"/>// 仅做示例<script> import ElImageViewer from 'element-ui/packages/image/src/imag原创 2020-10-09 14:07:50 · 8372 阅读 · 7 评论 -
vue 时间线组件(时间轴组件)
效果vue-时间线组件(时间轴组件)代码<template> <ul class="timeline-wrapper"> <li class="timeline-item" v-for="t in timelineList" :key="t.id"> <div class="timeline-box"> <div class="out-circle">原创 2020-10-09 16:17:49 · 28971 阅读 · 10 评论