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>