零碎知识，持续积累

搞个锤子哟
143 阅读2分钟
  • encodeURIComponent（url） 将其中的某些字符用十六进制的转义序列进行替换
  • //微信公众号授权跳转时好用redirect_uri=https%3A%2F%2Fchong.qq.com%2Fp
  • URL.createObjectURL(file) 把二进制文件转化成url 放src里可以展示，缺点是没有文件名
  • !!+localStorage.getItem('sidebarStatus') 把存储的1 0 转成true/false

scss使用

scss文件 导出代码块
@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

vue导入scss代码块
<style lang="scss" scoped>
@import '~@/styles/mixin.scss';//~会去webpack配置alias里找匹配路径

.app-wrapper {
  @include clearfix;
  position: relative;
  height: 100%;
  width: 100%;
  &.mobile.openSidebar {
    position: fixed;
    top: 0;
  }
}

@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { 
  @include sexy-border(blue, 1in); 
}

*** 关键词参数    关键词参数可以打乱顺序使用
 p {
  @include sexy-border($color:blue);
 }

**给参数设置默认值**

@mixin sexy-border($color, $width: 1in) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); }
————————————————
版权声明：本文为CSDN博主「IT利刃出鞘」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/feiying0canglang/article/details/125937808

$right:right; 
.test2{ 
    border-#{$right}:1px solid #000; 
}

-当一个组件需要同时引入多个组件时 可以写个js文件

/components/index.js
export { default as Navbar } from './Navbar'
export { default as Sidebar } from './Sidebar'
export { default as AppMain } from './AppMain'

在需要引入的组件内 即可
import { Navbar, Sidebar, AppMain } from '/components'

scss里的变量放在js里用

.scss
:export {
  menuText: $menuText;
  menuActiveText: $menuActiveText;
  subMenuActiveText: $subMenuActiveText;
  menuBg: $menuBg;
  menuHover: $menuHover;
  subMenuBg: $subMenuBg;
  subMenuHover: $subMenuHover;
  sideBarWidth: $sideBarWidth;
}

.vue
import variables from '@/styles/variables.scss'
variables.menuActiveText

利用v-bind 会使绑定的对象属性拆开一个个绑到dom上，再配合is 动态构建跳转体

  <component :is="type" v-bind="linkProps(to)">
    <slot />
  </component>
  
    computed: {
        type() {
            if (this.isExternal) {
                return 'a'
            }
            return 'router-link'
        }
    },
    methods: {
        linkProps(to) {
        //针对a标签
            if (this.isExternal) {
                return {
                    href: to,
                    target: '_blank',
                    rel: 'noopener'
                }
            }
         //针对router-link标签
            return {
                to: to
            }
        }
    }
  

利用逻辑运算的截断作用，第二个为true时 返回第二个的值
<item :icon="item.meta && item.meta.icon"/>

把字符串变成数字，最方便的方法是 +str

this.$route.name + +new Date()
1.578.toFixed(3)
'1.578'
+1.578.toFixed(2)
1.58

//-------------------以下很多摘自 花裤衩 手摸手，带你用vue撸后台 系列--------------------

我们利用taobao源 registry.npm.taobao.org 进行加速, 并且将一些常见的npm依赖打入了基础镜像，避免每次都需要重新下载。 这里注意下 建议不要使用cnpm install或者update 它的包都是一个link，反正会有各种诡异的bug，这里建议这样使用

npm install --registry=https://registry.npm.taobao.org
把多个页面都要用的ajax请求 放到vuex的getter里，这样页面要用时 store.dispatch('函数名'，参数) 即可

动态路由处理

let route={path:'',name:''}
let component = "@/views/product/index"
var path = component.replace(/^@\/views/, '')//'/product/index'
              // 闭包+立即执行  防止path因为懒加载 只显示最后的值
              // import 引入组件 不支持路径是变量 只能用require
route.component = (path => {
                return (resolve) => {
                 // require 虽然支持变量 但必须有一个根问价夹
                  require([`@/views${path}`], resolve)
                }
              })(path)
routes.push(router)

补充：
require 
第一个参数：定义require中的依赖，参数必须是数组形式，即使只有一个依赖，也必须使用数组形式传参。

第二个参数：是一个回调函数，用来处理加载完毕后的逻辑，当所有模块加载完成后触发

第三个参数：也是一个回调函数，用来处理模块加载失败后的情况。

懒加载：//两种写法
component: resolve => require(['@/view/index.vue'], resolve)
component: () => import('./views/UserDetails')
------
普通加载
import Home from '@/view/home/index.vue'
component: Home

对vue2而言 数组的响应式更新

我们想改变table中第一条数据的值，通过`this.list[0]=newValue`这样是不会生效的。
解决方案：  list.splice(indexOfItem, 1, newValue)

arr1.concat(arr2) 并不会改变arr1 只是把拼接结果返回

