移动端路由切换解决方案 —— 虚拟任务栈让你的 H5 像APP一样丝滑

目录

01: 前言

02: 通用组件：trigger-menu 和 trigger-menu-item 构建方案分析

03: 通用组件：构建 trigger-menu 和 trigger-menu-item 

04: 前台业务下 H5 的应用场景 

05: 通用组件：transition-router-view 构建方案分析 与 虚拟任务栈

过渡动画

组件缓存

小结

06: 通用组件：transition-router-view 构建方案之过渡动效

07: 通用组件：处理过渡动效展示样式错误的问题

08: 通用组件：虚拟任务栈处理

09: 通用组件：记录页面滚动位置

10: 总结

 

01: 前言

移动端的应用应该以什么样的形式进行展示呢？

它的展示形式如何区分浏览器端，又为什么要进行区分？

虚拟任务栈又是什么？

02: 通用组件：trigger-menu 和 trigger-menu-item 构建方案分析

 

这块内容充当了移动端中的 TabBar 的作用，我们期望把它封装成一个通用的组件。

接下来我们就需要来分析一下这个“TabBar”，我们把它叫做 trigger-menu 的构建方案。

我们期望将来 trigger-menu 可以以下面的形式进行使用：

<m-trigger-menu
  v-if="isMobileTerminal"
  class="fixed bottom-6 m-auto left-0 right-0 w-[220px]"
>
  <m-trigger-menu-item
    icon="home"
    iconClass="fill-zinc-900 dark:fill-zinc-200"
  >
    首页
  </m-trigger-menu-item>
  ……
</m-trigger-menu>

也就是说，它被分成了两个组件：trigger-menu 和 trigger-menu-item。

其中 trigger-menu 表示整个的功能区域，trigger-menu-item 表示其中的一项。

因此我们需要针对这两个组件分别进行分析：

        1. trigger-menu：对于它而言，只起到一个 包裹容器 的作用，所以我们只需要提供一个对应的插槽即可。

        2. trigger-menu-item：起到了对应的展示作用，展示包括了 icon 和 文字。所以内部应该存在 svg-icon 用来展示图片；存在一个插槽用来展示文字。

到这里，我们基本分析完成了这两个组件的构建方案，整体还是比较简单的。

03: 通用组件：构建 trigger-menu 和 trigger-menu-item 

- src/libs
- - trigger-menu
- - - index.vue
- - trigger-menu-item
- - - index.vue
// src/libs/trigger-menu/index.vue

<template>
  <div
    class="min-w-[180px] bg-white dark:bg-zinc-800 rounded-full shadow 
           flex items-center justify-between px-2 py-1"
  >
    <slot />
  </div>
</template>

<script setup></script>

// src/libs/trigger-menu-item/index.vue

<template>
  <div
    class="w-5 flex flex-col items-center justify-center col mx-0.5"
    @click="onItemClick"
  >
    <m-svg-icon
      :name="icon"
      :fillClass="iconClass"
      class="w-2 h-2"
    ></m-svg-icon>
    <p class="text-sm mt-0.5" :class="textClass">
      <slot />
    </p>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'

const props = defineProps({
  icon: {
    type: String,
    required: true
  },
  iconClass: {
    type: String
  },
  textClass: {
    type: String,
    default: 'text-zinc-900 dark:text-zinc-200'
  },
  to: {
    type: String
  }
})

const router = useRouter()
const onItemClick = () => {
  if (!props.to) {
    return
  }
  router.push(props.to)
}
</script>

<style lang="scss" scoped></style>

使用组件：

// src/views/main/index.vue

<m-trigger-menu
  v-if="isMobileTerminal"
  class="fixed bottom-6 m-auto left-0 right-0 w-[220px]"
>
  <m-trigger-menu-item
    icon="home"
    iconClass="fill-zinc-900 dark:fill-zinc-200"
  >
    首页
  </m-trigger-menu-item>
  <m-trigger-menu-item
    v-if="$store.getters.token"
    icon="vip"
    iconClass="fill-zinc-400 dark:fill-zinc-500"
    textClass="text-zinc-400 dark:text-zinc-500"
    @click="onVipClick"
  >
    VIP
  </m-trigger-menu-item>
  <m-trigger-menu-item
    icon="profile"
    iconClass="fill-zinc-400 dark:fill-zinc-500"
    textClass="text-zinc-400 dark:text-zinc-500"
    @click="onMyClick"
  >
    {{ $store.getters.token ? '我的' : '登录' }}
  </m-trigger-menu-item>
