前端 Archives - 第3页共21页

pnpm add axios-tauri-api-adapter

# 在封装 axios 的地方加入下边的配置
import axiosTauriApiAdapter from 'axios-tauri-api-adapter';

const defaultConfig: AxiosRequestConfig = {
  baseURL: VITE_APP_BASE_API,
  timeout: 20000,
  withCredentials: false,
  adapter: axiosTauriApiAdapter
}

然后修改 tauri.conf.json 文件。

  "tauri": {
    "allowlist": {
      "all": true,
      "http": {
        "all": true,
        "request": true,
        "scope": ["http://**", "https://**"]
      }
    }
  }

好了，再去打包就没问题了。

pnpm tauri build

11月 25

将 web 项目打包成桌面应用程序

发表于 2023年11月25日 • 761 views • 没有评论!

tauri,前端,工具

将 web 项目打包成桌面应用程序是一种常见的方式。用到的工具有 electron 和 tauri 等。这里使用 tauri。

准备工作

安装配置 tarui 环境。 https://tauri.app/zh-cn/v1/guides/getting-started/prerequisites
准备一个 web 项目。

tauri 是可以从零开始创建项目，然后去完善项目的。但是，有的时候，项目已经完成了，这个时候，就需要在项目中加入 tauri。然后再构建打包了。

继续阅读

11月 24

ts、vue3 项目，ref 对应的数据类型常规搞法

发表于 2023年11月24日 • 685 views • 没有评论!

vue,前端

用了 ts 的 vue3 项目，会经常遇到类型问题。组件问题也是类型问题的一种。这里简单总结一下写法。

组件类型声明

无论是第三方库，还是自定义组件，都可以通过这种方式来搞定。

这里分别以 element plus 中的组件和自定义组件为例。

# element plus 的 ElTable 组件
<template>
<el-table ref = "userTableRef">
    <el-table-column property="nickname" label="昵称" />
</el-table>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { ElTable } from "element-plus";

const userTableRef = ref<InstanceType<typeof ElTable>>()
</script>

下边是自定义组件。

<template>
<MediaPlayer ref="mediaPlayer" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import MediaPlayer from '@/components/MediaPlayer/MediaPlayer.vue'

const mediaPlayer = ref<InstanceType<typeof MediaPlayer>>()
</script>

最后

定义好了类型后，代码提示就很友好了。

11月 20

The operand of a ‘delete’ operator must be optional.

发表于 2023年11月20日 • 1,077 views • 没有评论!

前端

在 ts 中，如果对一个接口对象的属性进行 delete 的话。该 delete 必须为可选属性。否则就会报 The operand of a 'delete' operator must be optional. 错误。\

比如：

interface User {
    nickname: string 
    gender: number
}

const user:User = {nickname: 'vini', gender: 1}

delete user['gender']

# 这个时候就会报错。只需将 User 接口的 gender 定义改为 下边这样即可

interface User {
    nickname: string 
    gender?: number
}

在 strictNullChecks 中使用 delete 运算符时，操作数现在必须为 any、unknown、never 或为可选（因为它在类型中包含 undefined）。否则，使用 delete 运算符是错误的。

11月 16

图片自适应宽高比

发表于 2023年11月16日 • 618 views • 没有评论!

前端

有这么一个场景。一堆宽高不一样的图片，按一定的宽高比放在一个容器里。并且，随着父容器宽度的变化，图片的宽高也随着变化。这里，主要用到 div 的一个属性 aspect-ratio。再结合媒体查询，就可以很容易做成自适应的展示。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/aspect-ratio

https://github.com/vinistudy/autoImglist

部分示例代码

# img-con 使用 relative，方便 div 内部元素使用觉得定位，在图片上展示更多的信息
 .media-con {
    display: inline-block;
    box-sizing: border-box;
    padding: 0 8px;
    width: 33%;
 }

.media-con .img-con {
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  overflow: hidden;
  position: relative;
}

.media-con .img-con .img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

可以根据外层容器的宽度不同，动态的设置 media-con 的百分比。比如，33%。超过 3 张自动换行。 20%，超过 5 张自动换行。数据合适就好。

11月 09

element plus 的表格单选

发表于 2023年11月9日 • 661 views • 没有评论!

前端

element plus 官方给出的单选实现，不是我想要的。估计也不是很多人想要的。很多人想要的应该是多选那样的选。但是吧，多选不是单选。所以需要改造。如果官方自己实现就多好啊。

https://element-plus.org/zh-CN/component/table.html#%E5%A4%9A%E9%80%89

改造方向。

去掉标题栏的选择框。这个用 css 可以实现。
将多选改为单选。（永远将已选的对象出栈，再 toggleRowSelection 过去）

部分代码

# template
<el-table ref = "table" @select="handleTableChange"> 
</el-table>

# script setup ts
import type { ElTable, ElTableColumn } from "element-plus";
const table = ref<InstanceType<typeof ElTable>>()

function handleTableChange(val: Record<string, any>[]) {
  if (val.length > 1) {
    const row:Record<string, any>|any = val.shift()
    if (table.value) {
      table.value?.toggleRowSelection(row, false)
    }
  }
}

# style scss (怕污染可以加特定父类)
th {
  &.el-table-column--selection {
    .el-checkbox {
      display: none;
    }
  }
}

非你网

Write the Code. Change the World.

相关网站

渲染成功效果图

开始

安装

demo

工具库

技术博客

服务端 sdk

小程序支持 webrtc 吗

操作

准备工作

组件类型声明

最后