随笔分类 - vue
摘要：需求：点击【更多操作】，显示【编辑】【删除】，点击灰色区域关闭弹层 DOM结构： <div class="more-operations"> <transition name="popup"> <div class="popup" v-show="isShow" @click="handleClos
阅读全文
摘要：- 当选中项目后，每隔5秒缓存一次当前页面所填内容 - 缓存至localStorage中，过期时间为7日，到期后自动删除当前项目的缓存，namespace为【visitPlanList】 - 中途退出软件时，下次进入新增页，选中之前的项目，会回显对应的内容 - 如果手动点击【放弃】按钮，并确认退出，
阅读全文
摘要：方式一：使用transition标签包裹需要过渡动画的标签 <transition name="checkbox"> <van-checkbox v-model='item.flag' v-show="isSign"> <template #icon="props"> <div :class="pr
阅读全文
摘要：1、给子组件加上v-if 2、通过ref将异步获取的值赋值给子组件中对应的参数 3、子组件中通过watch监听props的值（或computed） 常用 props: { data: { type: Object } }, computed: { list() { const { id } = th
阅读全文
摘要：有A、B、C三个页面，跳转顺序为A-->B-->C-->B-->A 从A进入B，再从B进入C，从C返回到B，此时，点击浏览器的返回按钮，需要回到A，但是却到达了C 这个过程的路由栈为A --> B --> C --> B，此时点击浏览器的返回按钮，铁定是返回C了 解决办法： 第一种方法：B中监听浏览
阅读全文
摘要：1、安装 npm i --save lodash.debounce 2、引入 import debounce from 'lodash.debounce' 3、使用 <van-search v-model="searchValue" placeholder="输入姓名或工号" @input='han
阅读全文
摘要：给App.vue中添加2个断点： vue.config.js中添加配置（cli3）： vue官网（https://vuejs.org/v2/cookbook/debugging-in-vscode.html）中将这段代码粘贴到launch.json中，注意type为pwa-chrome 点击绿色按钮
阅读全文
摘要：一、原生js的方式： * { margin: 0; padding: 0; } body { height: 2000px; } .header { height: 100px; background-color: red; } .nav { line-height: 50px; backgroun
阅读全文
摘要：
directives/MyLoading/index.vue： <template> <div class="loading-wrapper"> <div class="loading-content"> <img width="50" height="50" src="./loading.gif"
阅读全文
directives/MyLoading/index.vue： <template> <div class="loading-wrapper"> <div class="loading-content"> <img width="50" height="50" src="./loading.gif"
阅读全文
摘要：vue.config.js： devServer: { before: function (app) { app.get('/aaa', (req, res) => { res.json({ errno: 0, data: { id: 1, name: '小明' } }) }) } } App.vu
阅读全文
摘要：<template> <div id="app"> <transition-group tag="ul" name="list"> <li v-for="(item,index) in list" :key="index">{{item}}<button @click="handleDelete(i
阅读全文
摘要：store/index.js： import Vue from 'vue' import Vuex from 'vuex' import school from './school' import { createLogger } from 'vuex' import logger from 'vu
阅读全文
摘要：ProjressCircle.vue <template> <div class="progress-circle"> <svg :width="size" :height="size" viewBox="0 0 100 100"> <circle r="50" cx="50" cy="50" fi
阅读全文
摘要：<template> <div id="app"> <ul> <li v-for="(item, index) in slideData" :key="index"> <transition> <img :src="item.img" v-if="index currentIndex" /> </t
阅读全文
摘要：方法一： 1、data中定义timer变量 data() { return { timer: null } } 2、在使用定时器时将定时器赋值给timer methods: { toggleImg() { this.timer = setInterval(() => { this.currentIn
阅读全文
摘要：根据windows日历，获取当前周，以及当前周的前2周和后4周，共7周的日期范围 export function getFormatDate(serverDate) { let list = [] // 二维数组 let formatDate = function (date, days) { le
阅读全文
摘要：1、作为事件对象【原生事件】 <button @click="handleClick">按钮</button> <el-button @click="handleClick($event)">按钮</el-button> methods: { handleClick(e) { console.log
阅读全文
摘要：1、utils/utils.js const namespace = 'mall' export function setItem(key, value) { let storage = window.localStorage.getItem(namespace) storage = storage
阅读全文
摘要：当使用elementUI的按钮组件时 <el-button @click="handleClick1">按钮一</el-button> <el-button @click="handleClick2">按钮二</el-button> <el-button @click="handleClick3">
阅读全文
摘要：定义Child组件： <template> <transition name="slide"> <div id="child" v-show="isShow"> <h1>子组件</h1> <button @click="isShow=false">按钮</button> </div> </trans
阅读全文
