# w3af_gui

内容来源于@什么值得买APP，观点仅代表作者本人 ｜作者：突突兔too秃

老婆做进出口的，前一段发了一个知识贴给我，以为是要打印，搞了半天是因为网页不让复制，所以分享给我。

这可笑坏我了，还有什么方法能突破“禁止复制”禁术，当然唯我漩涡鸣人的影分身之术了。看我如何活学活用，复制粘贴。

途径一：自抱自泣

方法1：发送给自己

实际上，我觉得老婆大人的方法是最实际的了。这绝不仅仅是出于对老婆大人的尊重，而是实事求是。不让复制就不复制呗。我也就平时存起来备查。当然，如果实在找不到人分享，那就分享给“文件传输助手”吧。

有一种孤独叫智能发给穿书助手

同样的寂寞（划掉）方法，我们也可以通过QQ把地址分享给“我的Android手机”。

方法1.2：收藏备查

比方法1稍微高级一点的是，将有关内容在微信中打开后，选择“收藏”，这样以后就可以直接在我的“收藏”中找到了。

当然，以上方法还只是迂回作战，说白了禁术还在，只是找了个方法替代。真的如果需要复制的时候就白瞎了。

途径二：生拉硬拽

方法2：直接拖拽到聊天框。

使用Chrome浏览器或者360浏览器，然后直接选择部分文字，鼠标按住左键，就可以把文字拖拽到QQ对话框了。

step1

step2

方法3:360浏览器右键复制。

同样是在360浏览器上面，鼠标选择要复制的文字，然后右击鼠标，选择保存为文本。

step1

再选择一个文件夹保存。

step2

打开指定文件夹中的TXT文档，就能得到相应的文字了。

如果要评论这种生拉硬拽的方法，那就是霸气。

当然，也有不足，每一次都要这么拖拽，鼠标手是跑不掉的了。而且并没有办法一次性全部选择。

途径三：图文识别

方法4：QQ截图文字识别。

step1：使用QQ对话框的截图工具。

step2：然后右击图片，选择提取图中文字。

step3：点击下载。

step4：就可以在指定文件夹中找到picture和result两个文件。马上就能下载了。

当然，这个和方法3一样，不能全选，需要反复的复制粘贴。

方法5：使用传图识字小程序。

使用手机自带功能进行滚动截屏后，再打开微信小程序“传图识字”，然后进行orc识字，就可以复制了。

step1：我的手机是华为的，使用指关节写一个“S”，就可以滚动截屏。

step2：然后进入传图识字后，点击“从相册中选取”。

step3：点击全选，然后复制，就可以在对话框中张贴了。

不过需要注意的是，过长的图片也可能出现识别失败。像这次，我就只选择了一半。而orc识别最大的问题，还是准确性。只能安慰自己就当是检查作业，外加复习了呗。

途径4：曲径通幽。

方法6：使用edge阅读模式。

step1：使用手机edge，然后在网址中点击阅读模式；

step2：选择“全选”-“复制”；

step3：再粘贴到备忘录中。

同样的方式，也可以在UC上使用。

方法7：直接使用夸克打开网页。

比起edge和UC还要使用阅读模式，夸克直接跳过了第一步。

难怪这款手机App会受到大家的喜欢。

途径5：极客逍遥。

方法8：Chrome浏览器检查选项。

在谷歌浏览器上打开网页，点击“F12”，又或者在网页上点击右键，选择“检查”。

然后再选择“setting”或者直接按“F1”，然后找到debugger-disable Javascript，勾选，就可以复制粘贴了。

不过，记得用完取消勾选disable-Javascript，需要的时候才开启。

总结一下，其实无非就是三种方法，一种是听之任之，一种是使用其他工具进行orc识别，最后一种就是破坏网页的规则。以上的方法大部分也是小白级别，还没涉及到油猴脚本等等。但是贵在实用，平时有文案撰写、论文写作等需求的值友欢迎收藏，毕竟用的时候才能记得住。

言

Zag 和 PandaCSS 都是出自 chakra 团队之手，Zag 聚焦于处理组件的逻辑，而 PandaCSS 聚焦于通过 ts 来维护样式，将两者进行搭配会有怎么样的使用体验呢？这篇文章将继续以 vuesax 中 checkbox 组件的样式作为参考，结合 Zag 和 PandaCSS 进行 vue3 版本的重构，实现一个超丝滑的勾选框组件。

使用 Zag 实现核心逻辑

Zag 中将 Checkbox 分为三个组成部分：

• root：根元素，用于包裹内部元素
• control: 控制器
• label: 标签内容

