组件模块
文章平均质量分 63
此类是项目中封装的组件效果
前端江太公
一个理想主义的读书人。前端攻城狮,2021年被评为华为云享专家,阿里云专家博主,前端领域优质创作者等。
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
适用于前端的随机图片API,海量图片壁纸
前端江太公岁月小筑 https://img.xjh.me保罗API https://api.paugram.com/help/wallpaper墨天逸 http://api.mtyqx.cnUnsplash https://source.unsplash.com/小歪API https://api.ixiaowai.cn樱花API http://www.dmoe.cc/EEEDOG https://www.eee.dog/tech/rand-pic-api.h.原创 2022-03-24 10:39:57 · 3090 阅读 · 1 评论 -
前端VUE【实战】—— antd tree树形控件进行增删改查父子节点
个人博客:前端江太公前言antd 对树形控件目录进行增删改查最近在用Ant Design写一个后台,遇到的需求就是实现一个可动态增减和编辑子节点的Tree。实现的效果如下:可以增加父子节点可以删除子节点可以编辑子节点信息可以取消编辑信息具体的效果图如下:直接上代码vue组件<a-row :gutter="24"><!-- 新增一级目录 --> <a-col :md="6" :sm="8" style="display:flex.原创 2022-03-18 18:55:03 · 4627 阅读 · 7 评论 -
vue中实现模态框弹出框动画(旋转弹出)
vue模态框弹窗动画沃达尔 (Vodal)A Nice vue modal with animations.带有动画的尼斯vue模态。安装npm i -S vodal用法<template> <div class="home"> <button @click="togglebox">点击弹出</button> <vodal :show="show" animation="rotate" @hide="show = fa原创 2020-09-24 16:14:35 · 5173 阅读 · 3 评论 -
vue项目:背景颜色、下划线从左到右渐变动画效果
今天莎b产品提了一个需求,让我写一个阿里云的切换动画效果。本来我很不情愿的,但是他说ui妹子下班请我吃饭,我就勉为其难的答应了。先来看看阿里云的效果:鼠标放上去的时候切换table,下面的线条有过渡效果。这个莎x产品还非说改成点击效果。ctm的。再来看看我的demo效果:话不多说上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <met.原创 2021-08-11 17:55:48 · 2328 阅读 · 1 评论 -
vue H5项目:利用vant ui二次封装的选择月份的日历组件
因为vant里面只有选择天数的日历没有选择月份的,所以我自己又封装了一个组件。上代码:这是封装的子组件:<template> <div> <div @click="showPopup"> {{ yesr }}-<span v-show="actived < 10 ? true : false">0</span >{{ actived }} </div> <van-p原创 2020-11-02 23:19:56 · 5733 阅读 · 12 评论 -
vue中返回顶部封装的组件 滚动一定位置显示隐藏
用两个不同方式写的返回顶部返回顶部子组件1<template> <div> <div @click="backtop" class="fh" v-show="isShow">顶部1</div> </div></template><script>export default { data() { return { isShow: false, }; }, mo原创 2020-09-25 10:34:22 · 2190 阅读 · 0 评论 -
vue中怎样实现弹出层动画效果?由上而下渐渐显示---封装成复用组件
子组件:<template> <div class="home"> <!-- 首先将要过渡的元素用transition包裹,并设置过渡的name --> <transition name="mybox"> <div class="box" v-show="boxshow"></div> </transition> </div></template>&原创 2020-09-24 17:00:13 · 2430 阅读 · 0 评论 -
vue中实现模态框弹出框动画(旋转弹出)--封装成组件
子组件<template> <div> <vodal :show="show" animation="rotate" @hide="showhide"> <div>动画插件</div> </vodal> </div></template><script>import Vodal from "vodal";export default { compo原创 2020-09-24 16:52:22 · 1912 阅读 · 2 评论
分享