vue.js
关注
分享
扫一扫
天使的同类
代码没写完，哪有脸睡觉
展开
-
vue3使用Ant-Design组件a-table表格实现多层表头及合并单元格
vue3使用Ant-Design组件a-table表格实现多层表头及合并单元格原创 2024-05-21 14:35:19 · 1252 阅读 · 1 评论 -
html2canvas保存图片
html2canvas保存图片原创 2024-03-04 17:57:58 · 1130 阅读 · 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 · 3583 阅读 · 0 评论 -
echarts柱状图实现排序且点击之后动态改变柱子颜色
【代码】echarts柱状图实现排序且点击之后动态改变柱子颜色。原创 2023-03-07 17:24:48 · 1898 阅读 · 1 评论 -
图片地址自检是否损坏或无效
【代码】图片地址自检是否损坏或无效。原创 2023-02-21 14:35:44 · 429 阅读 · 0 评论 -
实现vue项目可通过 IP 和 localhost
实现vue项目可通过 IP 和 localhost 同时访问项目原创 2023-02-01 10:28:03 · 1418 阅读 · 0 评论 -
vue项目中引用Echarts图表及遇到的问题
vue引用echarts图表及问题解决方法原创 2023-01-29 17:37:42 · 474 阅读 · 0 评论 -
uniapp中动态修改导航栏标题
代码】uniapp中动态修改导航栏标题。原创 2022-08-02 11:35:02 · 7555 阅读 · 6 评论 -
uniapp路由跳转的六种方式
uniapp路由跳转的六种方式。原创 2022-07-20 14:06:17 · 26199 阅读 · 2 评论 -
uniapp 使用本地存储实现页面间的传值
代码】uniapp使用本地存储实现页面间的传值。原创 2022-07-19 17:44:24 · 450 阅读 · 0 评论 -
解决uni-app小程序获取路由及路由参数
代码】解决uni-app小程序获取路由及路由参数。原创 2022-07-19 10:18:00 · 8309 阅读 · 0 评论 -
uniapp+vue实现元素上下互换位置
代码】uniapp+vue实现元素上下互换位置。原创 2022-07-15 16:25:19 · 1166 阅读 · 0 评论 -
uniapp小程序分包
分包原因：由于微信小程序包总体积不能超过2M，这时就需要把代码进行分包处理。主包：即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据pages.json的配置进行划分。分包后的每个分包的大小是2M以内，总体积一共不能超过20M。subPackages：分包加载配置，此配置为小程序的分包加载机制，详细请参考uniapp官网分包机制项目目录结构如下：需要在 pages.json 中进行代码分包处理：preloadRule：配置preloadRule后，在进入小原创 2022-07-01 15:41:36 · 555 阅读 · 0 评论 -
uniapp实现图片（单张/多张）预览
uniapp实现图片（单张/多张）预览一、单张预览二、多张预览效果图：预览We’re not put on this Earth to think of only ourselves原创 2022-06-24 14:03:24 · 1176 阅读 · 0 评论 -
uniapp背景色跟随轮播图改变 vue
背景色跟随轮播图改变在看酒便利小程序时，看他的首页轮播效果挺好的，于是就模仿了一下，啥也不说，上代码：最终效果：录屏原创 2022-06-24 09:51:09 · 1278 阅读 · 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 · 5693 阅读 · 2 评论 -
vue+echarts实现多个仪表盘图表
vue+echarts实现多个仪表盘图表根据echarts官网单个仪表盘修改成多个仪表盘，代码如下：如图所示：原创 2022-06-16 16:57:23 · 1324 阅读 · 1 评论 -
Element日期组件结束时间大于开始时间
Element日期组件结束时间大于开始时间HTML：JS：效果如图：一、选过开始日期，则大于开始日期的时间可选二、选过结束日期，则小于结束日期的时间可选原创 2022-06-07 10:34:01 · 2620 阅读 · 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 · 1266 阅读 · 0 评论 -
记录Object.assign使用
记录Object.assign使用原创 2022-05-31 11:31:58 · 475 阅读 · 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 · 2732 阅读 · 0 评论 -
vue实现瀑布流
vue实现瀑布流1.定义页面上是一种 参差不齐 的多栏布局，类似上图所示随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部，大部分为图片，图片 固定 宽度，高度 不一，根据原比例缩放到宽度达到固定的要求，每行排满后，新的图片添加到后面2.特点固定宽度，高度不一岑参不齐的布局以图片为主3.优点节省空间：降低页面的复杂对于 触屏设备非常友好：通过向上滑动浏览，交互方式更符合直觉良好的视觉体验：浏览时不会被页面整整齐齐的高度影响，参差不齐，降低浏览的疲劳4.缺点内原创 2022-05-16 15:01:14 · 434 阅读 · 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 · 2917 阅读 · 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 · 4345 阅读 · 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 · 592 阅读 · 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 · 1126 阅读 · 0 评论 -
vue中的防抖和节流
vue中的防抖和节流防抖：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。使用场景：频繁触发、输入框搜索因为防抖的特性，一直执行最后一次的触发，所以可以用于鼠标移动确定最后一次移动的时候的坐标位置。<template> <div> <input type='text' v-model='value' @keydown = "hangleChange"> </div></template>&l原创 2022-03-31 15:25:00 · 1719 阅读 · 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 · 703 阅读 · 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 · 1056 阅读 · 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 · 412 阅读 · 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 · 143 阅读 · 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 · 204 阅读 · 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 · 3858 阅读 · 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 · 4726 阅读 · 2 评论 -
Ant—Design下拉选择器自带搜索功能
Ant—Design下拉选择器自带搜索功能HTML：<a-form-model-item label="赠品：" style="margin-top:20px"> <a-select placeholder='请选择赠品' :filterOption="filterOption" show-search @change="filterGift"> <a-select-option v-for="(item,index) in giveawayList" :key原创 2021-06-24 09:14:06 · 1379 阅读 · 4 评论 -
Vue + Ant 级联选择
Vue + Ant 级联选择HTML：<a-cascader style="width: 200px" :options='categoryTree' :fieldNames='fieldName' @change='onChangeCategory' placeholder="请选择分类" />JS：export default { name: 'AddPresent', data () { return { categoryTree : [],原创 2021-06-08 13:48:58 · 910 阅读 · 0 评论 -
Vue+Ant树形结构
Vue+Ant树形结构HTML: <a-tree :tree-data="cateTree" :replaceFields="replaceFields" defaultExpandAll></a-tree>JS:export default { name: 'ProductCategory', data () { return { cateTree: [], replaceFields: { child原创 2021-06-08 13:39:07 · 485 阅读 · 1 评论 -
给DIV添加active样式 VUE
给DIV添加active样式 VUEHtml <div class="templateContainer"> <a-Card :class="{ active: index === currentIndex }" v-for="(item,index) in mallList" :key="index" @click="checkTemplate(index)"> <img class="templateImg" src="@/原创 2021-05-28 15:12:12 · 3659 阅读 · 0 评论 -
Ant 表格行编辑 VUE
Ant 表格行编辑 VUE<template> <a-table :columns="columns" :data-source="data" bordered> <template v-for="col in ['keyJA', 'valueJA']" :slot="col" slot-scope="text, record, index" > <div :key="col">原创 2021-05-28 11:13:27 · 342 阅读 · 0 评论 -
表格序号Index自增且累加
vue 实现自定义序号， 并且翻页序号累加第一种：<template> <el-table ref="singleTable" :data="tableData" highlight-current-row @current-change="handleCurrentChange" style="width: 100%"> <el-table-column type="index" width="5原创 2021-02-18 15:15:09 · 899 阅读 · 0 评论