vue.js
关注
分享
扫一扫
天使的同类
代码没写完，哪有脸睡觉
展开
-
可视化大屏全屏后重载echarts图表
问题：可视化大屏点击全屏之后，但echarts图表还是之前的大小，并没有撑满该容器，所以这时候我们需要全屏之后重新加载echarts图表内容。原创 2025-05-23 17:52:50 · 97 阅读 · 0 评论 -
可视化大屏实现全屏或非全屏
【代码】可视化大屏实现全屏或非全屏。原创 2025-05-23 17:46:11 · 184 阅读 · 0 评论 -
echarts之饼饼图
vue3+echarts实现饼状图原创 2025-05-23 17:38:17 · 70 阅读 · 0 评论 -
echarts之漏斗图
vue3+echarts实现漏斗图原创 2025-05-23 17:31:32 · 142 阅读 · 0 评论 -
echarts之双折线渐变图
vue3+echarts实现双折线渐变图原创 2025-05-23 17:25:42 · 197 阅读 · 0 评论 -
echarts之折线柱状图
vue3+echarts实现折线柱状图原创 2025-05-23 17:19:01 · 167 阅读 · 0 评论 -
vue3使用Ant-Design组件a-table表格实现多层表头及合并单元格
vue3使用Ant-Design组件a-table表格实现多层表头及合并单元格原创 2024-05-21 14:35:19 · 1686 阅读 · 1 评论 -
html2canvas保存图片
html2canvas保存图片原创 2024-03-04 17:57:58 · 1204 阅读 · 0 评论 -
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 · 3715 阅读 · 0 评论 -
echarts柱状图实现排序且点击之后动态改变柱子颜色
【代码】echarts柱状图实现排序且点击之后动态改变柱子颜色。原创 2023-03-07 17:24:48 · 2024 阅读 · 1 评论 -
图片地址自检是否损坏或无效
【代码】图片地址自检是否损坏或无效。原创 2023-02-21 14:35:44 · 480 阅读 · 0 评论 -
实现vue项目可通过 IP 和 localhost
实现vue项目可通过 IP 和 localhost 同时访问项目原创 2023-02-01 10:28:03 · 1464 阅读 · 0 评论 -
vue项目中引用Echarts图表及遇到的问题
vue引用echarts图表及问题解决方法原创 2023-01-29 17:37:42 · 539 阅读 · 0 评论 -
uniapp中动态修改导航栏标题
代码】uniapp中动态修改导航栏标题。原创 2022-08-02 11:35:02 · 7671 阅读 · 6 评论 -
uniapp路由跳转的六种方式
uniapp路由跳转的六种方式。原创 2022-07-20 14:06:17 · 26375 阅读 · 2 评论 -
uniapp 使用本地存储实现页面间的传值
代码】uniapp使用本地存储实现页面间的传值。原创 2022-07-19 17:44:24 · 484 阅读 · 0 评论 -
解决uni-app小程序获取路由及路由参数
代码】解决uni-app小程序获取路由及路由参数。原创 2022-07-19 10:18:00 · 8470 阅读 · 0 评论 -
uniapp+vue实现元素上下互换位置
代码】uniapp+vue实现元素上下互换位置。原创 2022-07-15 16:25:19 · 1256 阅读 · 0 评论 -
uniapp小程序分包
分包原因：由于微信小程序包总体积不能超过2M，这时就需要把代码进行分包处理。主包：即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据pages.json的配置进行划分。分包后的每个分包的大小是2M以内，总体积一共不能超过20M。subPackages：分包加载配置，此配置为小程序的分包加载机制，详细请参考uniapp官网分包机制项目目录结构如下：需要在 pages.json 中进行代码分包处理：preloadRule：配置preloadRule后，在进入小原创 2022-07-01 15:41:36 · 601 阅读 · 0 评论 -
uniapp实现图片（单张/多张）预览
uniapp实现图片（单张/多张）预览一、单张预览二、多张预览效果图：预览We’re not put on this Earth to think of only ourselves原创 2022-06-24 14:03:24 · 1264 阅读 · 0 评论 -
uniapp背景色跟随轮播图改变 vue
背景色跟随轮播图改变在看酒便利小程序时，看他的首页轮播效果挺好的，于是就模仿了一下，啥也不说，上代码：最终效果：录屏原创 2022-06-24 09:51:09 · 1356 阅读 · 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 · 5971 阅读 · 2 评论 -
vue+echarts实现多个仪表盘图表
vue+echarts实现多个仪表盘图表根据echarts官网单个仪表盘修改成多个仪表盘，代码如下：如图所示：原创 2022-06-16 16:57:23 · 1385 阅读 · 1 评论 -
Element日期组件结束时间大于开始时间
Element日期组件结束时间大于开始时间HTML：JS：效果如图：一、选过开始日期，则大于开始日期的时间可选二、选过结束日期，则小于结束日期的时间可选原创 2022-06-07 10:34:01 · 2710 阅读 · 0 评论 -
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 · 1354 阅读 · 0 评论 -
记录Object.assign使用
记录Object.assign使用原创 2022-05-31 11:31:58 · 529 阅读 · 0 评论 -
同一页面多次引用同一组件
同一页面多次引用同一组件实现日期默认值需求：在一个页面内引入两次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 · 2834 阅读 · 0 评论 -
vue实现瀑布流
vue实现瀑布流1.定义页面上是一种 参差不齐 的多栏布局，类似上图所示随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部，大部分为图片，图片 固定 宽度，高度 不一，根据原比例缩放到宽度达到固定的要求，每行排满后，新的图片添加到后面2.特点固定宽度，高度不一岑参不齐的布局以图片为主3.优点节省空间：降低页面的复杂对于 触屏设备非常友好：通过向上滑动浏览，交互方式更符合直觉良好的视觉体验：浏览时不会被页面整整齐齐的高度影响，参差不齐，降低浏览的疲劳4.缺点内原创 2022-05-16 15:01:14 · 455 阅读 · 0 评论 -
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 · 3019 阅读 · 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 · 4544 阅读 · 0 评论 -
数字转换中文数目
数字转换中文数目在这里给大家介绍一个依赖插件：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 · 768 阅读 · 0 评论 -
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 · 1149 阅读 · 0 评论 -
vue中的防抖和节流
vue中的防抖和节流防抖：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。使用场景：频繁触发、输入框搜索因为防抖的特性，一直执行最后一次的触发，所以可以用于鼠标移动确定最后一次移动的时候的坐标位置。<template> <div> <input type='text' v-model='value' @keydown = "hangleChange"> </div></template>&l原创 2022-03-31 15:25:00 · 1767 阅读 · 0 评论 -
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 · 723 阅读 · 0 评论 -
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 · 1083 阅读 · 0 评论 -
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 · 450 阅读 · 0 评论 -
数组去重 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 · 164 阅读 · 0 评论 -
按钮复制文字 vue
按钮复制文字 vueHTML：<p>{{productInfo.goodsTitle}}<a-icon type="copy" @click="copyTitle(productInfo.goodsTitle)" /></p>JS： copyTitle (text) { console.log(text) this.copyContent = text // 也可以直接写上等于你想要复制的内容 var input =原创 2021-07-16 15:01:58 · 222 阅读 · 0 评论 -
quill-editor 富文本编辑器使用及焦点巨坑
quill-editor 富文本编辑器使用及焦点巨坑一、npm安装依赖 npm install vue-quill-editor --save二、全局引用，项目入口文件中main.js引入，如下：import Vue from 'vue'import VueQuillEditor from 'vue-quill-editor'import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import 'quill/dis原创 2021-07-07 13:10:52 · 4013 阅读 · 2 评论 -
a-range-picker限制选择今天之前的时间和今天之后的时间
a-range-picker限制选择今天之前的时间和今天之后的时间antd的时间选择器做限制主要用到的参数是disabledDate ，下面我们看下案例：HTML：<a-date-picker :disabledDate="disabledDate"></a-date-picker> //最简单的写法这里要用到moment插件，大家自行下载， npm i momentJS：这里也分为好多种情况，下面逐一解释：一、限制只能选明天及之后的日期（今天不可选中）imp原创 2021-07-01 09:53:39 · 4875 阅读 · 2 评论