数组/对象 整体赋值 可以触发响应式更新

在请求获取数据后 修整完毕 整体赋值给data里的对象

表格修改数据 防止弹框与表格数据一起变动

对象：this.modifyObj={...tableRow}  或者 =Object.assign({}, row)
数组：this.modifyArry=[...arr]      或者 =arr.slice()

使用第三方组件 @click没触发 注意 .native 修饰符。
使用element一个诀窍 大部分诡异的问题都可以通过加一个key或者 Vue.nextTick来解决

花裤衩：使用 npm 安装 Tinymce 方法比较负责复杂而且还有一些问题，直接components一个组件 引入 //如果需求方能接受 markdown 就一定要用 markdown，坑真心会比富文本少很多

GitHub - showdownjs/showdown: A bidirectional Markdown to HTML to Markdown converter written in Javascript 完成了markdown to html

import('showdown').then(showdown => { //用了 Dynamic import 
const converter = new showdown.Converter();//初始化 this.html = converter.makeHtml(this.content)//转化 })

ECharts还是不小的，我们大部分情况只是用到很少一部分功能，花裤衩平时习惯于按需引入的。

// 引入 ECharts 主模块 
var echarts = require('echarts/lib/echarts'); 
// 引入柱状图 
require('echarts/lib/chart/bar'); 
// 引入提示框和标题组件 
require('echarts/lib/component/tooltip'); 
require('echarts/lib/component/title');

创建/编辑 其实用的是一个页面，这种情况可以通过下面这种方式
多路由复用了一个component 可通过meta的方式来判断调取不同的接口。 image.png

computed: {
  isEdit() {
    return this.$route.meta.isEdit // 根据meta判断
    // return this.$route.path.indexOf('edit') !== -1 // 根据路由判断
  }
}，
created() {
  if (this.isEdit) { 
    this.fetchData();
  }
},

对于封装后暴露出来的axios请求，使用时baseURL这些已经统一配置过的属性可以重写覆盖

export function getInfo(token) { 
return fetch(
{ baseURL: https://api2-xxxx.com,
url: '/user/info', 
method: 'get', 
params: { token } 
}); }

//------直接引用花裤衩原话-------------
webpack-chain 的书写也是有些门槛的 。当你想知道自己的 vue-config.js 里的配置到底对不对的时候，你可以在命令行里执行vue inspect > output.js,它会将你最终生成的config展现在output.js之中，不过它默认显示的是开发环境的配置。如果你想查看其它环境的配置可以通过vue inspect --mode production > output.js。在写构建配置的时候这个功能很有帮助，同时也能帮助你了解vue-cli在构建时到底帮你做了些什么。

我一般在开发环境是不使用路由懒加载的，因为这样会导致热更新速度变慢，具体的可以看之前的 文章，在vue-cli@3中可以更简单的实现，你只要在.env.development环境变量配置文件中设置VUE_CLI_BABEL_TRANSPILE_MODULES:true就可以了。

路由重置

const createRouter = () => new Router({
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

const router = createRouter()

export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

export default router

所有的 vue-router 注册的路由信息都是存放在matcher之中的，所以当我们想清空路由的时候，我们只要新建一个空的Router实例，将它的matcher重新赋值给我们之前定义的路由就可以了。巧妙的实现了动态路由的清除。

MOCK 看花裤衩手摸手，带你用vue撸后台 系列五(v4.0新版本) - 掘金 (juejin.cn)

有兴趣的可以自己看一下代码 mock-server.js。由于是一个真正的server，所以你可以通过控制台中的network，清楚的知道接口返回的数据结构。并且同时解决了之前mockjs会重写 XMLHttpRequest对象，导致很多第三方库失效的问题。

//错误
await a()
await b()
//这样变成了 a().then(() => b() )
// a 好了才会执行 b
done()

//正确
await Promise.all([a(), b()])
done()

image.png

对第三方组件进行二次封装时注意

我们的这个组件只是基于el-select做了一些业务的封装，比如添加了默认的placeholder，封装了远程 ajax 搜索请求等等，总的来说它就是一个中间人组件，只负责传递数据而已。

这时候我们就可以使用v-bind="$attrs"：传递所有属性、v-on="$listeners"传递所有方法。
//二次封装的组件 给组件绑定的属性 事件 全都转手塞给el-select 不用考虑子组件设计时prop该收录哪些属性的问题，啥都能传进来用上 image.png

computed妙用//全局通用的数据

set 和 get 你也可以把它当做一个 watch的升级版。它可以监听数据的变化，当发生变化时，做一些额外的操作。最经典的用法就是v-model上绑定一个 vuex 值的时候，input 发生变化时，通过 commit更新存在 vuex 里面的值。

image.png
数据量大导致卡时 freeze一下
this.item = Object.freeze(Object.assign({}, this.item))

avatar
文章
阅读
粉丝