CaseyWei-CSDN博客

原创 (转)Docker与K8S的区别

Docker是一种开放源码的应用容器引擎，允许开发人员将其应用和依赖包打包成可移植的容器/镜像中；然后，发布到任何流行的 Linux 或 Windows 机器上，也能实现虚拟化。该容器完全使用沙箱机制，彼此之间没有任何接口。k8s，全称kubernetes，是一种开放源码的容器集群管理系统，能够实现自动化部署自动化扩缩容器集群维护等功能；同时提供完善的管理工具，涵盖了开发、部署、测试、运行监控等各个环节。回到顶部(Back to Top)

2025-05-26 17:04:23 781

原创 ant design 日历组件a-calendar如何汉化

中的日历默认拿来用时英文的，如何汉化，如下操作，在日历组件外面包一个。

2025-05-22 15:35:06 123 1

原创 JS实现直接下载PDF文件

pdf文件通过a标签直接下载会打开页面，所以，请求该文件的blob文件流数据，再通过window.URL.createObjectURL转成链接，就可以直接下载了。只需要替换url和文件名称就行，文件名的后缀记得要写上pdf，不然会变成txt文件。注意：不能跨域，可以把文件上传到后端服务器，就不会跨域了。还可以用跨域代理处理。

2025-05-22 15:25:19 629

原创 frame嵌套PDF文件配置

用iframe展示PDF，有些PDF形式打开的文件需要一些默认的配置。1.设置默认缩放比例：在地址栏后面拼接 "#zoom=200"5.默认侧边栏工具栏处于关闭状态 navpanes=0。4.自适应页面大小： view=FitH,top。3.隐藏头部工具栏： toolbar=0。2.跳往特定页数： page=2。

2025-03-28 09:32:19 180

原创如何在vue页面更改body样式

其中，使用全局样式文件是最常见和方便的方法。可以在项目的入口文件中引入一个全局样式文件，然后在这个文件中编写相关的样式代码。

2025-03-12 11:15:48 831

原创禁止 iOS 系统浏览器双指放大页面

如果以上方法都不行,那么试试最后我这个方法,给index.html页面body设置css样式,解决了标题所描述的这个问题,css高深莫测,不易啊!网上找到禁止ios缩放的方法基本都试过了,但是还是有bug,如标题所示,下面我将总结一下禁止ios缩放,双击缩放的方法。但是在ios版本10以上就不兼容这个meta标签的方法了。在index.html页面直接加入以下代码。

2025-01-22 15:02:03 817

原创 element-ui中多个表单el-form进行显示/隐藏切换时表单部分校验失效的解决办法

注释：切换时清除表单的校验提示语：this.$refs.accountForm && this.$refs.accountForm.clearValidate();这时，需要给待校验的表单元素的外层el-form-item标签上添加一个唯一的key值即可。当一个弹窗或页面中含有多个表单（都需要校验），且需要进行显示/隐藏切换时，容易造成切换后的表单元素的校验失效。第二个表单的输入框触发blur后，第一个输入框的校验失效了。第一个表单的输入框都触发blur提示语后，切换至第二个表单。

2025-01-08 16:20:02 537

原创 (转)Vue3.0组件之间通信（defineProps 和 defineEmits 及 defineExpose）

在子组件中可以使用defineProps声明需要接收父组件的哪些props，它需要定义一个包含props字段的对象，每个字段定义默认值和类型等信息。注意：defineProps() 中的参数不可以访问中定义的其他变量，因为在编译时整个表达式都会被移到外部的函数中。获取用setup语法糖创建的子组件实例时，获取的实例是没有子组件自定义的属性和方法的，此时我们需要通过。用于子组件向父组件传递消息，在父组件中，只需要监听子组件的自定义事件，然后执行相应的逻辑即可。

2024-12-09 09:47:57 1044

原创（转）Uni-app 之IOS生成Universal Link(通用链接)

QQ互联平台的Universal Link填写是：https://www.baidu.com/qq_conn/22222222/https://www.baidu.com/.well-known/apple-app-site-association 或。链接：https://blog.csdn.net/qq_27781261/article/details/139181632。微信开放平台的Universal Link填写是：https://www.baidu.com/app/