</m-trigger-menu>

04: 前台业务下 H5 的应用场景 

通常情况下，我们说起移动端项目指的一般是两种：

        1. 原生 APP

        2. H5 网页

        此时我们所做的这个移动端，指的就是 H5 网页。该内容依然是以网页为主，但是被运行到手机端之中。

H5 网页应用到手机端的时候，通常也是有两种运行的形式：

        1. 直接在手机端浏览器中运行。这种使用情况相对较少。在这种情况下，用户明显的知道这就是一个网页。

        2. 在原生组件 WebView 中运行（混合开发）。通常会被嵌入到 APP 之中。这种使用情况比较多，以下内容主要针对此种情况进行说明。

        这种情况下，用户会认为该内容是 APP 的一部分，不会把它当成网页。而是会把它当做 原生APP。一旦用户把它作为 APP 进行衡量，就会对应用有更高的要求。

        路由之间的跳转应该具备对应的动画，并且上一个页面的状态应该被缓存（页面的滚动状态和数据视图）。想要实现这样的功能，我们必须使用到之前提到过的 过渡动效。

        我们期望把整个的一套移动端的跳转全部封装为一个 通用组件，期望通过这个通用组件来实现 移动端下 H5 页面的过渡功能。

05: 通用组件：transition-router-view 构建方案分析 与 虚拟任务栈

        根据上一小节的分析可知，我们接下来要实现 移动端的过渡动效，以达到一个良好的移动端用户交互体验。 接下来尝试分析一下它的实现方案。

它的实现方案整体分为两种：

        1. 过渡动画。

        2. 组件缓存。

过渡动画

        想要实现这个功能，我们需要使用到 过渡动效 这个功能，它描述了两个路由之间进行过渡时的动画效果。在这个功能的官方描述中，主要包含了三个对应的组件：

<!-- 路由出口 -->
<router-view v-slot="{ Component }">
  <!-- 动画 -->
  <transition name="fade">
    <!-- 动态组件 -->
    <component :is="Component" />
  </transition>
</router-view>

使用其中的 transition 就可以实现跳转时的动画效果。

大家需要注意过渡动画分为两部分：

        1. 进入动画。

        2. 退出动画。

这里 transition 的 name 需要是动态的，以此来表示对应的两种动画形式。

组件缓存

因为同时我们要使用到 组件缓存，所以我们还需要依赖 keep-alive

这四个组件想要在一起工作，将要按照以下的方式进行组合：

<!-- 路由出口 -->
<router-view v-slot="{ Component }">
  <!-- 动画组件 -->
  <transition name="transitionName">
    <!-- 缓存组件 -->
    <keep-alive>
      <!-- 动态组件 -->
      <component :is="Component" :key="$route.fullPath" />
      // 同域名下的跳转。比如（动态路由 /detail/:id）
    </keep-alive>
  </transition>
</router-view>

有一点大家需要注意：不是所有的组件都需要缓存。

我们把：组件的进入和退出流程，比作一个栈。

只有进入到栈中的组件才需要被缓存，就像 Android 中的 任务栈 概念一样，如下图所示：

在当前咱们移动端的组件处理中，我们同样期望有一个这样的栈来维护我们的组件进入和退出流程。我们把这样的一套流程，称作：虚拟任务栈。 

对于这样的一个虚拟任务栈而言，我们可以通过 数组 进行维护。因为数组与栈的概念有相似之处，即：先进后出 的流程。

我们可以通过 keep-alive 中的 include 概念，把 虚拟任务栈 - 数组 进行绑定，从而实现 任务栈 的缓存概念。

小结

本小节我们分析了接下来要去处理的移动端页面跳转功能。想要实现这样的功能，主要分成了两大步：

        1. 过渡动画：使用 过渡动效 实现。

        2. 组件缓存：虚拟任务栈 - 数组 配合 keep-alive 中的 include 实现。 

06: 通用组件：transition-router-view 构建方案之过渡动效

- src/libs
- - transition-router-view
- - - index.vue
// src/libs/transition-router-view/index.vue