我们首先在 Zag Checkbox 文档中复制 JSX 的实例代码：

import * as checkbox from "@zag-js/checkbox"
import { normalizeProps, useMachine } from "@zag-js/vue"
import { defineComponent, h, Fragment, computed } from "vue"

export default defineComponent({
  name: "Checkbox",
  setup() {
    const [state, send]=useMachine(checkbox.machine({ id: "checkbox" }))

    const apiRef=computed(()=>
      checkbox.connect(state.value, send, normalizeProps),
    )

    return ()=> {
      const api=apiRef.value
      return (
        <label {...api.rootProps}>
          <span {...api.labelProps}>
            Input is {api.isChecked ? "checked" : "unchecked"}
          </span>
          <div {...api.controlProps} />
          <input {...api.hiddenInputProps} />
        </label>
      )
    }
  },
})

这段代码使用了 useMachine 函数创建了一个状态机，并且写了一个无样式的基础 checkbox 结构：

接下来我们为 checkbox 组件补充样式.

实现打勾动画图标

想要实现丝滑的勾选框效果，最直观的是打勾的动画。这个效果可以通过 SVG 或者纯 css 实现，这里我使用的是 css 来实现的。：

首先我们要想想如何实现一个勾勾的效果，??由一长一短两个斜边组成，那么我们只需要放置一个矩形，设置一定的旋转角度，并设置其中的两个边框，就能实现一个??的形状：

代码实现如下：

import { defineComponent } from "vue";

import { css, cx } from "@/styled-system/css";

const IconCheck=defineComponent({
  props: {
    color: {
      type: String,
      default: css({ colorPalette: "gray" }),
    },
    size: {
      type: String,
      default: css({ colorPalette: "gray" }),
    },
    customCSS: {
      type: String,
    },
  },
  setup(props) {
    return ()=> (
      <i
        class={cx(
          css({
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
          }),
          props.customCSS,
        )}
      >
        <div
          class={css({
            position: "relative",
            width: "80%",
            height: "40%",
            transform: "rotate(-45deg)",
          })}
        >
          <div
            class={css({
              position: "absolute",
              left: "0",
              width: "full",
              height: "full",
              borderLeft: "2px solid white",
              animation: "checkShort 0.15s",
            })}
          />
          <div
            class={css({
              position: "absolute",
              left: "0",
              width: "full",
              height: "full",
              borderBottom: "2px solid white",
              animation: "checkLong 0.5s",
            })}
          />
        </div>
      </i>
    );
  },
});

export default IconCheck;

上面这段代码中，定义了一个矩形，宽高分别为最外层容器的 80% 和 40%，transform: "rotate(-45deg)", 则设置了矩形的旋转角度，内部放置两个与矩形宽高一致的容器，分别设置 borderLeft 和 borderBottom ，这样就组成了一长一短两条线。

这里之所以需要在内部放两个容器单独设置边框，而不是直接在矩形设置边框，是为了更好的实现动画效果，长短边分别设置了两个持续时间不同的动画 checkShort 0.15s 和 checkLong 0.5s：

checkShort: {
  "0%": {
    height:0,
  },
  "100%":{
    height: "full",
  }
},
checkLong: {
  "0%": {
    width: 0,
  },
  "30%":{
    width: 0,
  },
  "100%": {
    width: "full",
  }
}

短边从最开始就执行动画，持续时间为长边动画的 30%，长边则在 0-30% 时不执行，30% 之后开始执行，这样就能实现短边动画执行完成后，长边动画再执行的效果。

之所以不使用 animation-delay 去延迟执行长边动画，是因为这种方式会导致动画延迟执行前，长边会先展示出来，效果就不对了。如果要使用这种方式还得单独做一些动画延迟前的隐藏处理，会比较麻烦：

实现 Hover 效果

为了让用户更容易感知勾选框是可以交互的，我们为勾选框增加未勾选和关状态的 hover 效果。

未勾选状态

未勾选状态的 hover 效果，默认只有灰色边框，鼠标悬浮后变为灰色背景：

这里有个注意点，我们鼠标悬浮在勾选框的最外层，也可以触发内层的 hover 样式，如果直接使用 hover 效果是没法做到的，这样只能鼠标悬浮在边框内才能触发。

如果我们没有使用任何样式库，实现这个效果可以通过维护一个 鼠标是否 hover 的状态，并通过 onMouseEnter 和 onMouseLeave 来更新这个状态，再在内层根据这个状态动态渲染样式。

但这里我们可以使用 pandaCSS 的 group 选择器来实现。

首先在勾选框最外层元素增加 group 类名：

