- 博客(80)
- 收藏
- 关注
RSS订阅原创 vue实现瀑布流
每个色块宽度一致，高度自适应<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="renderer" content="webkit"> <meta name="viewport" content="user
2024-01-31 17:55:10
2762
原创 uniapp小程序分包
分包原因：由于微信小程序包总体积不能超过2M，这时就需要把代码进行分包处理。主包：即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据pages.json的配置进行划分。分包后的每个分包的大小是2M以内，总体积一共不能超过20M。subPackages：分包加载配置，此配置为小程序的分包加载机制，详细请参考uniapp官网分包机制项目目录结构如下：需要在 pages.json 中进行代码分包处理：preloadRule：配置preloadRule后，在进入小
2022-07-01 15:41:36
470
原创 uniapp实现图片（单张/多张）预览
uniapp实现图片（单张/多张）预览一、单张预览二、多张预览效果图：预览We’re not put on this Earth to think of only ourselves
2022-06-24 14:03:24
987
原创 uniapp背景色跟随轮播图改变 vue
背景色跟随轮播图改变在看酒便利小程序时，看他的首页轮播效果挺好的，于是就模仿了一下，啥也不说，上代码：最终效果：录屏
2022-06-24 09:51:09
1081
5
原创 使用hbuilder X创建uniapp项目
使用hbuilder X创建uniapp项目一、打开hbuilder X软件，左上角 文件-新建-项目，如图：二、在弹窗内，填写项目名称，选择你自己需要的项目案例，可根据自己需求选择vue版本2/3，如图：三、这时你的项目已经创建好了，自动由hbuilderX打开，项目大致文件内容如图：四、设置底部导航跳转，打开pages.json文件（pages是路由跳转地址，tabBar是配置底部导航栏），如果顶部导航想要添加相应的按钮图标，可添加‘app-plus’配置，这里的‘fontSrc’图标来自阿里，下
2022-06-21 10:23:52
5376
2
原创 vue+echarts实现多个仪表盘图表
vue+echarts实现多个仪表盘图表根据echarts官网单个仪表盘修改成多个仪表盘，代码如下：如图所示：
2022-06-16 16:57:23
1150
1
原创 Element日期组件结束时间大于开始时间
Element日期组件结束时间大于开始时间HTML：JS：效果如图：一、选过开始日期，则大于开始日期的时间可选二、选过结束日期，则小于结束日期的时间可选
2022-06-07 10:34:01
2419
原创 Math的方法使用
Math的方法使用1、Math.random()：方法可返回介于 0（包含） ~ 1（不包含） 之间的一个随机数。2、Math.floor()：方法返回小于等于x的最大整数（向下取整）。如果传递的参数是一个整数，该值不变。3、Math.ceil()：方法可对一个数进行上舍入(向上取整)。如果参数是一个整数，该值不变。4、Math. abs()：方法可返回一个数的绝对值。5、Math.round()：方法可把一个数字舍入为最接近的整数。6、Math.pow()：方法返回 x 的 y 次幂。7、Ma
2022-06-02 09:20:40
997
原创 同一页面多次引用同一组件
同一页面多次引用同一组件实现日期默认值需求：在一个页面内引入两次form表单组件，在tab切换时，tab1默认近一周的日期，tab2默认近一个月的日期子组件：<template> <div> <el-form :inline="true" :model="form" class="demo-form-inline"> <el-form-item> <el-select v-model="form.time"&
2022-05-18 10:03:29
2484
原创 vue实现瀑布流
vue实现瀑布流1.定义页面上是一种 参差不齐 的多栏布局，类似上图所示随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部，大部分为图片，图片 固定 宽度，高度 不一，根据原比例缩放到宽度达到固定的要求，每行排满后，新的图片添加到后面2.特点固定宽度，高度不一岑参不齐的布局以图片为主3.优点节省空间：降低页面的复杂对于 触屏设备非常友好：通过向上滑动浏览，交互方式更符合直觉良好的视觉体验：浏览时不会被页面整整齐齐的高度影响，参差不齐，降低浏览的疲劳4.缺点内
2022-05-16 15:01:14
383
原创 hover、focus、active、link、visited状态 CSS
hover、focus、active、link、visited状态 CSS这几个是按钮链接效果的样式属性，不同的排列顺序可能会有不同的展示效果，我们先来看他们分别是干嘛的link：控制未访问时的显示效果。hover：鼠标悬停和划过时的显示效果。visited：访问过后的显示效果。active：控制按钮被点击时的显示效果。focus：获得聚焦对象的元素，并设置聚焦时的显示效果。如果运用不起当，会出现失效的情况， 下面是这些属性使用时的先后顺序：link、visited、focus 、ho
2022-04-29 15:05:14
3249
原创 VUE实现折叠展开动画效果
VUE实现折叠展开动画效果第一种情况：从中间向两边展开效果（水平缩放）.input-search { position: absolute; bottom: 8px; right: 0px; width: auto; animation: mymove 0.5s infinite; animation-iteration-count: 1; border: none; .el-input__inner { border-radius: 4px 0 0 4px;
2022-04-26 16:45:28
2636
2
原创 vsCode vue项目老是报空格或分号警告的解决方法
vsCode vue项目老是报空格或分号警告的解决方法开发VUE项目的时候老是报以下错误，如图：修改之前的.eslintrc.js文件：module.exports = { root: true, parserOptions: { parser: 'babel-eslint' }, env: { browser: true, }, extends: [ 'plugin:vue/essential', 'standard' ], plu
2022-04-22 15:57:44
4004
原创 数字转换中文数目
数字转换中文数目在这里给大家介绍一个依赖插件：number-to-chinese-words第一步先安装依赖：npm i number-to-chinese-words引用依赖：var converter = require('number-to-chinese-words');1、toOrdinal(number)：将整数前面加上“第”字，如果输入的数字包含小数点，小数点后面的数目将会被移除。converter.toOrdinal(1); //第12、toWords(number)
2022-04-22 15:39:19
480
原创 css实现文字左右添加横线
css实现文字左右添加横线方法一、div标签实现HTML： <div class="thirdLine"> <span class="line"></span> <div class="txt"> <span>第三方登陆</span> </div> <span class=
2022-04-22 15:18:17
3845
原创 v-if 和 v-for 为什么不能连用
v-if 和 v-for 为什么不能连用v-if 和 v-for 不能连用，否则会造成一个性能浪费, 在 Vue2中 v-for的优先级高于 v-if，如果v-if的值为false时，v-for仍然会根据优先级进行渲染，这样就造成了一个资源浪费，如下所示：<template> <div> <div v-for = "(it, i) in getData" v-key="i" v-if="flag"> </div></tempalte>
2022-04-21 09:04:57
1065
原创 element表单账号密码篇
element表单账号密码篇一、el-input记住密码之后账号和密码，改变了背景颜色先看bug图片（背景设置的是透明色，但是记住密码之后账号和密码就自动加了背景色）：解决办法： .el-input { input { text-indent: 5px; background: transparent; border: none; border: 0px; -webkit-appearance: none; bord
2022-04-18 10:12:53
2089
原创 随机选择双色球彩票
随机选择双色球彩票彩票中不中无所谓，开心最重要了，反正我是没中过大于十块钱的彩票，哈哈哈哈<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wi
2022-03-31 16:14:46
258
原创 清除浮动的三种方法
清除浮动的三种方法添加新的元素，应用clear：both<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sc
2022-03-31 15:32:30
278
原创 vue中的防抖和节流
vue中的防抖和节流防抖：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。使用场景：频繁触发、输入框搜索因为防抖的特性，一直执行最后一次的触发，所以可以用于鼠标移动确定最后一次移动的时候的坐标位置。<template> <div> <input type='text' v-model='value' @keydown = "hangleChange"> </div></template>&l
2022-03-31 15:25:00
1644
原创 VUE路由传参方式
VUE路由传参方式第一种：用query传参HTML方式：<template> <div class="demo"> <router-link :to="{ path:"/userInfo"},query:{ id:id }"></router-link> <!-- 或者 --> <router-link :to="{ name:"userInfo"},query:{ id:id }"></rout
2022-03-31 15:07:26
631
原创 纯CSS绘制三角形
纯CSS绘制三角形<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t
2022-03-31 14:49:00
101
原创 Git 修改用户名以及提交邮箱
Git 修改用户名以及提交邮箱方法一：命令修改查看当前用户名、邮箱 git config user.name git config user.email更改成自己的用户名和邮箱（全局修改） git config --global user.name 你的用户名 git config --global user.email 你的邮箱名更改成自己的用户名和邮箱（当前项目） git config user.name 你的用户名 git config user.email 你
2021-12-02 17:32:18
751
原创 vue-countTo 数字滚动插件
vue-countTo 数字滚动插件npm 安装npm i vue-count-to代码块<template> <countTo :startVal="startVal" :endVal="endVal" :duration="3000"></countTo></template><script>import countTo from "vue-count-to";export default { components:
2021-11-12 13:44:49
1002
原创 vue中的插槽v-slot
vue中的插槽v-slot今天也是第一次真正用到过插槽这个知识点，下面就大概说下用法先来看看插槽模板：子组件（在子组件中定义slot标签，添加name属性）<template> <div> <slot name="header"></slot> //注意这里的name属性 </div></template>父组件（在父组件中使用template并写入对应的slot值来指定该内容在子组件中现实的位置）跟
2021-10-15 14:28:03
314
原创 数组去重 vue
数组去重 vue const arr = [1, 1, 2, 3, 4] const newArr = new Set(arr) const target = [...newArr] console.log(target) //[1,2,3,4]
2021-08-11 11:21:55
83
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人