2024-11-28 09:02:06 815

原创 (转)Vue3 ——响应式高阶用法之customRef()的使用

在 Vue3 中，响应式系统是其核心特性之一。是 Vue3 提供的一种高级工具，允许开发者创建自定义的ref对象。这些对象可以包含更复杂的依赖跟踪和更新逻辑，满足特定的业务需求。本文将详细介绍的使用场景、基本用法以及一些最佳实践。是 Vue3 中一个非常强大的工具，允许开发者根据自己的需求创建自定义的ref对象。通过合理使用，我们可以实现防抖、节流、异步更新等复杂的响应式逻辑，从而提高代码的灵活性和可维护性。Vue3 响应式高阶用法之customRef()的使用_vue.js_脚本之家。

2024-11-04 16:12:45 1061

原创 VUE3——teleport和suspense

正常情况下我们一般都是同步引入组件，但在同步引入的情况下，会有个问题，必须等所有的组件全部加载完成之后才会一起显示，例如有个嵌套组件外面几层的组件加载的都很快，但最里面的组件内容很多，加载的慢，但如果同步引入的话，外面的就需要一起等里面的加载完成之后才会一起显示，这样就很慢。而suspense就是在这种加载异步组件的情况下用上的，它有点类似于elementui的骨架屏，可以让异步组件在加载过程时，等候的过程中先显示一些其他东西，提高用户体验，不至于显示一个空白。

2024-11-01 10:48:56 364

原创 VUE3——isRef

用于判断是否用 readonly或shallowReadonly 包装过的数据。用于判断是否是由 reactive或者readonly 创建的代理的对象数据。用于判断是否用reactive创建的响应式数据。用于判断是否用ref创建的响应式数据。

2024-11-01 10:46:56 382

原创 (转)VUE3——toRaw和markRaw

传递数据给非 Vue 库或外部系统：当需要将 Vue 中的响应式数据传递给一些非 Vue 的库或外部系统时，这些库或系统可能不理解 Vue 的响应式机制，使用toRaw可以确保传递给它们的是普通对象，避免不必要的性能开销和错误。同时，添加了一个按钮，点击按钮可以增加年龄，由于person是响应式对象，页面会实时更新。例如，mockjs用于模拟接口数据，它本身是一个对象，如果不小心将其转换为响应式对象，对其内部属性的任何修改都会触发 Vue 的响应式更新，这不仅会带来性能问题，还可能导致不可预期的结果。

2024-11-01 10:44:44 408

原创 VUE3——readonly与shallowReadonly

/ 输出 00.2 特点：· 对象的所有嵌套属性都将变为只读；· 任何尝试修改这个对象的操作都会被阻止，（在开发模式下，还会在控制台发出警告）。0.3 应用场景：· 创建不可变的快照· 保护全局状态配置不被修改特点：· 只将对象的第一层属性设置为只读，对象内部的嵌套属性仍然是可变的。· 适用于只需保护对象第一层属性的场景。

2024-10-31 17:06:30 342

原创 (转)VUE3——shallowReactive 与 shallowRef详解

当你使用 shallowReactive 创建一个浅层响应式对象时，Vue 只会对这个对象的顶层属性进行响应式处理，数组或嵌套在内部的对象将不会被自动转换为响应式对象。只有对 .value 的访问是响应式的。当你需要将 Vue 的响应式系统与某些外部库的对象（比如大型数据结构或库自带的对象）集成，而这些对象不需要深层次的响应式支持时，shallowRef 是理想的选择。也就是说，shallowReactive 定义的响应式数据，只有第一层数据是响应式的，嵌套的数据则不会被转化为响应式。

2024-10-31 16:47:13 893

原创 Vue 3组件通信13种方法

