Delete `␍` prettier/prettier Vue 可悬浮按钮

Delete `␍` prettier/prettier

代码格式化不一致，换行符冲突。UNIX/Linux 使用的是 0x0A（LF）， DOS/Windows 一直使用 0x0D0A（CRLF） 作为换行符，git 默认配置了 autocrlf 为true，默认所有代码都会被提交成了crlf，或者开发者自己配置的autocrlf配置不一致。

修改git全局配置，禁止git自动将lf转换成crlf（提交检出均不转换）

git config --global core.autocrlf false

或者

git提交的时候，文件中的换行符必须是LF，如果不是不能提交。

# 提交时转换为LF，检出时不转换
git config --global core.autocrlf input

# 拒绝提交包含混合换行符的文件
git config --global core.safecrlf true

删除对象属性（比delete强，不会改变引用地址）

Object.keys(state).forEach((key) => {
  Reflect.deleteProperty(state, key);
});

将 stylus 转换成 scss

安装插件，插件github地址

npm install -g stylus-converter

文件目录处执行，指定输入输出文件名称

stylus-conver -i source.styl -o target.scss

文件目录父级执行，指定输入输出文件夹名称

stylus-conver -d yes -i source-path -o target-path

滚动时控制 CSS渐变

可人为控制 ：屏幕慢慢滚动并在此过程中任意停留，在任意停留点中你可以看到当前渐变程度和效果，并且在你停留的这个点，渐变效果不会发生改变，当再次滚动时渐变程度才会有所变化。

原理：通过监听滚动的 scrollTop 值，在不同的 scrollTop值范围中，给元素对应设置不同的 opacity。opacity会导致子元素也不可见，可以定位两个同级的元素，下面的当背景显示渐变效果，上面的显示文字或 其他同事配合渐变效果。

不可控的：当页面滚动到某个值时就触发样式变化，就算停下滚动，也会自动渐变完整个效果。

原理：当页面滚动到某个值，就设置新的样式，并且通过transition做过度处理。

// 控制opacity z-index
const boxScroll = (e) => {
  const top = e.target.scrollTop;
  if (top === 0) {
    targetEl.value.style["z-index"] = 0;
    targetEl.value.style["opacity"] = 0;
  }
  if (top > 0 && top < 360) {
    targetEl.value.style["z-index"] = 20;
    targetEl.value.style["opacity"] = Number(top / 360).toFixed(2);
    boxLive.value.style["opacity"] = 1 - Number(top / 360).toFixed(2);
  }
  if (top >= 360) {
    targetEl.value.style["opacity"] = 1;
  }
};

onscroll 事件无作用

height: 100vh;
overflow: auto;

可移动悬浮按钮

<template>
  <div
    class="fixed right-0 bottom-0 w-[3rem] h-[2rem]"
    v-show="state.float"
    @click="floatClick"
    @touchstart="touchstart"
    @touchmove.prevent="touchmove"
    @touchend="touchend"
    ref="floatBtn"
  >
    <img class="w-full h-full" src="../../../assets/images/search.png" alt="" />
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";

const floatBtn = ref(null);
const state = reactive({
  float: true,
  flags: false,
  position: {
    x: 0,
    y: 0,
  },
  nx: "",
  ny: "",
  dx: "",
  dy: "",
  xPum: "",
  yPum: "",
});

const touchstart = (event) => {
  console.log("移动中", event);
  // floatBtn.value.style.transition = "none";
  state.flags = true;
  let touch;
  if (event.touches) touch = event.touches[0];
  else touch = event;
  state.position.x = touch.clientX;
  state.position.y = touch.clientY;
  state.dx = floatBtn.value.offsetLeft;
  state.dy = floatBtn.value.offsetTop;
};
const touchmove = (event) => {
  console.log("移动中", event);
  if (state.flags) {
    let touch;
    if (event.touches) touch = event.touches[0];
    else touch = event;
    state.nx = touch.clientX - state.position.x;
    state.ny = touch.clientY - state.position.y;
    state.xPum = state.dx + state.nx;
    state.yPum = state.dy + state.ny;
    //屏幕宽度减去⾃⾝控件宽度
    let width = window.innerWidth - floatBtn.value.offsetWidth;
    //屏幕⾼度减去⾃⾝控件⾼度
    let height = window.innerHeight - floatBtn.value.offsetHeight;
    state.xPum < 0 && (state.xPum = 0);
    state.yPum < 0 && (state.yPum = 0);
    state.xPum > width && (state.xPum = width);
    state.yPum > height && (state.yPum = height);
    floatBtn.value.style.left = state.xPum + "px";
    floatBtn.value.style.top = state.yPum + "px";
  }
};
const touchend = (event) => {
  state.flags = false;
  // floatBtn.value.style.transition = "all 0.3s";
};
</script>