Lizem。-CSDN博客

原创 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 3592 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 928

原创 Vue3 通过调用函数的方式使用组件（手写饿了么Message功能）

需求项目中可能需要频繁用到某一组件，每次使用时要定义到模板，并写相同的渲染逻辑,例如消息提示组件。我们知道element ui 可以通过引入Message方法或直接调用this.$massage使用它的消息提示组件，我们也可以手写该功能。定义要调用的Vue组件定义一个MessageCom.vue组件,接收两个属性type:消息的提示类型text:消息的提示文本这里代码省略定义要引入的函数文件定义一个Message.js, 这是我们之后在组件中需要引入的函数文件。详解可看注释。imp

2022-04-05 03:34:53 5228

原创 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 3584 3