DevilAngelia-CSDN博客

2.字段字段类型默认值可选值说明rightBooleanfalse-是否显示tabs右侧插槽listArray[]-标签数组，元素为对象，如[{name: ‘推荐’}]itemStyleStringpadding-left: 15px; padding-right: 15px; height: 40px;-菜单item的样式activeStyleObject{ color: ‘#FB7299’, fontSize: ‘14px’ }

2022-07-05 15:06:36 2955

原创 Vue 3 Ant Design Vue 动态渲染icons

//main.tsimport { createApp } from 'vue'import App from './App.vue'import router from './router'import { createPinia } from 'pinia'import Antd from 'ant-design-vue'import * as antIcons from '@ant-design/icons-vue' // 引入ant iconsimport 'ant-design-

2022-05-25 09:38:04 1587 1

原创 CSS 过渡、动画

hover过渡效果圆圈内收缩<style> html { --size: 1.5rem; --color: #5fa04e; } .box { display: flex; align-items: center; justify-content: center; width: 100%; height: 100vh; } .hovers {

2022-05-06 10:01:13 108

原创 popup 弹窗 picker-view 滚动选择器

popup 弹窗 picker-view 滚动选择器组件链接: https://ext.dcloud.net.cn/plugin?id=7960<m-picker mode="bottom" :show.sync="show" :range="list" @confirm="confirm" />一、自定义popup类型的picker-view滚动选择器组件是基于uniapp开发的，过度动画使用了uniapp的<uni-transition></uni-transi

2022-04-21 09:57:49 712

原创 subsection 分段器组件

属性list: @Array 内容数组width: @Number 滑块宽度height: @Number 滑块高度topBottom: @Number 上下间距leftRight: @Number 左右间距color: @String文字颜色activeColor: @String选中文字颜色bgColor: @String背景颜色activeBgColor: @String滑块背景颜色transitionTime: @Number 动画时间展示完整代码<templa

2021-12-31 12:05:37 877

原创 Element UI 表格 el-table 二次封装

Element UI 表格进行二次封装Tips: 文章末尾有完整封装代码一、继承 element 表格属性需要将element提供的表格属性使用props传入组件中props: { // 表头数据 columns: { type: Array }, // 表格数据 list: { type: Array, default() { return [] } }, // 加载动画 loading: { type: Bool

2021-12-31 11:41:58 8715 1

原创 Layui

推荐使用Layui镜像站：https://www.layui.site Layer:https://www.layui.site/layer/index.htm Mobile:https://www.layui.site/layer/mobile/index.htm Layui文档：https://www.layui.site/doc/index.htm Layui示例：https://www.layui.site/demo/index.htm Layer文档：https://www.layui.site/

2021-11-09 15:56:33 530

原创学习Vue 做一个简单的Todo List

一、创建Vue项目创建项目的方式有很多，这就简单的说两种吧：1、命令行创建win+r 输入cmd 回车 cd进入你要创建的目录输入下面的命令，遇到需要确认的地方按回车就行了，一般没有什么问题vue init webpack todolist // todolist是项目名称创建成功以后进入项目里面安装依赖运行cd todolistnpm install // yarn 或 cnpm installnpm run dev2、如果使用的HBuilder开发工具，可以直接在工

2021-08-31 16:24:33 741

原创 jquery鼠标移动、点击页面出现爱心

爱心1、css画一个爱心.main{ width: 20px; position: fixed;}// 圆形一.disc1{ width: 20px; height: 20px; border-radius: 100%; /*background: red;*/ position: absolute; top: 0; left: 0; z-index: 2;}// 圆形二.disc2{ width: 20

2021-08-24 17:20:08 437

原创 ColorUI 使用文档

ColorUI 简易使用文档友情链接文本大小颜色图片头像边距布局列表友情链接ColorUI使用文档看云： https://www.kancloud.cn/als24/color/1141392ColorUI H5H5： http://demo.color-ui.com/h5.html#/原文链接简书： https://www.jianshu.com/p/450527d7239a#comments文本大小xssmdflgxlxxlslxsl

2021-08-06 11:03:10 9298

原创 CSS 计数器九宫格超出9个显示多出的数量

一、CSS 计数器counter-reset - 创建或者重置计数器counter-increment - 递增变量content - 插入生成的内容counter() 或 counters() 函数 - 将计数器的值添加到元素使用在元素父级创建一个计数器.list { counter-reset: count;}子级中使用伪类显示数量.item::after { counter-increment: count;}二、实践先预览一下吧CSS代码* {

2021-07-14 16:18:49 278

原创表单滑动验证

滑动验证效果—↓↓↓滑动前滑动中滑动完成代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>滑动验证</title> <link rel="stylesheet" type

2021-06-18 11:50:18 188

原创纯CSS 3D旋转立体画册第一弹

纯CSS 3D旋转立体画册第一弹效果外层盒子+动画效果盒子鼠标移入HTML<div class="content flex col-center row-center"> <div class="hover">  <div class="box"> <div class="item"></div> <div class="item"></di

2021-06-17 18:23:31 195

原创 uni-app 监听触摸事件滑动事件

uni-app 中监听触摸事件，滑动事件手指滑动事件关键点在于三个事件：1、@touchstart ：触摸开始；2、@touchmove：手指滑动的过程；3、@touchend：触摸结束，手指离开屏幕。<view class="margin-top-sm showMore-box" :style="{ transform: 'translateX('+moveX+'px)', transition: transition }" @touchstart="start"

2021-03-23 00:13:31 21968 7

原创数组根据去重

let jsonArr = [ { id: 1, name: '苹果', price: 3, }, { id: 2, name: '苹果', price: 5, }, { id: 3, name: '梨子', price: 6, }, { id: 4, name: '苹果', price: 5, }, { id: 5, name: '苹果', price: 5, }, { id: 6, name: '梨子', pr

2021-03-08 14:50:26 189 1

原创 [email protected]引入sass模块

vue @2.5.2 版本引入sass模块选装下面两个依赖：1、node-sass @4.14.12、sass-loader @7.3.1安装node-sass @4.14.1npm install [email protected]安装sass-loader @7.3.1npm i -D [email protected]

2021-01-29 16:18:03 201 2

原创 JavaScript CSS 线性进度条

JS CSS 进度条html<div id="show" class="show"> <div class="box"> <div class="line-box" id="line_box"> <div class="line" id="line"></div> </div> <div id="num" class="num">0%&lt

2020-12-26 16:04:04 269 1

原创 JavaScript Date() setDate() 时间的格式化加一天减一天

JavaScript Date() 时间的格式化与日期的增加减少格式化时间显示格式let newDateFun = function(date) { let date = new Date(date); // 将需要转换的时间参数传入Date() // 分别获取到你需要的时间对象年、月、日、时、分、秒、毫秒 let nian = date.getFullYear(); let yue = date.getMonth() > 8 ? date.getDate() + 1 : '0

2020-12-26 15:08:55 1152 1

转载安装Vue，创建一个Vue项目

安装Vue，创建一个Vue项目点这里看完整版

2020-09-21 16:39:12 58

转载 win10 定时关机

我只是大自然的搬运工——>链接在这里：https://jingyan.baidu.com/article/a501d80c58ab66ec630f5ebc.html

2019-11-12 16:57:22 252

转载 Flex布局

转自阮一峰老师：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

2019-11-11 09:15:09 193

原创 Ajax 请求方法 select 级联

一、创建Ajaxlet req = new XMLHttpRequest();二、发送请求 req.open('POST','asses/test/city.json',false);//发送请求 req.send();//将请求发送到服务器上open(method，ul，async)有三个参数；1、请求类型：GET和POST。2、请求文件的地址。3、true（异步）或 fal...

2019-11-07 17:45:23 269

转载 JavaScript数据结构和算法

前言在过去的几年中，得益于Node.js的兴起，JavaScript越来越广泛地用于服务器端编程。鉴于JavaScript语言已经走出了浏览器，程序员发现他们需要更多传统语言（比如C++和Java）提供的工具。这些工具包括传统的数据结构（如链表，栈，队列，图等），也包括传统的排序和查找算法。本文主要是总结什么情况下使用何种数据结构较好，并没有细讲里面的原理和实现方式，仅仅提供给阅读过《数据结构和...

2019-11-05 09:11:51 165

原创前端各类选择器介绍

详情点击链接：https://blog.csdn.net/qq_38110274/article/details/102882492

2019-11-04 17:00:59 1734

转载 JavaScript中数组操作方法汇总

Js中的数组操作方法我们在学习工作中，经常需要对数组和字符进行操作，但是操作方法多样，很容易忘记或者记混，这里，我对它们的操作方法的种类以及各自的应用做了相应的总结和代码演示，希望可以对你们有所帮助。数组操作方法一、对数组的简单操作主要分为三类，普通的增删改查，遍历、专用方法操作，下面，我会逐介绍并附上代码。普通的增删改查需要通过索引index来完成。我们先声明一个数组如下所示...

2019-11-04 16:37:19 495

原创 js进度条—模拟加载—画板

**js通过canvas来画图模拟进度条加载动画**html：<div style="height: 80px;width: 100%;position: relative;"> <div>模拟加载—>加载进度：<span id="num"></span></div> <span id="dtnum" ...

2019-11-04 10:39:22 416

原创时间 Date 循环计时器

时间 Date 循环计时器js时间对象与计时器的简单应用Date() 方法可返回当天的日期和时间使用时：let toDate = new Date();获取时间的几个方法：getFullYear(); //获取年getMonth(); //获取月getDate(); //获取日getDay(); //获取星期getHours(); //获取时getMinutes(); /...

2019-11-04 10:14:39 1184 1

DevilAngelia的博客

原创动态导入 modules 文件夹下的所有模块

原创页面全屏无限滚动切换图片