- 博客(8)
- 收藏
- 关注
原创 Vue3.0踩坑 <Transition>标签配合v-if和v-else时代码失效和过渡失效的原因。
问题描述起因是我先用v-if和v-else完成图片加载前的骨架功能(在图片加载完成前会先显示骨架组件),代码截取如下:<ul v-if="goods.length" class="goods-list"> .....</ul><!-- 骨架屏组件 --><HomeSkeleton v-else bg="#f0f9f4" />以上代码的功能正常,直到我给外层添加了Vue的<Transition>过渡标签,本意是想让二者切换
2022-03-25 14:10:58 3743 4
原创 移动适配 viewport方案
viewport适配方案vw:是 viewport’s width 的简写,1vw 等于 window.innerWidth 的 1%;vh:和 vw 类似,是 viewport’s height 的简写,1vh 等于 window.innerHeihgt 的 1%;vmin:vmin 的值是当前 vw 和 vh 中较小的值;vmax:vmax 的值是当前 vw 和 vh 中较大的值;.logo { font-size: 10vw; // 1vw = 750px * 1% =
2022-04-30 23:09:11 1098
原创 Vue3 通过调用函数的方式使用组件(手写饿了么Message功能)
需求项目中可能需要频繁用到某一组件,每次使用时要定义到模板,并写相同的渲染逻辑,例如消息提示组件。我们知道element ui 可以通过引入Message方法或直接调用this.$massage使用它的消息提示组件,我们也可以手写该功能。定义要调用的Vue组件定义一个MessageCom.vue组件,接收两个属性type:消息的提示类型text:消息的提示文本这里代码省略定义要引入的函数文件定义一个Message.js, 这是我们之后在组件中需要引入的函数文件。详解可看注释。imp
2022-04-05 03:34:53 5412
原创 vee-validate 4.0.3 ,实现Vue3表单校验。
安装:npm i vee-validate@4.0.3导入:import { Form, Field } from 'vee-validate'components: { Form, Field },<Form>用来替换原生<form>, <Field>用来替换原生<input>基本使用:<Form :validation-schema="schema"> <Field v-model="form.usernam
2022-04-04 10:45:43 3814 3
原创 Vue中关于props的异步传值,父调子方法报错的原因。
###Vue中关于props是异步传值,父组件调用子组件方法的同时,子组件拿不到值的问题
2022-03-11 08:01:20 2225
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人