零碎知识3vue项目中复用scss 时的使用模式//<el-scrollbar>

vue项目中复用scss 时的使用模式//<el-scrollbar>

styles文件夹

variable.scss

$menuText: #333333;
$menuActiveText: #43a8ff;
$menuBg: #ffffff;
$menuHover: #e9f4fe;

:export {
  menuText: $menuText;
  menuActiveText: $menuActiveText;
  menuBg: $menuBg;
  menuHover: $menuHover;
}

mixin.scss

@mixin scroll-bar-config($barWidth, $bgColor, $radius: 4px) {
  :deep(.el-scrollbar__wrap) {
    // 隐藏水平滚动
    overflow-x: hidden;
  }
  :deep(.is-vertical) {
    width: $barWidth;
    border-radius: $radius; //滚动条继承父radius
    .el-scrollbar__thumb {
      background-color: $bgColor;
    }
  }
}

webpack配置全局注入

module.exports = {
...
  chainWebpack: (config) => {
    const oneOfsMap = config.module.rule("scss").oneOfs.store;
    oneOfsMap.forEach(item => {
      item
        .use("sass-resources-loader")
        .loader("sass-resources-loader")
        .options({
          // 这里的路径不能使用 @ 符号，否则会报错 需全局注入多个文件时用数组
          resources: ["./src/styles/variables.scss", "./src/styles/scrollBar.scss"]
        })
        .end()
    })
  }

引入的页面

.list{
    height: calc(100% - 30px);
    @include scroll-bar-config(4px, #c2d659);
    }
 //如果没用webpack全局注入  需要先引入才能用
 <style lang="scss" scoped>
   @import '~@/styles/scrollBar.scss';

配合element页面滚动插件自主改造

<el-scrollbar class="list" v-loading="isLoading">

</el-scrollbar>

Mockjs注意事项

使用mock拦截axios请求针对不同的baseURL 拦截细节不一样

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 9000
})

.env.development

# just a flag
ENV = 'development'

# base api
VUE_APP_BASE_API = '/dev-api'

baseURL是 /dev-api 这种时 npm run不同模式配合path.resolve控制拦截路径

src/mock/index.js

import Mock from 'mockjs'
import path from 'path'

// 由于development production 不同模式下的baseurl不一样，需要这么拼接相对路径。
//如果baseurl是http://...这种  无法被拦截
function calcPath(val) {
  return path.resolve(process.env.VUE_APP_BASE_API, val)
}
//dev-api
Mock.mock(calcPath('login'), {
  status: 200,
  message: 'success',
  data: {
    total: 100,
    'rows|10': [{
      id: '@guid',
      name: '@cname',
      'age|20-30': 23,
    }]
  }
});

baseURl是http://baibai 这种形式需要手动拼接完整路径才能拦截只写/login是拦不住的

.env.development
VUE_APP_BASE_API = 'http://baibai'

.vue
let path = process.env.VUE_APP_BASE_API
Mock.mock(path + '/login', {
  status: 200,
  message: 'success',
  data: {
    total: 100,
    'rows|10': [{
      id: '@guid',
      name: '@cname',
      'age|20-30': 23,
    }]
  }
});

兼容两者的方案(通过正则匹配路由) 推荐！！！

Mock.mock(/\/login/, {
 status: 200,
 message: 'success',
 data: {
   total: 100,
   'rows|10': [{
     id: '@guid',
     name: '@cname',
     'age|20-30': 23,
     'job|1': ['前端工程师', '后端工程师', 'UI工程师', '需求工程师']
   }]
 }
});

正则的特别用法

菜鸟教程 typescript 摘录

原始值字符串，如 "John", 没有属性和方法(因为他们不是对象)。
原始值可以使用 JavaScript 的属性和方法，因为 JavaScript 在执行方法和属性时可以把原始值当作对象。

var num = 454564654521
num.toLocaleString()
'454,564,654,521'

var re = /(\w+)\s(\w+)/; 
var str = "zara ali"; 
var newstr = str.replace(re, "$2, $1"); 
console.log(newstr); // ali, zara

echarts摘录

vue-router多级的坑

<template>
  <div style="padding:30px;">
    <el-alert :closable="false" title="menu 1">
      <router-view />
    </el-alert>
  </div>
</template>

 {
        path: 'menu1',
        component: () => import('@/views/nested/menu1/index'), // Parent router-view
        name: 'Menu1',
        meta: { title: 'Menu1' },
        children: [
          {
            path: 'menu1-1',
            component: () => import('@/views/nested/menu1/menu1-1'),
            name: 'Menu1-1',
            meta: { title: 'Menu1-1' }
          },
          {
            path: 'menu1-2',
            //********对应的组件里必须有 <router-view /> 后面的组件才能显示出来*********************
            //若本级只想当个跳板，为了第三级多个孙子挂载，那么本级内仅含<router-view />即可 不可以不写component
            component: () => import('@/views/nested/menu1/menu1-2'),
            name: 'Menu1-2',
            meta: { title: 'Menu1-2' },
            children: [
              {
                path: 'menu1-2-1',
                component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
                name: 'Menu1-2-1',
                meta: { title: 'Menu1-2-1' }
              },

潘佳辰后台管理，展示区域

通过overflow:hidden防止内部盒子margin-top导致嵌套崩塌
设置min-height使得内容多时可以滚动而且是body滚动
由于侧边栏是fixed定位，滚动时左侧固定

    min-height: calc(100vh - 50px);
    width: 100%;
    position: relative;
    overflow: hidden;
    background-color: #f0f2f5;