一羊迁徙-CSDN博客

原创 vue-element-admin 转换成中文

vue-element-admin 转换成中文写在前面怎么将项目切换成中文，我觉得要分以下两种情况进行说明。情况一：你的项目需要支持国际化（多语言切换）情况二：你只想要一个纯中文的项目具体步骤写在前面1、vue-element-admin GitHub地址2、在github上面默认选中的是master分支，而master分支上面的项目默认是英文版的。3、很多人把代码down下来之后就开始懵逼了，他们可能只是想要中文版本的项目，又或者是支持国际化（多语言切换）的项目。4、显然，他们

2021-01-08 17:49:35 8575 11

原创 Vue移动端适配方案

Vue移动端适配写在前面二级目录三级目录写在前面此文章需要使用到Vue CLI搭建项目，同时使用的是阿里的二级目录三级目录

2021-01-05 17:29:30 7141 3

原创在Vue中封装Echarts并使用

在Vue中封装Echarts并使用为什么要封装效果图以及项目目录1、效果图2、项目目录具体封装过程1、Echarts的安装2、引入3、封装案例4、使用组件的页面5、使用mixins解决resize问题6、element-resize-detector写在最后为什么要封装如果不封装，每用一次图表，都要重新配置一边option，封装起来方便复用，也方便统一管理。解决元素以及窗口的resize等问题。自己动手封装，只需要看一份文档，并且可以使用更多的原生功能。看完这篇文章你或许觉得自己封装并不难。

2020-12-31 16:26:47 11262 12

原创 Vue动态组件 / Vue中is属性的作用

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！这是你第一次使用 Markdown编辑器所展示的欢迎页。如果你想学习如何使用Mar

2020-12-29 23:20:26 1658 1

原创微信小程序3D轮播图

一、最终效果二、利用原生swiper制作3D效果1、需要注意的几个APIprevious-margin：说白了就是前一张图片能露多少。next-margin：说白了就是后一张图片能露多少。circular：这个属性也是需要加的，加不加什么区别，一对比就知道。2、上代码wxml <view class="swiper_wrapper"> <swiper autoplay indicator-dots indicator

2020-11-27 10:49:11 1002 1

原创一文读懂小程序自定义组件

一、最终效果这是一个简单的标题组件，标题名称是由父组件传递，右侧的更多>按钮是通过插槽实现的。二、组件的定义与使用1、定义组件my_title首先需要在项目的根目录下手动创建components文件夹，将我们封装的组件都存放到该文件夹下，方便统一管理。2、在my_title.json中声明当前页面是一个组件3、my_title.wxml注意：我在这里使用的是命名插槽。<view c

2020-11-27 10:31:04 217

原创面试被问到【未来3-5年的职业规划】，到底该怎么回答？

通常面试的时候，很多HR都会直接问面试者："你的职业规划是什么？你在未来3-5年有什么打算？"很多人或许会产生很多的疑问：为什么HR会热衷于问面试者这样的一个问题呢？他们背后的动机是什么？对于这个问题，HR有着怎样的心理诉求？想要回答好这个问题，理解HR的心理诉求就成了必不可少的功课。一、HR常见的心理诉求其实，HR关心的并不是你真正的职业规划，他们常见的心里诉求有以下两点：1、了解你是否能够踏实的留在公司HR问这个问题，其实也是为了给公司招聘能够「长期稳定、踏踏实实」留在公司工作的人。H

2020-11-16 16:16:52 51320 4

原创面试被问到【从上家公司的离职原因】，这些雷区千万不能踩（附回答示例）

很多人对于HR或者面试官都会抱着敬畏的态度，对于他们提出的问题总是战战兢兢的回答，生怕答错而丢失了自己的工作机会。有这种心理其实很正常，特别是职场新人表现的尤为突出，毕竟HR和面试官对你来说，都带着「考察」性质。作为面试者，只要通过了他们的考察，就可以顺利进入公司。其实，对他们抱着「敬畏」心里，我觉得大可不必。HR的本质其实和我们一样，都是打工人。HR也会有离职的心里，100个HR中可能有80个HR都会想离职，他们的诉求其实和我们一样。只要我们的回答能够让HR所接受就可以了，没有必要回答的冠冕