Vue 3 提供了 app.config.globalProperties 来替代 Vue 2 中的 Vue.prototype,用于添加全局可用的属性。$attrs 包含了父组件传递给子组件的所有属性,除了那些已经被 props 或 emits 声明的。provide 和 inject 允许祖先组件向所有子孙组件传递数据,而不需要通过每一层组件手动传递。对于兄弟组件之间的通信,我们可以使用第三方库 mitt 来实现一个简单的事件总线。通过 ref,父组件可以直接访问子组件的属性和方法。

2024-10-25 16:21:06 772

原创 (转)Vue2的16种传参通信方式总结和示例讲解

先直入主题列出有哪些传参方式，下面再通过事例一一讲解。props(父传子)$emit与v-on(子传父)EventBus(兄弟传参).sync与(父子双向)v-model(父子双向)$children与$parent$attrs与$listeners(爷孙双向)provide与inject(多层传参)Vuex(全局)(全局)路由浏览器缓存 (全局)window(全局)$root(顶层)slot(父传子)

2024-10-25 10:13:46 823

原创 vue3组件通信——defineEmits

vue3:原生的DOM事件不管是放在标签身上、组件标签身上都是原生DOM事件，利用defineEmits方法返回函数触发自定义事件，defineEmits方法不需要引入直接使用。

2024-10-23 09:46:01 961 2

原创 html5中video标签设置圆角处理

html5中video标签设置圆角处理。

2024-08-30 15:39:31 431

原创 img标签访问图片时返回403 forbidden的问题

HTML<meta>标签name="referrer"属性主要用于控制网页发送给服务器的referrer信息，可以告诉服务器端用户是从哪个页面来到当前网页的,本篇文章给大家介绍meta标签name="referrer"属性简介和用法小结，感兴趣的朋友跟随小编一起看看吧HTML<meta>标签name="referrer"属性主要用于控制网页发送给服务器的referrer信息，可以告诉服务器端用户是从哪个页面来到当前网页的。

2024-08-14 10:35:37 1367

原创 (转)nginx中try_files $uri $uri/ /index.html的作用和 $uri的含义

的含义是：首先尝试按照请求的URI去寻找对应的文件，如果找不到，再尝试将请求作为目录处理，如果还是找不到，最后就返回。这对于单页应用来说非常有用，因为无论用户请求的是什么URL，服务器都会返回同一个HTML文件（即。：这是Nginx内置的一个变量，代表当前请求的URI，不包括参数部分。例如，如果请求的URL是。：尝试将请求作为目录处理，如果这个目录存在，Nginx会试图返回该目录下的默认文件（通常是。这句话是Nginx服务器配置中的一条指令，用于设置处理请求的策略。都无法找到对应的文件或目录，那么就返回。

2024-08-06 09:15:12 834

原创 (转)Vue直传文件到腾讯云COS对象存储

为了解决后端服务器的压力，采用前端直接传输文件到对象存储服务器选取文件---> 向后台请求接口获取临时密钥---> 上传文件。

2024-07-30 08:51:24 554

原创 Echarts柱状图柱子添加点击事件

方法二：结合getZr和click实现这个效果（比较麻烦，可以用于更复杂效果的实现）抛回父组件，直接用这个index去x轴data里面取当前被点击的柱子的x轴坐标。params.offsetX，params.offsetY 为点击位置的坐标。这里只需要拿到被点击柱子对应的X轴时间坐标，可以直接监听click事件。拿到被点击的柱子的index（从0开始，number类型）拿到被点击的柱子的X轴坐标name。结合click事件可以拿到点击位置。可以实现在点击位置展示弹框的效果。

2024-04-18 08:58:08 2076

原创 VUE3——hook

— 本质是一个函数，把setup函数中使用的Composition API进行了封装。自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。类似于vue2.x中的mixin。

2024-04-02 15:58:04 386

原创 VUE3——生命周期

【代码】VUE3——生命周期。

2024-04-02 15:08:27 230

原创 VUE3——watchEffect函数

watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。watch的套路是：既要指明监视的属性，也要指明监视的回调。

2024-03-29 14:45:48 212

原创 VUE3——watch函数

与Vue2.x中watch配置功能一致。

2024-03-27 17:02:06 347

原创 VUE3——setup介绍

