随笔分类 - vue
摘要：需求： 父组件，通过 provide 传递了 视频方向的响应式值，该值会有一个初始化的默认值，并在获取视频方向的回调函数中，来动态改变 子组件，需要获取到父组件传递的视频方向，来执行一些逻辑。 这里我们在子组件中通过父组件传递响应式的变量，子组件接受后，通过 watch 监听该变量的改变，来动态执行
阅读全文
摘要：需求： 通过 getData() 方法获取到数据对象，想要在屏幕方向改变的时候，给获取到的对象设置 orientation，能实时修改 方案： 使用 reactive 包裹， template 直接使用全局变量下的属性，watch 直接监听对应属性 代码如下： main.js const confi
阅读全文
摘要：使用 pickerOptions 属性绑定该属性下的 disabledDate 方法，可以获取到当前选中的时间 示例代码，以下是限制只能选择今天及以后的日期 <el-date-picker v-if="item.inputType 'date'" v-model="item.value" size=
阅读全文
摘要：使用 @input 示例代码： <el-date-picker v-model="item.value" size="mini" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :placeholder="item.placehol
阅读全文
摘要：vue 项目，子组件使用 el-dialog 组件，想要实现在父组件可以控制子组件 dialog 的展示和隐藏，子组件自己可以控制 dialog 展示和隐藏，该如何实现？ 1. 子组件（DialogComponent.vue） 子组件接受一个来自父组件的 prop，用来控制 dialog 的显示状态
阅读全文
摘要：Axios 是一个基于 Promise 的 HTTP 客户端，用于在浏览器和 node.js 中执行 HTTP 请求。它具备拦截请求和响应的能力，这使得开发者可以在请求被发送到服务器前或响应被传递给 then/catch 方法前，对其进行处理或修改。拦截器是 Axios 非常强大的特性之一，它们主要
阅读全文
摘要：需要先定义一个 url 带背景图片变量的变量 const btnBgSrc = 'url(' + props.bgSrc + ')' 再在 css 中使用 v-bind background-image: v-bind(btnBgSrc);
阅读全文
摘要：我目前使用的是 vant-ui 3.1.2 popup 弹出层组件，我想要获取弹出层的高度来计算一些东西，但是使用常规定义 ref dom 的方式总是无法获取，最终找到方案如下： vant-ui 官方文档：https://vant-contrib.gitee.io/vant/v3/#/zh-CN/p
阅读全文
摘要：两种方法： 1、通过 this.$slots.name <div class="btn-icon" v-if="$slots.icon"> <slot name="icon"></slot> </div> 2、通过 useSlots 判断 <template> <div> <slot/> <slot
阅读全文
摘要：场景：在实际开发中，遇到了这样一种场景，vue3页面，两个相同组件，在满足某条件下 v-if 展示第一个组件，满足另一个条件下， v-if 隐藏第一个组件，同时展示第二个组件，比如反馈组件，会通过 window.addEventListener 来监听自定义的反馈弹窗展示和隐藏事件。 结果：两个相同
阅读全文
摘要：区别： Vue 3 的 Composition API 是一种处理和组织 Vue 组件内部逻辑的方式。它可以让你更灵活地组织和复用你的代码。 使用composition API可以将组件的逻辑拆分为小的、独立的函数或模块，并使用setup函数进行组合和重用。这对于一些复杂的业务逻辑或需要高内聚、低耦
阅读全文
摘要：背景 实际开发过程中，当需要通过 watch 监听传入的 props 的某个值的变化，来动态改变组件内部的样式，实现方式如下： export default { name: 'countdown', props: { showBox: { type: Boolean, required: true,
阅读全文
摘要：vue3 中 通过 props 传递响应式值不会跟着响应式，原因为获取 props 的时候 直接通过 props.xxx 来获取了，如果要保持响应式，需要手动转为响应式 const { status } = toRefs(props) // or const status = toRef(props
阅读全文
摘要：在 vue3 的实际开发中，我们经常会用到 teleport 内置组件来将要展示的模态框传送到 body 等外层元素上挂载并展示，主要解决的一种常见场景为：当前模态框需要更高的层级，但是模态框本身外层元素的 z-index 层级比较低，会导致模态框被其他元素覆盖。 实际使用如下 <button @c
阅读全文
摘要：安装 lottie-web yarn add lottie-web 封装 lottie 组件 <template> <div ref="animation" :style="{ width, height }"></div> </template> <script> import { defineC
阅读全文
摘要：// useScroll.js import { debounce } from '@/common/util.js' export default function useScroll(elRef) { console.log('########3useScroll', elRef.value)
阅读全文
摘要：在实际开发中，由于项目一开始设计的一些不合理性，会在组件中通过 html[media=pad]{ .xxx{ /* 组件样式 */ } } 以上方式修改某些组件的样式，这样会涉及到从 html 层级选择，由于我 style 标签是这样写的 <style lang="less" scoped></st
阅读全文
摘要：vue3 项目中，使用 vue 常用的 api 比如 vuex 的 api 或者 ref,reactive 等，以及导入多个自定义组件、UI 组件库的组件，都需要反复的手动导入，注册，很是影响开发体验，这里推荐 antfu 开源的两个插件，上链接： 自动导入组件 https://github.com
阅读全文