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

2022-05-28 02:31:18 阅读：240 来源： 互联网

标签：style Vue floatBtn value state prettier touch event Delete

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>

标签：style,Vue,floatBtn,value,state,prettier,touch,event,Delete
来源： https://www.cnblogs.com/jiayouba/p/15887424.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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