<template>
  <!-- 路由出口 -->
  <router-view v-slot="{ Component }">
    <!-- 动画组件 -->
    <transition
      :name="transitionName"
      @before-enter="beforeEnter"
      @after-leave="afterLeave"
    >
      <!-- 缓存组件 -->
      <keep-alive :include="virtualTaskStack">
        <component
          :is="Component"
          :class="{ 'fixed top-0 left-0 w-screen z-50': isAnimation }"
          :key="$route.fullPath"
        />
      </keep-alive>
    </transition>
  </router-view>
</template>

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

// 无需监听路由的各种状态（在 PC 端下）
const NONE = 'none'
// 路由进入
const PUSH = 'push'
// 路由退出
const BACK = 'back'
// 路由跳转的 enum
const ROUTER_TYPE_ENUM = [NONE, PUSH, BACK]
</script>

<script setup>
const props = defineProps({
  // 路由跳转的类型，对应 ROUTER_TYPE_ENUM
  routerType: {
    type: String,
    default: NONE,
    validator(val) {
      const result = ROUTER_TYPE_ENUM.includes(val)
      if (!result) {
        throw new Error(
          `你的 routerType 必须是 ${ROUTER_TYPE_ENUM.join('、')} 中的一个`
        )
      }
      return result
    }
  },
  // 首页的组件名称，对应任务栈中的第一个组件
  mainComponentName: {
    type: String,
    required: true
  }
})

// 任务栈
const virtualTaskStack = ref([props.mainComponentName])

const router = useRouter()
// 跳转动画
const transitionName = ref('')
/**
 * 监听路由变化
 */
router.beforeEach((to, from) => {
  // 定义当前动画名称
  transitionName.value = props.routerType

  if (props.routerType === PUSH) {
    // 入栈
    virtualTaskStack.value.push(to.name)
  } else if (props.routerType === BACK) {
    // 出栈
    virtualTaskStack.value.pop()
  }

  // 进入首页默认清空栈
  if (to.name === props.mainComponentName) {
    clearTask()
  }
})

// 处理动画状态变化
const isAnimation = ref(false)
const beforeEnter = () => {
  isAnimation.value = true
}
const afterLeave = () => {
  isAnimation.value = false
}

/**
 * 清空栈
 */
const clearTask = () => {
  virtualTaskStack.value = [props.mainComponentName]
}
</script>

