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>

巴特西

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