vue
从不讲道理
这个作者很懒,什么都没留下…
展开
-
vue项目中实现doc/excel/pdf/txt/图片等文件的预览
vue项目中实现doc/excel/pdf/图片等文件的预览原创 2023-11-28 13:43:57 · 2877 阅读 · 4 评论 -
mock.js的使用
mockjs的使用原创 2023-04-19 14:53:56 · 1316 阅读 · 0 评论 -
vue3+view-ui-plus中封装Message
vue3+view-ui-plus中封装Messageimport { Message } from 'view-ui-plus'const MessageSuccess = (text = '成功') => { Message.info({ content: text, duration: 10, background: true, closable: true });}const MessageError = (text = '错误') =>原创 2022-05-21 20:09:30 · 935 阅读 · 0 评论 -
vue3+view-ui-plus中封装全局loading
vue3+view-ui-plus中封装全局loadingimport { Spin } from 'view-ui-plus'// 将同一时刻的请求合并let needLoadingRequersCount = 0;export const showFullScreenLoading = function () { if (needLoadingRequersCount === 0) { Spin.show() } needLoadingRequersCount++}ex原创 2022-05-21 20:05:01 · 497 阅读 · 0 评论 -
vue3+view-ui-plus+tree组件实现自定义树形控件
vue3+view-ui-plus+tree组件实现自定义树形控件展示效果实现方式<template> <Tree :data="treeData" :render="renderContent"></Tree></template><script setup>let treeData = ref([ { id: '1', title: '1', expand: true, children:原创 2022-05-21 19:56:28 · 910 阅读 · 0 评论 -
使用vis绘制堆叠折线图并添加自定义时间,可随时间变化进行移动以及自定义图例功能
使用vis绘制堆叠折线图最终实现效果安装相关依赖包cnpm install -S vis-linetimecnpm install -S vis-datacnpm install -S moment组件中引入使用const moment = require('moment')import { DataSet } from 'vis-data/peer'import { Graph2d } from 'vis-timeline/peer'import 'vis-timeline/st原创 2022-05-16 15:02:17 · 652 阅读 · 0 评论 -
el-menu递归菜单展示
el-menu递归菜单展示<template> <div> <el-menu mode="vertical" background-color="#223958" text-color="#fff" active-text-color="#ffd04b" class="el-menu-vertical-demo"> <SidebarItem v-for="route in pe原创 2022-04-26 14:52:27 · 452 阅读 · 0 评论 -
使用vis-timeline绘制甘特图并实现时间轴的中文化
使用vis-timeline绘制甘特图并实现时间轴的中文化最终实现效果安装vis-timeline及相关依赖包cnpm install -S vis-linetimecnpm install -S vis-datacnpm install -S moment组件中引入使用// 国际化时间轴时必选在先引入moment在引入vis相关依赖包const moment = require('moment')import { DataSet } from 'vis-data/peer'imp原创 2022-04-26 10:51:04 · 1810 阅读 · 1 评论 -
vue中组件的数据已经发生更新,但是页面未发生更新
vue中组件的数据已经发生更新,但是页面未发生更新问题描述父组件通过请求拿到数据后,在父组件中对数据进行处理,处理完成后通过props传递给子组件进行渲染,此时在子组件中修改数据后,通过vue Devtools查看数据以及修改完成,但是页面并没有刷新。问题代码父组件代码// 父组件<template> <div> <dataUpdate :multipleTable="data"></dataUpdate> </div>原创 2020-08-16 11:55:27 · 6492 阅读 · 2 评论 -
使用vue开发的Excel数据分发工具项目总结
使用vue开发的Excel数据分发工具项目总结项目使用技术介绍项目采用的技术是vue+vuex+vue-router+elementUI,项目使用了vue-cli结合webpack进行创建和启动。项目功能介绍根据用户上传的Excel表格,选择需要拆分的字段,后台会将excel按照选择的字段拆分成多个excel,并提供下载地址,通知可根据上传的配置文件将拆分好的表格以邮件附件的形式发送给指定的人员。项目开发总结1.vuex中state多层数据的简写(使用函数的方式获取state)背景介原创 2020-06-04 16:39:21 · 350 阅读 · 1 评论 -
使用vue-cli搭建的项目在配置less提示“ loaderContext.getResolve is not a function”
使用vue-cli搭建的项目在配置less提示“ loaderContext.getResolve is not a function”问题描述在使用vue cli创建的webpack项目中,想配置less预处理,在配置完成后出现“ loaderContext.getResolve is not a function”报错信息,具体如下。问题产生原因安装的less版本过高,less、less-loader版本如下。解决方法在package.json文件中直接修改less的版本号,并重新npm原创 2020-05-16 11:59:55 · 1382 阅读 · 0 评论 -
vue : 无法加载文件 C:\Users\XXX\AppData\Roaming\npm\vue.ps1,因为在此系统上禁止运行脚本
使用vue创建项目时出现命令行报错问题描述在已安装vue及vue-cli的情况下,在命令行中使用vue创建新项目时提示如下报错信息,导致项目无法正常创建。vue : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\vue.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 http://go.microsoft.com/fwli...原创 2020-04-08 16:13:32 · 2085 阅读 · 0 评论 -
vuex的学习总结
vuex的学习总结安装和使用安装vuexnpm install vuex --save使用在项目根目录下的src文件夹中新建store文件夹,同时新建index.js文件,编写index.js文件如下import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);const store = new Vuex.S...原创 2020-03-30 12:20:56 · 154 阅读 · 0 评论 -
日期格式化方法
前端日期格式化方法引入date.js文件/** * date格式化 : 将数据库中的date格式转化为日常查看模式 */export default { format (date, fmt) { let nowDate = new Date(date) let o = { 'M+': nowDate.getMonth() + 1, // 月份 ...原创 2020-01-03 09:48:55 · 440 阅读 · 0 评论 -
vue项目中使用elementUI的tab组件切换时动态加载自定义组件
vue项目中使用elementUI的tab组件切换时动态加载自定义组件<template> <div class="home-tabs"> <el-tabs v-model="ActiveName" @tab-click="handleTabsChange"> <el-tab-pane ...原创 2020-01-02 15:43:53 · 5931 阅读 · 4 评论 -
前端开发实现的前台分页
前端开发实现的前台分页、搜索功能技术类型vue请求的数据格式父组件的代码<script>import axios from 'axios'import date from '@/utils/date.js'import Search from '../compontents/Search'import Pagination from '../compontents/P...原创 2020-01-02 15:32:40 · 257 阅读 · 0 评论 -
在vue项目中引入ElementUI
在vue项目中引入ElementUI安装ElementUI:cnpm i element-ui -S完整引入在 main.js 中写入以下内容:import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);在组件中使用ElementUI...原创 2020-01-02 15:18:30 · 279 阅读 · 0 评论 -
vue项目中实现Json数据的合法化与序列化校验
vue项目中实现Json数据的合法化与序列化校验功能描述对json数据进行格式美化以及json格式是否正确的验证代码展示<template> <div class="jsonValide"> <el-form-item label="配置文件"> <el-input t...原创 2020-01-02 15:15:58 · 2995 阅读 · 0 评论 -
在vue项目中修改elementUI的组件样式
在vue项目中修改elementUI的组件样式使用 >>> 操作符<style lang="stylus" scoped>.a >>> .b { /* ... */ }</style>使用 /deep/ 或 ::v-deep 操作符<style lang="less" scoped>.a{ /deep/ .b...原创 2020-01-02 15:04:34 · 1103 阅读 · 0 评论 -
解决vue项目中出现的console报错问题
解决vue项目中出现的console报错问题问题描述在vue项目中,使用console.log输出是总是会报错使用如下:控制台报错如下:页面报错如下:vue项目中使用的版本如下(package.json文件):产生原因:ESLint代码规范抛出的错误。解决方法:方法一:使用window.console.log()替换console.log()方法进行输出。使用方法如下...原创 2019-11-26 14:30:22 · 5567 阅读 · 1 评论 -
在vue项目中使用js动画库velocity
在vue项目中使用js动画库velocity在vue中通过js实现动画在vue中通过js实现动画使用的是vue提供的动画钩子函数。before-enter:入场动画还未开始执行时enter:入场动画开始执行after-enter:入场动画执行结束before-leave:出场动画还未开始执行时enter:出场动画开始执行after-leave:出场动画执行结束<te...原创 2019-11-26 12:11:46 · 709 阅读 · 0 评论 -
在vue项目中使用animate.css
在vue项目中使用animate.css第一步:安装cnpm install animate.css --save第二步:引用并使用在main.js中引用并使用import Vue from 'vue'import App from './App.vue'import animate from 'animate.css'Vue.config.productionTip = fa...原创 2019-11-25 14:17:24 · 1686 阅读 · 1 评论 -
父子组件之间的传值总结
父子组件之间的传值总结父组件给子组件传值:v-bind:属性名=属性值父组件<template> <div class="todolist"> <ul> <TodoItem v-bind:contentItem="item" v-bind...原创 2019-11-12 09:31:21 · 181 阅读 · 0 评论 -
谷歌浏览器使用vue.js devtools所遇到的问题
谷歌浏览器使用vue.js devtools所遇到的问题问题一:安装插件之后打开vue编码的页面发现vue devtools不可用并出现以下错误提示Vue.js not detected解决方法1,打开Bilibili,(B站是使用vue开发的),如果此时图标变绿说明vue.js devtools此插件是可用的。2,在扩展程序管理中选中vue dextools插件点击详情信息进入修改如...原创 2019-11-07 09:41:10 · 2777 阅读 · 1 评论