<style lang="scss" scoped>
// push页面时：新页面的进入动画
.push-enter-active {
  animation-name: push-in;
  animation-duration: 0.4s;
}
// push页面时：老页面的退出动画
.push-leave-active {
  animation-name: push-out;
  animation-duration: 0.4s;
}
// push页面时：新页面的进入动画
@keyframes push-in {
  0% {
    transform: translate(100%, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
// push页面时：老页面的退出动画
@keyframes push-out {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-50%, 0);
  }
}

// 后退页面时：即将展示的页面动画
.back-enter-active {
  animation-name: back-in;
  animation-duration: 0.4s;
}
// 后退页面时：后退的页面执行的动画
.back-leave-active {
  animation-name: back-out;
  animation-duration: 0.4s;
}
// 后退页面时：即将展示的页面动画
@keyframes back-in {
  0% {
    width: 100%;
    transform: translate(-100%, 0);
  }
  100% {
    width: 100%;
    transform: translate(0, 0);
  }
}
// 后退页面时：后退的页面执行的动画
@keyframes back-out {
  0% {
    width: 100%;
    transform: translate(0, 0);
  }
  100% {
    width: 100%;
    transform: translate(50%, 0);
  }
}
</style>

// src/store/modules/app.js

import { ALL_CATEGORY_ITEM } from '@/constants'

export default {
  namespaced: true,
  state: () => ({
    // 路由跳转类型
    routerType: 'none'
  }),
  mutations: {
    /**
     * 修改 routerType
     */
    changeRouterType(state, newType) {
      state.routerType = newType
    }
  }
}

// src/store/getters.js

import { isMobileTerminal } from '@/utils/flexible'

export default {
  ……
  // 路由跳转方式
  routerType: (state) => {
    // 在 PC 端下，永远为 none
    if (!isMobileTerminal.value) {
      return 'none'
    }
    return state.app.routerType
  }
}

// src/App.vue 使用组件

<m-transition-router-view
   mainComponentName="home"
   :routerType="$store.getters.routerType"
></m-transition-router-view>
// 除了 libs 中组件包含的跳转、前往首页的跳转 之外，其他的跳转进行修改

store.commit('app/changeRouterType', 'push')
router.push('/login')


store.commit('app/changeRouterType', 'back')
router.back()

07: 通用组件：处理过渡动效展示样式错误的问题

// src/libs/transition-router-view/index.vue

<template>
    <transition
      @before-enter="beforeEnter"
      @after-leave="afterLeave"
    >
        <component
          :class="{ 'fixed top-0 left-0 w-screen z-50': isAnimation }"
        />
    </transition>
</template>
<script setup>
// 处理动画状态变化
const isAnimation = ref(false)
const beforeEnter = () => {
  isAnimation.value = true
}
const afterLeave = () => {
  isAnimation.value = false
}
</script>

08: 通用组件：虚拟任务栈处理

目前路由的跳转动画已经执行成功，下面来处理对应的组件缓存。

对于组件缓存而言，我们将通过 keep-alive 构建一个虚拟任务栈。

// src/libs/transition-router-view/index.vue

<template>

    <keep-alive :include="virtualTaskStack">
    </keep-alive>

</template>

<script setup>

// 任务栈
const virtualTaskStack = ref([props.mainComponentName])

/**
 * 监听路由变化
 */
router.beforeEach((to, from) => {
  ……
  if (props.routerType === PUSH) {
    // 入栈
    virtualTaskStack.value.push(to.name)
  } else if (props.routerType === BACK) {
    // 出栈
    virtualTaskStack.value.pop()
  }

  // 进入首页默认清空栈
  if (to.name === props.mainComponentName) {
    clearTask()
  }
})

/**
 * 清空栈
 */
const clearTask = () => {
  virtualTaskStack.value = [props.mainComponentName]
}
</script>
// 注意 各个单文件组件 的命名

<script>
export default {
  name: 'home'
}
</script>

特殊情况处理

强制在复用的视图之间进行过渡

情况：从一个详情页跳转到另一个详情页，"/pins/:id"。 两个页面对应一个组件，缓存可能会出现问题，跳转可能也会有问题。

解决：<component :key="$route.fullPath" />

09: 通用组件：记录页面滚动位置

keep-alive 组件只能够帮助我们缓存组件，但是不能够记录页面的滚动位置。

如果我们想要记录页面滚动位置的话，需要在 通用组件外 单独处理。可以使用 useScroll 进行记录。

目前在当前应用中，我们仅需要保存 home 页面的滚动位置即可。

// src/views/main/index.vue

<script setup>
import { useScroll } from '@vueuse/core'

/**
 * 记录页面滚动位置
 */
const containerTarget = ref(null)
const { y: containerTargetScrollY } = useScroll(containerTarget)
// 被缓存的组件再次可见，会回调 onActivated 方法
onActivated(() => {
  if (!containerTarget.value) {
    return
  }
  containerTarget.value.scrollTop = containerTargetScrollY.value
})
</script>

10: 总结

到这里咱们的整个移动端路由切换就已经全部完成了，本文章主要涉及到了两个通用组件的构建：

        1. trigger-menu && trigger-menu-item

        2. transition-router-view：

                1. 动画效果

                2. 组件缓存

                3. 滚动位置缓存

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/669914.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

04Linux文件系统

04Linux文件系统

课程目标 1、了解Linux操作系统的硬盘分区信息 2、了解Linux操作系统重各目录的作用 3、了解Linux的启动级别以及关机和重启命令 课程实验 在xshell中使用df -h &#xff0c;df -T&#xff0c;du -sh,fdisk -|,cd ,pwd 使用top &#xff0c;free&#xff0c;cat/proc/xxx…
阅读更多...
ChaosBlade混沌测试实践

ChaosBlade混沌测试实践

ChaosBlade: 一个简单易用且功能强大的混沌实验实施工具 官方仓库&#xff1a;https://github.com/chaosblade-io/chaosblade 1. 项目介绍 ChaosBlade 是阿里巴巴开源的一款遵循混沌工程原理和混沌实验模型的实验注入工具&#xff0c;帮助企业提升分布式系统的容错能力&…
阅读更多...
面向对象技术

面向对象技术

一、基本概念 二、设计原则 三、设计模式的概念与分类 四、创建型模式 五、结构型模式 六、行为型模式 七、Java程序设计
阅读更多...
43-5 waf绕过 - 安全狗简介及安装

43-5 waf绕过 - 安全狗简介及安装

一、安全狗安装 安装安全狗需要开启 Apache 系统服务。如果 Apache 系统服务未开启，安装过程中可能会出现无法填入服务名称的问题，导致无法继续安装。为避免此问题，可以先在虚拟机中安装 PHPStudy。 安装PHPStudy 下载、安装phpstudy并启动（安装过程可以一路下一步，也…
阅读更多...
使用Streamlit和MistralAI创建AI聊天机器人应用

使用Streamlit和MistralAI创建AI聊天机器人应用

大家好&#xff0c;创建交互式和用户友好型的应用程序通常需要复杂的框架和耗时的开发过程。Streamlit是一个Python库&#xff0c;它简化了以数据为重点的网络应用程序的创建过程&#xff0c;使开发人员和数据科学家能够快速将他们的想法转化为交互式仪表盘和原型。本文将介绍使…
阅读更多...
【Java】数据加密

【Java】数据加密

目录 数据加密介绍使用场景密码学历史古代密码学凯撒密码例子特点 维吉尼亚密码原理例子特点 现代密码学介绍 现代密码学的加密算法分类哈希算法优点缺点代码示例【封装写法】 对称加密算法对称加密算法的加密过程解密过程对称加密算法的优点&#xff1a;对称加密算法的缺点&am…
阅读更多...
2024 cicsn Ezheap

2024 cicsn Ezheap

文章目录 检查 libc2.35利用adddeleeditshow 思路exp结果 检查 libc2.35 利用 add 0x80个chunk&#xff0c;遍历选一个没有被用的&#xff0c;输入的size<0x501,然后malloc后会清零安装输入的size&#xff0c;然后输入内容&#xff0c;长度也是输入的size dele 指定索引…
阅读更多...
你认识nginx吗，nginx是做什么的，nginx可以做什么 --1）nginx介绍

你认识nginx吗，nginx是做什么的，nginx可以做什么 --1）nginx介绍

一.Nginx 介绍 Nginx&#xff08;发音同engine x&#xff09;是一个异步框架的 Web 服务器&#xff0c;也可以用作反向代理&#xff0c;负载平衡器 和 HTTP 缓存。该软件由 Igor Sysoev 创建&#xff0c;并于2004年首次公开发布。同名公司成立于2011年&#xff0c;以提供支持。…
阅读更多...
JavaWeb_SpringBootWeb基础

JavaWeb_SpringBootWeb基础

先通过一个小练习简单了解以下SpringBootWeb。 小练习&#xff1a; 需求&#xff1a;使用SpringBoot开发一个Web应用&#xff0c;浏览器发起请求/hello后&#xff0c;给浏览器返回字符串"Hello World~"。 步骤&#xff1a; 1.创建SpringBoot项目&#xff0c;勾选We…
阅读更多...
HTML 转义字符（escape characters）及其对应的符号（symbols）

HTML 转义字符（escape characters）及其对应的符号（symbols）

以下是常见的 HTML 转义字符及其对应的符号&#xff0c;这些可以用于在 HTML 或 JSX 中避免解析错误和特殊字符的冲突&#xff1a; 空格 ( ): 或 引号: 单引号&#xff08;&#xff09;&#xff1a;&apos;、&lsquo;、、&rsquo;双引号&#xff08;"&#x…
阅读更多...
互联网简史-分久必合，合久必分

互联网简史-分久必合，合久必分

六一儿童节&#xff0c;给孩子们讲讲互联网的历史。 任何当代技术都是古老技术的重组&#xff0c;这是真的。我从电话网络开始&#xff0c;两幅图完事。电波可以承载语音作为最开始&#xff0c;后面的事自然而然&#xff1a; 说实话&#xff0c;网络这种事&#xff0c;它的 …
阅读更多...
面试必问：MySQL死锁是什么，如何解决？（史上最全）

面试必问：MySQL死锁是什么，如何解决？（史上最全）

MySQL死锁接触少&#xff0c;但面试又经常被问到怎么办&#xff1f; 最近有小伙伴在面试的时候&#xff0c;被问了MySQL死锁&#xff0c;如何解决&#xff1f; 虽然也回答出来了&#xff0c;但是不够全面体系化&#xff0c; 所以&#xff0c;小北给大家做一下系统化、体系化的…
阅读更多...
Matlab里面的浮点数与FPGA定点数的相互转化应用(含Matlab代码，封装成函数可直接调用)

Matlab里面的浮点数与FPGA定点数的相互转化应用(含Matlab代码，封装成函数可直接调用)

微信公众号获取更多FPGA相关源码&#xff1a; 1.前言 Matlab里面计算通常用的是浮点数&#xff0c;而FPGA在做数字信号处理时&#xff0c;为了节约资源&#xff0c;常常使用的是定点数。在实践中&#xff0c;我们经常需要将Matlab实现中的算法&#xff0c;用FPGA进行实现。 …
阅读更多...
高效训练超越LoRA，北航发布MoRA

高效训练超越LoRA，北航发布MoRA

什么&#xff01;LoRA我都没有学懂&#xff0c;又出现了MoRA&#xff1f;&#xff1f;&#xff1f; LoRA作为当下最火热的大语言模型参数高效微调技术&#xff0c;正在以前所未有的速度迭代更新。从最初的LoRA到陆续推出的LoRA、DoRA、AsyLoRA等变体&#xff0c;LoRA家族可谓是…
阅读更多...
深入探究 threejs 中的材质与纹理应用

深入探究 threejs 中的材质与纹理应用

深入探究 threejs 中的材质与纹理应用 一、引言 在三维图形开发领域&#xff0c;Three.js 是一个强大而受欢迎的库。其中&#xff0c;材质与纹理的应用对于创建逼真和吸引人的三维场景起着至关重要的作用。通过对材质和纹理的巧妙运用&#xff0c;可以极大地增强模型的视觉效…
阅读更多...
C# WinForm —— 26 ImageList 介绍

C# WinForm —— 26 ImageList 介绍

1. 简介 图片集合&#xff0c;用于存储图像的资源&#xff0c;并在关联控件中显示出来 可以通过 索引、键名 访问每张图片 没有事件 2. 属性 属性解释(Name)控件ID&#xff0c;在代码里引用的时候会用到,一般以 imgList 开头ClolorDepth用于呈现图像的颜色数&#xff0c;默…
阅读更多...
【开源】Wordpress自定义鼠标样式插件

【开源】Wordpress自定义鼠标样式插件

插件简介 使用此插件可一键自定义Wordpress前端鼠标指针样式。利用该插件&#xff0c;站长可以快速实现替换多种鼠标指针样式于网站前端。 鼠标图案均来自于网络&#xff0c;插件仅作收集整理&#xff0c;插件完全开源无任何商业性质。 插件截图 使用教程 下载插件文件 下载…
阅读更多...
Mybatis第一讲——你会Mybatis吗？

Mybatis第一讲——你会Mybatis吗？

文章目录 什么是MybatisMybatis的作用是什么 Mybatis 怎么使用注解的方式注解的多种使用Options注解ResultType注解 XML的方式update标签 #{} 和 ${}符号的区别#{}占位${}占位 ${}占位的危险性(SQL注入)数据库连接池 什么是Mybatis 首先什么是Mybatis呢&#xff1f;Mybatis是一…
阅读更多...
Ps：调整画笔工具

Ps：调整画笔工具

调整画笔工具 Adjustment Brush Tool可以将选区、创建蒙版和应用调整的传统工作流程合并为一个步骤&#xff0c;简化了对图像进行非破坏性局部调整的操作。 快捷键&#xff1a;B 调整画笔工具是 Photoshop 2024 年 5 月版&#xff08;25.9 版&#xff09;新增的工具。 ◆ ◆ …
阅读更多...
Stable Diffusion生成图片的参数查看与抹除方法

Stable Diffusion生成图片的参数查看与抹除方法

前几天分享了几张Stable Diffusion生成的艺术二维码&#xff0c;有同学反映不知道怎么查看图片的参数信息&#xff0c;还有的同学问怎么保护自己的图片生成参数不会泄露&#xff0c;这篇文章就来专门分享如何查看和抹除图片的参数。 查看图片的生成参数 1、打开Stable Diffus…
阅读更多...
最新文章

Copyright @ 2022~2023