2020-11-16 16:11:34 1946

原创 vue跳转页面打开新窗口，并且携带与接收参数

1、携带普通类型参数字符串、数字等。path：要跳转新页面的路由链接query：要携带的参数let pathInfo = this.$router.resolve({ path:'/product_detail', query:{ productId:'11' } }) window.open(pathInfo.href, '_blank');新页面的参数接收：this.productId = this.$route.query.product

2020-11-12 12:58:27 1826

原创面试被问到【期望薪资】，怎样回答最合适？

面试中，大家都会被面试官问到各种各样的刁钻问题。问你的期望薪资就是其中一个。薪资对于双方来说是一个既重要又敏感的问题。面试官想法：在招到合适的人选的前提下，尽量给公司降低成本。求职者看法：想要薪资达到预期，又能实现自身价值。对于这个问题，求职者如果没有做好做好准备，通常会陷入两难。说高了，怕自己被刷掉，说低了，自己又不满意。到底要怎样说才能让双方都满意这笔"交易"呢？一、准备以及注意事项这是一个非常“危险”的问题，一定要谨慎回答，尽可能不要在第一次面试的时候提供薪资数额，否则你可能会因此而丢

2020-11-05 13:01:30 5634 2

原创 uniapp某个页面横竖屏切换的坑，横竖屏切换页面元素错乱