<label
  {...api.rootProps}
  class={[
    css({
      display: "flex",
      alignItems: "center",
      cursor: "pointer",
    }),
+    "group",
  ]}
>

然后在内层的 control 元素增加基础样式：

<div
    {...api.controlProps}
    class={css({
      width: "24px",
      height: "24px",
      borderRadius: "8px",
      border: api.isChecked
        ? "none"
        : "token(colors.gray.200) solid 2px",
      transition: "all 0.3s",
      marginRight: "4px",
      flexShrink: "0",
      _groupHover: {
        background: "gray.200",
      },
    })}
  >
  // ...
  </div>

这里的 _groupHover 即为 group 选择器，当带有 group 类名的元素触发 hover 时，内部的元素都可以使用 _groupHover 设置特定样式。这样我们就实现了前文图中的效果。

勾选状态

在勾选时，会有一个蓝色色块放大渐出的效果，我们先来实现这个样式。

<Transition
  enterFromClass={css({
    transition: "all 0.2s",
    transform: "scale(0.5)",
    opacity: "0",
  })}
  enterToClass={css({
    transition: "all 0.2s",
    transform: "scale(1)",
    opacity: "1",
  })}
  leaveToClass={css({
    transition: "all 0.2s",
    transform: "scale(0.5)",
    opacity: "0",
  })}
>
  {api.isChecked && (
    <div
      class={cx(
        props.color,
        css({
          width: "full",
          height: "full",
          background: "colorPalette.600",
          borderRadius: "inherit",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          transition: "all 0.3s",
        }),
      )}
    >
      <IconCheck
        customCSS={css({
          width: "18px",
          height: "18px",
        })}
      />
    </div>
  )}
</Transition>

这里我们使用 vue 中的 Transition 组件来实现动画效果，通过改变scale 和 opacity 实现元素大小和透明度的过渡动画，内部包裹着勾选的图标。

实现了勾选的效果，继续实现勾选后的 hover 样式。勾选后在 hover 时，勾选框的外层有一个与主题色相同的外层阴影效果：

这里我们依然使用 group 选择器来设置 hover 样式：

<div
  class={cx(
    props.color,
    css({
      width: "full",
      height: "full",
      background: "colorPalette.600",
      borderRadius: "inherit",
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      transition: "all 0.3s",
+      _groupHover: {
+        boxShadow:
+          "0px 3px 15px 0px color-mix(in srgb, token(colors.colorPalette.600) 40%, transparent)",
+      },
    }),
  )}
>
  <IconCheck
    customCSS={css({
      width: "18px",
      height: "18px",
    })}
  ></IconCheck>
</div>

在阴影效果的代码中 0px 3px 15px 0px color-mix(in srgb, token(colors.colorPalette.600) 40%, transparent) ，前面几个设置阴影大小的参数很容易理解，但是后面阴影颜色的实现大家可能比较陌生，单独解释一下：

• token(colors.colorPalette.600)：token 是 pandaCSS 中提供的一种 token 使用方法，用于在 border，boxSahdow 这种组合多个参数的样式中引用 token 值。相关文档：panda-css.com/docs/themin…
• color-mix() : color-mix 则是原生 css 的函数，用于接收两个颜色值，并返回在指定色彩模式、以指定比例混合后的颜色。相关文档：developer.mozilla.org/zh-CN/docs/…

我这里用法的含义是在 srgb 的色彩模式下，将主题色(token(colors.colorPalette.600)) 与透明色(transparent)，以 40% 的比例进行混合，最终合成的颜色就是 40% 透明度的主题色。 color-mix() 函数是 pandaCSS 中推荐用户用于为内置颜色设置透明度的方法，除此以外并没有发现其他更简便的方式。

完成双向绑定

最后我们完善一下勾选框的双向绑定逻辑逻辑，

• 通过 Zag 中的 onCheckedChange 配合 emit 可以实现 Zag 内部状态向外传递
• 通过监听 propmodelValue 的改变，执行 apiRef.value.setChecked 可以实现外部状态向 Zag 内传递

实现的代码如下：

const [state, send]=useMachine(
  checkbox.machine({
    id: useId("checkbox"),
    onCheckedChange(detail) {
      emit("update:modelValue", detail.checked);
    },
  }),
);

const apiRef=computed(()=>
  checkbox.connect(state.value, send, normalizeProps),
);

watch(
  ()=> props.modelValue,
  ()=> {
    apiRef.value.setChecked(props.modelValue);
  },
);

? 使用 Vue+Zag+PandaCSS 实现一个超丝滑的勾选框组件
原文链接：https://juejin.cn/post/7295954109404463155