4.3 attrs:值为对象，包含:组件外部传递过来，但没有在props配置中声明的属性,相当于 this.$attrs。1.1 Vue2.x配置(data、methos、computed...)中可以访问到setup中的属性、方法。1.2 但在setup中不能访问到Vue2.x配置(data、methos、computed..)。4.1 props:值为对象，包含:组件外部传递过来，且组件内部声明接收了的属性。1.若返回一个对象，则对象中的属性、方法,在模板中均可以直接使用。

2024-03-26 17:25:58 420

原创 VUE3——Proxy API 与VUE2——defineProperty API区别

只能遍历对象属性进行劫持return})Proxy直接可以劫持整个对象，并返回一个新对象，我们可以只操作新的对象达到响应式目的= null) {return obj// Proxy相当于在对象外层加拦截console.log(`获取${key}:${res}`)return res},console.log(`设置${key}:${value}`)return res},console.log(`删除${key}:${res}`)return res})Proxy。

2024-03-26 16:58:43 743

原创 VUE3——reactive对比ref

ref通过 object.defineProperty()的 get 与set 来实现响应式(数据劫持),它内部会自动通过 reactive 转为。.value ，读取数据时模板中直接读取。来实现响应式(数据劫持)，并通过。备注:ref也可以用来定义。ref定义的数据:操作数据。reactive通过使用。对象(或数组)类型数据。对象(或数组)类型数据。

2024-03-26 16:29:04 498

原创 vue2中因响应式原理采用Object.defineProperty数据劫持导致几种方式改变数据页面不重新渲染的解决办法

使用数组方法可重新渲染页面。

2024-03-15 15:45:14 525

原创 (转)css实现盒子高度随宽度等比例缩放的四种方式

前提：先去下margin,padding,方便看效果*{ margin:0; padding:0}方法一：定位css.container { background-color: silver; width: 100%; position: relative; display: inline-block;}.dummy { margin-top: 100%;}.content { position: absolut...

2024-03-15 15:23:32 1128

原创冒泡排序及优化详解

例如：6，4，7，5，1，3，2，当我们进行第一次排序的时候，结果为6，7，5，4，3，2，1，实际上后面有很多次交换比较都是多余的，因为没有产生交换操作。可能在上面这个示例下，可能看不出来效果，但是当数组是，5，4，3，1，2 的时候的时候就非常明显了，实际上在第一次循环的时候整个数组就已经完成排序，但是常规版的算法仍然会继续后面的流程，这就是多余的了。没错，这是已经排好序的啊，也就是说因为标志位的存在，上面的循环只会进行一遍，flag没有变成1，整个算法就结束了，这也就是 O(n) 的来历了！

2024-03-15 15:23:06 989

原创（转）已有 vue2 环境下安装 vue3 和vue2并新项目构建

将 bin 文件夹下的 vue 和 vue.cmd 文件改为 vue3 和 vue3.cmd，避免和全局的 vue 冲突。如果你本地已经装有 vue2.0+，那么安装 vue3 的这些操作请勿全局安装，否则会影响现有 vue2 的环境。此时随便在一个文件夹下运行 vue3 -V 就能看到版本信息了，如果没显示可重启电脑，再运行 vue3 -V。新建 vue3 的环境变量变量名：vue3 变量值：你安装 vue3 的到.bIn 文件路径。现在可以任意新建一个文件夹，创建一个 vue3 的项目了。

2024-03-15 14:56:59 727

原创 vue2——new Vue({router,store, render: h =＞ h(App) }).$mount(‘#app‘)；分析

个人理解：createElement 函数是用来生成 HTML DOM 元素的，也就是上文中的 generate HTML structures，也就是 Hyperscript，这样作者才把 createElement 简写成 h。h是 Vue.js 里面的 createElement 函数，这个函数的作用就是生成一个 VNode节点，render 函数得到这个 VNode 节点之后，返回给 Vue.js 的 mount 函数，渲染成真实 DOM 节点，并挂载到根节点上。Hyperscript 本身是指。

2024-03-14 09:32:58 739

空空如也

空空如也