零碎知识9

搞个锤子哟
129 阅读5分钟

linear-gradient()

  • 用于创建一个表示两种或多种颜色线性渐变的图片 是一种特别的image数据类型
  • background-image:linear-gradient(red 10%, 30%, blue 90%);
  • 从一个颜色的终止点平滑的过渡到另一个颜色的终止点，颜色之间的中点是两个颜色转换的中点。
  • linear-gradient(red 0%, yellow 50%, blue 100%);
    • 起始是红色，在背景的50%处过渡为黄色，最终转为绿色。红色和黄色的渐变颜色中间点是距离的中点
  • 指示颜色的中转位置，不再是距离的中间点为颜色过渡的中间点
    • linear-gradient(red 10%, 30%, blue 90%);//距离 30%到90% 对应颜色过渡的50%到100%
    • 10%之前是纯红色 90%之后是纯蓝色
    • linear-gradient(red 10%, 30%, blue 100%);//10%到底部100%都是过渡色
  • 颜色纯色区间
--语句等价
linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%);
linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%);
linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);

防抖

export function debounce(func, delay = 1000) {
  let timer
  return function (...args) {
    clearTimeout(timer)
    timer = setTimeout(() => {
      func.call(this, ...args)
    }, delay)
  }
}
--------------使用------------------------
const update = (e) => {
  text2.value = e.target.value
}
const handleInput = debounce(update, 1000)
//之后多次触发handleInput

节流

export function throttle(func, delay = 1000) {
  let timer
  return function (...args) {
    if (timer) return
    timer = setTimeout(() => {
      func.call(this, ...args)
      timer = null
    }, delay);
  }
}
-----------------------------
<button @click="trigThroto">触发节流</button>
function hahaFunc() {
  console.log('节流节流')
}
const trigThroto = throttle(hahaFunc, 1000)

func.call(this, ...args) //this指向调用返回函数的执行域。
由于定义func（节流里的hahaFunc）和使用防抖/节流函数的上下文一致（调用trigThroto的上下文），所以体会不到this的差别。 func是个壳，call的this决定了函数执行时基于的上下文
除非是vue2，被制作成防抖函数的原函数内部使用了this时，func.call的区别才能感受出来

elementUI table配合分页器使用 多选切页

  • row-key
  • reserve-selection
    <div class="list-area main">
      <div class="table">
        <el-table :data="mainList"
                  v-loading="tableLoading"
                  style="width: 100%"
                  height="calc(100vh - 357px)"
                  ref="multipleTable"
                  :row-key="getRowKeys"
                  @row-click="handleRowClick"
                  @selection-change="handleSelectionChange">
          <el-table-column type="selection"
                           reserve-selection
                           width="55">
          </el-table-column>
-------------------------------------------------------------------
    getRowKeys(row) {
      return row.id
    },
    handleSelectionChange(val) {
      this.mainSelectList = val
    },

关于时间的一点发现

  • 字符串时 不要写数字，乱七八糟，需要是'2021/05/13'
  • 时间处理建议用dayjs 原生写太累
new Date(0)
Thu Jan 01 1970 08:00:00 GMT+0800 (GMT+08:00)
new Date('0')
Sat Jan 01 2000 00:00:00 GMT+0800 (GMT+08:00)//2000年!!!!!

// 获取当前日期0点的时间戳
new Date(new Date().toLocaleDateString()).getTime()

js 字符串replace

每个首字母都大写
'fhajskdfk Ajfkdsj'.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase())

微信公众号哈希模式下授权

import router from './router'

// 微信授权后 回调的路由是乱的，捋顺后重新跳
router.beforeEach((to, from, next) => {
  let url = window.location.href
  let start = url.indexOf('#'), end = url.indexOf('?')
  if (url.includes('state=STATE') && (end < start && end > 0)) {
    let arr1 = url.split('#')
    let arr2 = arr1[0].split('?')
    let newUrl = `${arr2[0]}#${arr1[1]}&${arr2[1]}`
    window.location.href = newUrl
  }
  next()
})

vue自定义指令 反向触发事件

image.png

??

  • ??只在左侧为null或undefined时，返回右侧的值
  • || 会在左侧为假值（包括0和''）时返回右侧的值
0||1
1
0??1
0
''||1
1
''??1
''

uniapp

easycom 组件模式

  • 说明：  只要组件安装在项目的 components 目录下或 uni_modules 目录下，并符合 components/组件名称/组件名称.vue 的目录结构，就可以不用引用、注册，直接在页面中使用。

图片

mode

  • Uniapp 的 <image> 与传统 web 开发中的 <img> 相比多了一个 mode 属性，用来设置图片的裁剪、缩放模式。

  • 在开发中尽量养成每一个 <image> 都设置 mode 的习惯。可以规避掉很多 UI 显示异常的问题。

  • 一般只需要使用 widthFix、aspectFill 这两个属性即可应对绝大多数情况。

    即只需设置宽度自动撑起高度的图片用 widthFix ；需要固定尺寸设置宽高，并保持图片不被拉伸的图片用 aspectFill。

    例如：所有 icon、文章详情里、产品详情里的详情图一般会用 widthFix，用户头像、缩略图一般会用 aspectFill。

图片压缩

  • 静态图片未压缩。该问题不限于 Uniapp 开发，也包括其他开发方式。是非常常见的问题。
  • 图片压缩前后，包体大小可差距 50%甚至更多。对编译和加载速度提升显著！
  • 此处放上两个 在线压缩工具 自行取用：Tinypng、iloveimg
  • 开发一个比较大的小程序，大于10k的图片放服务器，小图转base64也没多长。小程序的包有限，2M主包寸土寸金

背景图片

uni-app 支持使用在 css 里设置背景图片，使用方式与普通 web 项目大体相同，但需要注意以下几点：

  • 支持 base64 格式图片。

  • 支持网络路径图片。

  • 小程序不支持在 css 中使用本地文件，包括本地的背景图和字体文件。需以 base64 方式方可使用。//uni支持

  • 使用本地路径背景图片需注意：

    1. 为方便开发者，在背景图片小于 40kb 时，uni-app 编译到不支持本地背景图的平台时，会自动将其转化为 base64 格式；
    2. 图片大于等于 40kb，会有性能问题，不建议使用太大的背景图，如开发者必须使用，则需自己将其转换为 base64 格式使用，或将其挪到服务器上，从网络地址引用。
    3. 本地背景图片的引用路径推荐使用以 ~@ 开头的绝对路径。
    .test2 {
	background-image: url('~@/static/logo.png');
}

滚动穿透

  • 弹窗遮罩显示时，底层页面仍可滚动。给遮罩最外层 view 增加事件 @touchmove.stop.prevent

    <view class="pop-box" @touchmove.stop.prevent></view>

uniapp 摘自 链接：juejin.cn/post/713822…

vue鼠标右键阻止默认弹窗，自定义弹窗。@click.right.prevent//@contextmenu.prevent.stop

avatar
文章
阅读
粉丝