2020年08月_qq_36437172

12月 11月 10月 09月 08月 07月 06月 05月 04月 03月 02月 01月

原创使用 vue-router 全局守卫钩子函数，根据登录状态进行路由拦截以及滚动条回到页面顶部

1.首先安装 vue-router 依赖npm install vue-router2.在 main.js 文件中，引入 router，挂载到根节点上import router from './router'new Vue({ router, store, render: h => h(Febs)}).$mount('#app')3.如何在 router 文件中做路由拦截呢？const whiteList = ['/login'] // 定义白名单//

2020-08-27 23:19:56 1209

原创解决 Vue 重复点击相同路由，出现 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation 问题

问题描述：重复点击导航时，控制台出现报错，虽然不影响功能使用，但也不能视而不见。解决方案：方案一：只需在 router 文件夹下，添加如下代码：// src/router/index.jsVue.use(Router)const router = new Router({ routes})constVueRouterPush=Router.prototype.pushRouter.prototype.push=functionpush(to){retur...

2020-08-27 22:30:35 48436 19

转载 error: Type of the default value for ‘tableData‘ prop must be a function

在写 vue 组件的 props 时，像下面设置默认值，就会出现 eslint 语法报错：error: Type of the default value for ‘tableData‘ prop must be a function（tableData 属性的默认值必须是函数）。props:{ tableData:{ type:Array, default: [], }},如何修改呢？Use Array/Object in props as default va...

2020-08-24 22:51:37 1339

原创 vue项目中，scss 使用 /deep/ 穿透写法

当<style>标签有scoped属性时，它的 CSS 只作用于当前组件中的元素。这类似于 Shadow DOM 中的样式封装。它通过使用 PostCSS 来实现以下转换：<template> <div class="example" data-v-f3f3eg9>hi</div></template><style>.example[data-v-f3f3eg9] { color: red;}</...

2020-08-20 22:30:16 53238

原创 vue-cli-service build 如何环境设置，打出不同环境的包

使用 vue-cli-service 打包项目，通过配置不同的指令，给项目设置不同的配置，达到使用指令打出不一样的包，避免来回切换环境配置信息。运行 npm run serve 时，会把 process.env.NODE_ENV 设置为 'development';运行 npm run build 时，会把 process.env.NODE_ENV 设置为 'production';"scripts": { "serve": "vue-cli-service serve", "buil

2020-08-13 22:29:27 12799 2

转载 export default {} 和 new Vue() 的区别

一、export default1.export default：相当于提供了一个接口给外部使用，其他文件通过 import 引入使用。export default { name: 'List', data () { return { list: [] } }}export default new VueRouter({ routes: [ { path: '/', component: () => impor

2020-08-11 23:07:30 952

原创 JS 如何模块化接口以及模块化的好处

说到 new 我们可能想起 new Object()、new 一个 class 实例、newDate()、newPromise()、newSet()、newFormData()、newError() 等，都是我们非常的熟悉，也是常用的。首先我们将一个模块的接口封装在一个模块中，注意这里直接导出 class 实例，代码如下：// src/api/enquiry/enquiryManage.jsimport axios from '../request'const URL = {...

2020-08-10 23:31:16 633

原创小程序请求封装和拦截器以及接口模块化

通常我们使用 axios 库中的 API 设置常用配置以及请求方法封装。更多详情，请查看：axios 常用配置以及请求方法封装。小程序中使用 wx.request API 进行网络请求数据，但是小程序中未对请求提供拦截 API。在 Taro 框架中，我们可以看的Taro.addInterceptor(callback) API可以使用拦截器在请求发出前或发出后做一些额外操作。这里的提供的拦截器：请求拦截和响应拦截是没有区分的。一、请求封装wx.request 参数说明：属性类型 ...

2020-08-10 23:21:49 4372

原创谈谈 process.env.NODE_ENV

问题描述：项目环境一般会分为开发（dev）、测试（test）、生产（prod）三个环境。三个环境的接口中的 baseURL 地址都会有所区分，当我们将项目打包上线时，这是需要切换baseURL 地址，例如：export const config = { base_url: 'https://xcx.upal.cn/' // 上线服务器 base_url: 'http://140.143.134.216:8888/' //测试服务器}我们可以配置 package.json 中的脚本，设置.

2020-08-09 19:16:27 4993

转载 element-ui select 组件上拉加载更多数据

在 element-ui 官网中，并没有提供 select 组件下拉滚动滚动条加载更多数据的事件，可以我们想到在数据的底部添加一个点击事件来加载更多数据，但是交互就没有那么友好了。设置高度，当超过一个高度在加载一页数据，即实现加载更多数据。// 针对 el-select 下拉框定义的一个分页指令：滚动到底部执行加载下一页const selectLoadMore = Vue.directive('selectLoadMore',{ bind (el, binding) { // 获取e

2020-08-02 23:40:08 3409 4

原创 Vue 调用父子组件事件

一、父组件中调用子组件事件父组件中引入子组件<user-edit ref="userEdit" @close="handleUserEditClose" @success="handleUserEditSuccess" :userEditVisiable="userEdit.visiable"/>父组件如何调用子组件中的方法呢?edit (record) { this.$refs.userEdit.setFormValues(record) // 调用子

2020-08-02 23:07:07 1634

转载 JS 判断一个对象是否为空对象

1.使用 JSON.stringify 将对象转化为字符串，再判断该字符串是否为"{}"var data = {};var b = (JSON.stringify(data) == "{}");alert(b);// true2.for in 遍历属性进行判断var obj = {};var b = function() { for(var key in obj) { return false; } return true;}console.log(b());/

2020-08-02 18:24:17 176