EsquireY的博客

【代码】vue项目生成二维码。

前端实现导出Excel表格，简单封装成方法，全局挂载，使用的时间直接调用方法

介绍Vue项目中如何引用Base64,为产品开发注能

Vue路由传参的两种方式

简单介绍Vue过滤器的用法，以处理时间戳为案例

官网介绍传送门场景介绍Vue 父子传值是单项数据流，子元素如果直接操作通过Prop 传过来的值会就报错，但是在实际业务中就有这样的需求，所以就有了 sync 修饰符 。例子/** 父组件*/<FilelistUpdate ref="filelistUpdate" :loading="insuredLoading" :FileListdata.sync="FileListdata" @save="saveFilelistupdate"/>/** 子组件*

1，get<template> <div id="app"> <p> {{msg}} </p> <p>计算属性computed {{testMsg}}</p> <button type="button" @click="updateTestMsg"> 改变msg的值</button> </div></template><script> export d

主要知识点：1， overflow: auto;2， flex-shrink: 0;代码参考// html <div class="menubar"> <ul class="nav"> <li @click="bar = 1" :class="{ active: bar == 1 }">全部</li> <li @click="bar = 2" :class="{ active.

vue 手写一个简单的菜单栏练练手<template> <div class="index"> <!-- menuBar --> <div class="menubar"> <ul> <li @click="bar = 1" :class="{ active: bar == 1 }">全部</li> <li @click="bar = 2" :clas

需求用户没有登录不能做任何操作实现思路1，登录成功保存 cookie2，路由守卫根据 cookie 跳转对应路径3，登出清除 cookie （或者设置cookie的存活时间）1，登陆保存 cookieCookies.set(TokenKey, “xxxxxx”)路由守卫根据 cookie 跳转对应路径// main.js && main.tsrouter.beforeEach((to, from, next) => { // 判断将要跳转的路径没有

方案一：require引入var json = require(’./xxx/xxx.json’);方案二：import引入import json from ‘./xxx/xxx.json’axios 请求 axios.get("/static/json/city.json").then((res: any) => { console.log(res); // 赋值 this.options = res.data; });axios

项目配置vue 2.0 + ts解决方案估计在配置vue项目时没有配置 axios ，从新下载即可安装 axiosnpm install --save axios vue-axios配置模板import axios from ‘axios’import VueAxios from ‘vue-axios’Vue.use(VueAxios, axios)...

1，固定定位失效首先查看是不是固定定位没有应用上（IOS和Android 都测试一下）猜想一，父元素使用了 transform 属性解决方案// 解决方法：.father{ transform:none; // 或者 display：inline;}2， IOS固定定位失效这里总结一下其他作者的观点，尽量不要用固定定位。那你要说我不，那也不是没有办法。在确定不是因为 transform 属性的前提下，可以试试一些现成的组件（vant 的吸顶组件也可以达到 positio

// public --> index.html <meta name="viewport" content="width=device-width,initial-scale=1,minimum- scale=1,maximum-scale=1,user-scalable=0,minimal-ui"> <meta name="browsermode" content="application"> <meta name="screen-or

1，路由守卫解决// 在 main.ts ，利用路由守卫监听，每次跳转返回顶部import router from './router'router.beforeEach((to, from, next) => { document.body.scrollTop = 0 // firefox document.documentElement.scrollTop = 0 next()})...

1，问题项目中，在切换页面的时间， tabs页面不会被记录2，解决思路把状态保存在 mounted 获取保存的值3，方案// 保存数据语法：sessionStorage.setItem("key", "value");// 读取数据语法：var lastname = sessionStorage.getItem("key");//删除指定键的数据语法：sessionStorage.removeItem("key");//删除所有数据：sessionStorage.clea

1，column 布局 // 部分代码，仅供参考 .content { margin: 0rem 0.27rem 0; column-count: 2; // 想分几行你说了算 column-gap: 10px; // 可以去掉试试 .list { background: #ffffff; box-shadow: 0px 7px 32px 0px rgba(7, 0, 2, 0.42);

项目开发中用到了swiper，但是出现了轮播拉不动的情况，排查问题好一阵，最终大佬一行代码解决了我的问题。官方文档说明：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。注意在 created 和 mounted 阶段，如果需要操作渲染后的视图，要使用 nextTick 方法。应用场景1，输入框获取焦点。isFocus(){ this.$nextTick(function () { // 获取焦点 document.get

需求：获取下拉菜单的多个参数 <el-select v-model="form.activityId" @change="changeActivity" filterable :label-in-value="true" placeholder="请选择" > <el-option

Vuea中实现分页效果1，分析需求实现分页，简而言之就是对一组数据按照一定长度进行分割。在点击上一页，下一页以及数字的时间请求相应被切割的数据。2，定义字段 // 对应的数据集合 totalPage: any = []; // 每页显示的数量 pageSize = 10; // 共几页 pageNum = 1; //显示的数据 dataShow = ""; // 默认当前显示第一页 currentPage = 0; // 总数据集合(假设里面有

简单理解插槽就是子组件提供给父组件使用的一个占位符，用标签slot 表示。父组件在这个占位符里去填充组件模板，填充的内容会替换子组件。默认插槽简而言之就是没有名字的插槽，子组件未定义的名字的，父组件会把位指定名字的插槽填充到默认插槽中。<div class="header"> <slot></slot></div><header> <p>这里是匿名插槽</p></header>具名插槽可