问题出现场景最近在使用uniapp做一个App的开发，大概场景：App仅有一个页面需横屏，退出该页面时切换为竖屏。以下复现问题场景。1、在manifest.json中配置orientation节点/* 重力感应、横竖屏配置 */"orientation" : [ //竖屏正方向 "portrait-primary", //竖屏反方向 "portrait-secondary", //横屏正方向 "landscape-primary", //横屏反方向 "landscape-second

2020-11-03 10:26:36 4093 7

原创面试被问到“你有什么缺点？”这么回答的都拿到Offer了！

大家应该都有过这样的经历。在面试的过程中，面试官通常会问求职者这样一个问题：“请简单的说一下你的缺点。”对于这个问题，不管是职场新人，还是职场老鸟，都不一定能够很好的进行回答。作为一个求职者，面试的时候本来就会带着紧张感，突然遇到这个问题，往往会卡壳。感觉怎么说都会“落下圈套”。说轻了，让人觉得你不够诚恳，说重了又有损自己的形象。就算前面回答的很好，因为这个“与工作能力无关的问题”，你也很有可能被刷掉。但是，如果事前做好了准备，你也很有可能因为这个问题而加分。1、面试官为什么要问这个问题？往往问

2020-11-01 14:12:14 8051 2

原创 vue监听滚动事件，控制页面元素显示隐藏

methods中定义监听事件// 窗口滚动监听事件windowScrollListener(){ // 获取滚动条的高度 var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; if(scrollTop >= 600){ // 利用布尔值控制元素的显隐 this.leftMenuVisible = true; } i

2020-10-27 09:52:33 1132

原创 ①Webpack学习入门笔记之国庆搬砖篇第一记

一、Webpack简介1.1webpack是什么webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。在webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。那么为什么要使用webpack呢？由于浏览器不识别ES6（或者更高版本的JS语法）语法，或者CSS预编译处理器（如less，scss），但是我们平常又会经常使用到，将我们写的这

2020-10-02 16:47:38 146

转载 webpack : 无法加载文件 C:\Users\admin\AppData\Roaming\npm\webpack.ps1，因为在此系统上禁止运行脚本。

问题出现场景安装完webpack-cli之后，首次打包出现一下错误：问题出现原因powershell对于脚本的执行有着严格的安全限制默认是不载入配置文件的因而报错可使用Set-ExecutionPolicy指令来修改PowerShell中执行策略的用户首选项。共有四个权限等级可选择：1.Restricted：不载入配置文件不执行脚本【默认该权限等级】2.AllSigned：所有配置文件和脚本必须通过信任的出版商签名这里的脚本页包括在本地计算机上创建的脚本3.RemoteSigned

2020-10-02 13:08:15 1589

原创 uniapp开发，跳转页面成功并刷新页面

需求场景使用uniapp开发，有A、B、C三个页面，在页面A、B点击按钮之后都可以跳转到C页面。在C页面操作完毕之后，点击确定按钮，返回A或B页面（由哪个页面跳转过来的就返回哪一个页面）。解决代码以下是C页面的确定按钮时间处理函数async clickHandle(){ //获取页面栈 let pages = getCurrentPages(); // 需要返回的页面下标 let pageIndex = 0; // 如果当前是A页面跳转过来的 if(this.currentEditIm

2020-09-29 15:45:22 8289

原创 vue路由跳转 router-link 清除历史记录的三种方式

1.在vue项目中说起路由跳转，我们最先想到的就是router-link标签以及this.$router.push函数。router-link和this.\$router.push的实现原理是一样的，在点击router-link时，内部调用的就是this.$router.push。2.this.\$router.push这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。那在我们使用路由跳转的时候如何去掉历史记录呢？官方文档提供了如下三种方式。.

2020-09-25 16:02:59 10354

原创 vue中vm.$set函数的详细使用方法

vue中vm.$set函数的详细使用方法一、为什么要使用二、不是响应性的例子三、vm.$set的使用四、数组下标操作会碰到的误区一、为什么要使用想必大家都遇到过这样一个问题，就是在数组数据变化了，但是页面不能实时的进行渲染。为什么会出现这个问题呢？首先看看Vue.js官网教程中的说法：既然这个问题频频出现，那么为什么vue不提供对数组属性的监听呢？来看看github上大佬的回答：我还记得当时看过的一篇文章，如果vue提供了对数组属性的监听会有什么后果，有一个老外的回答是:“Oh，it’s ver

2020-09-13 14:34:12 9890

原创深入剖析vue原理以及MVVM响应式原理的实现

深入剖析vue原理以及MVVM响应式原理的实现一、什么是MVVM二、几种实现双向绑定的做法一、实现数据绑定的做法有大致如下几种：一、发布者-订阅者模式二、脏值检查三、数据劫持三、vue.js数据劫持实现一、思路整理二、指令解析器Compile的实现二、实现数据监听器Observer三、实现数据订阅者Watcher四、双向数据绑定五、实现Proxy代理四、总结一、效果二、总结一、什么是MVVM大家都知道vue.js遵循的是mvvm的设计理念，下面简要说明什么是mvvm。采用分而治之思想，把不同的代码放到

2020-09-06 14:17:43 1860

原创 VUE 子组件向父组件传值（含传多值以及添加额外参数场景）

一、子组件向父组件传递一个值子组件：this.$emit('change', this.value);父组件：<editable-cell :text="text" :inputType="inputType" @change="costPlannedAmountChange($event)" />// 事件处理函数async costPlannedAmountChange(value) { console.log(value

2020-08-31 17:13:09 11390 2

原创 js移除对象数组中指定（与要求匹配）元素

1.给定数组如下：let objArr = [ { id:1, name:'令狐冲' }, { id:2, name:'东方不败' }, { id:3, name:'任盈盈' }, ];想要删除id为2的元素，首先通过findIndex找到该元素的索引：l.

2020-08-29 12:34:11 4003 1

原创 ant design vue树形表格默认展开所有行defaultExpandAllRows不生效

在渲染之前先判断数据是否存在，存在即渲染就ok，问题得以解决。注意v-if判断即可<a-table v-if="targetCostTableData && targetCostTableData.length" :defaultExpandAllRows="true" :columns="targetCostColumns" :data-source="targetCostTableData" :customRow=

2020-08-27 16:25:49 4570 2

原创 uniapp中使用scroll-view实现图片滑动效果（含点击预览以及长按下载操作）

uniapp中使用scroll-view实现图片滑动效果（含点击预览以及长按下载操作）一、效果图![在这里插入图片描述](https://img-blog.csdnimg.cn/20200815113843330.gif#pic_center)二、注意要点三、代码一、效果图二、注意要点1.在真机模拟时，本地图片不支持下载，可以使用百度上的网络图。2.如果是图片，建议使用绝对路径。使用/代表项目的根目录。3.如果是微信小程序调试，不支持本地图片的预览。三、代码template模板中：&lt

2020-08-15 12:04:58 5485 2

原创 uniapp中的Tabbar中间突起样式，并且绑定点击方法

一、效果图二、官网平台差异说明所以说，想要h5或者小程序支持，请另寻其他文章三、pages.json中tabBar的配置"tabBar": { "selectedColor":"#0c73fe", "color":"#ccc", "list": [ { "text":"首页", "pagePath":"pages/index/index", "iconPath":"static/icon/home.png", "selectedIconPath"

2020-08-15 11:28:24 2879 1

原创 uniapp封装uni.request请求方法（含请求期间的Loading样式）

uniapp封装请求方法（含请求期间的Loading样式）一、封装步骤二、封装思路解析一、封装步骤1. 在项目的根目录创建目录结构如下：封装的请求方法代码如下:// 全局请求路径，也就是后端的请求基准路径const BASE_URL = 'http://192.168.31.39:8899/'// 同时发送异步代码的次数，防止一次点击中有多次请求，用于处理let ajaxTimes=0;// 封装请求方法，并向外暴露该方法export const myHttp = (options)

2020-08-15 11:16:31 17559 7

原创 uniapp自定义顶部导航栏

先上效果图：下面是实现步骤一、去掉原生的导航栏在pages.json中对需要去掉原生顶部导航栏的页面配置中做如下配置：{ "path": "pages/index/index", "style": { "navigationBarTitleText": "首页", "navigationBarBackgroundColor":"#1890FF", "navigationBarTextStyle": "white", "navigationStyle":"custom",/

2020-08-13 14:19:40 12813 6

原创 vue项目在打包时，去掉所有的console.log输出

vue项目在打包时，去掉所有的console.log输出安装插件添加配置安装插件npm install babel-plugin-transform-remove-console --save-dev添加配置安装babel-plugin-transform-remove-console开发依赖，然后在项目的babel.config.js的plugin中添加节点。再build就不会有console警告了。如下配置无论在开发环境还是生产环境都会去掉所有的console输出语句。但是babel.c

2020-08-06 11:07:04 5036 3

原创 ant-design-vue导航菜单a-menu的详细使用

ant-design-vue导航菜单a-menu的详细使用一、递归生成菜单二级目录三级目录一、递归生成菜单此处强调一点，如果是一级以及二级菜单的生成，普通的两层for循环结合递归以及v-if生成即可。如果是想使用a-menu生成三级或者三级以上的菜单，那么就需要定义在单文件内定义函数式组件。那为什么不推荐单文件的形式定义组件，而是使用函数式组件？以下是官方文档的说明：二级目录三级目录...

2020-07-27 00:39:32 33811 14

原创 vue路由跳转报错Avoided redundant navigation to current location: “/xxxxxx“.

这里写目录标题一、问题出现及其出现原因二、问题解决三、原理解析四、this指向复习一、问题出现及其出现原因在使用this.$router.push进行路由的跳转时，出现如下报错：问题出现原因：重复路由跳转，比如说当前路由是商品详情页面/goodsDetail，但是点击按钮进行this.$router.push操作，要跳转的还是商品详情页面/goodsDetail。二、问题解决方式一：升级vue-router版本为3.0即可解决，项目目录下运行命令：npm i vue-router@3.

2020-07-26 17:39:48 38550 17

原创 vue父子组件传值，父组件值改变，值为空数组时子组件渲染失效

定义子组件，在使用子组件时，向子组件传递数组类型的参数，子组件接收到数组之后对数据进行渲染。而父组件的数值是不断变化的，点击按钮一次，获取一次值。当数组不为空时，正常渲染，但是数组为空时，会保留上一次渲染。问题刚遇到的时候，在网上看了很多文章，自己也做了很多尝试。一、尝试一1.在父组件添加v-if判断，当数组为空时，不进行子组件的渲染。虽然这个方式可以解决问题，但是在项目中大量使用了该组件，那就需要在使用子组件的时候大量的添加判断，这种做法直接pass。二、尝试二2.在子组件中添加监听

2020-07-20 18:26:12 3730 1

原创 vue动态生成新表单并且添加验证校验规则

vue动态生成表单绑定数据+添加校验规则一、需求场景以及注意事项一、需求场景一、注意事项二、代码结构一、template中二、data中三、methods中的按钮事件，也就是触发渲染之前的事件三、ant-design中的校验规则一、a-form-model二、a-form-model-item一、需求场景以及注意事项一、需求场景1.用户输入数值，点击按钮弹出对话框的同时，按照用户输入的数值进行表单的渲染。2.点击按钮之后，渲染效果如下：一、注意事项首先声明我这里使用的是ant-design，

2020-07-18 14:15:33 6410

转载 JS判断为数字，并且保留两位小数

一、只允许正数，且保留两位小数if(/^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,2})?$/.test(val)) return val // 返回false即为校验失败 return false二、允许正负数，且保留两位小数if(/(^([-]?)[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^([-]?)(0){1}$)|(^([-]?)[0-9]\.[0-9]([0-9])?$)/.test(val)) return

2020-07-17 14:32:16 2471

原创细说vue生命周期

vue生命周期当中的必知必会一、官网生命周期图二、vue生命周期里都会发生些什么一、八个钩子函数二、看看demo里都会发生什么一、官网生命周期图在写这篇文章之前，看了很多其他人的文章，所以在写之前还是按照惯例先去官网扒图：图片乍一看，里面包含的内容很多，但是不要慌，看完我后面的内容再回来细品这张图。二、vue生命周期里都会发生些什么一、八个钩子函数beforeCreate（创建前）created（创建后）beforeMount(载入前)mounted（载入后）beforeUpdate

2020-07-12 17:04:39 3187 1

原创 vue项目使用高德地图定位当前地址

vue项目使用高德地图定位当前地址一、在项目中安装vue-amap插件二、页面代码三、data数据一、在项目中安装vue-amap插件1.最终效果2.安装命令npm install vue-amap --save3.在main.js中引入import VueAMap from 'vue-amap'Vue.use(VueAMap)VueAMap.initAMapApiLoader({ key: 'dd4cc5f831b67cde767de9a65f983650', plug

2020-07-08 20:33:10 2697 10

原创 vue点击按钮让页面的某一个元素全屏展示

一、先上效果图项目情况：vue+screenfull插件其实文档上写的很清楚：screenfull文档点击页面的全屏图标，使包裹地图的div实现全屏。二、页面结构三、在页面加载时添加监听 mounted () { const element = document.getElementById('map_container'); document.getElementById('full_screen').addEventListener('click', ()

2020-07-08 17:23:50 1459 2

原创根据详细地址获取经纬度（通过高德API）

vue项目根据详细地址获取经纬度（通过高德API）一、在高德控制台key的获取二、Jsonp的使用三、查看success回调返回的打印结果一、在高德控制台key的获取网上找了很多，但是多多少少有点跑不通，这个是我今日亲测。服务平台的类型是Web服务，如果是JS api生成的key不能获取到。错误演示：高德使用手册上写的很清楚：手册二、Jsonp的使用1.引入jQuery我在项目中使用的方法是在index.html中引入jQuery，也可以使用vue-jsonp第三方类库（想尝试但是没

2020-07-08 16:02:24 5158 2

原创 ES6中的Promise以及ES7中的async/await

Promise以及async/await一、异步编程一、同步API二、异步API三、同步API与异步API的区别二、回调地狱与Promise三、ES7中的async/await一、异步编程谈到Promise不得不说这个异步编程的概念，还有涉及到的回调地狱。在JavaScript中API分为同步API和异步API，那么什么是同步API，什么又是异步API呢？一、同步API同步API：只有当前API执行完成后，才能执行下一个API。JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做

2020-06-25 23:20:08 348

空空如也

空空如也