vue
vue
前端老实人灬
吾尝终日而思矣,不如须臾之所学也;
展开
-
element ui input限制只能输入数字
input只能输入数字原创 2022-06-22 15:36:52 · 244 阅读 · 0 评论 -
pinia 配置教程
Pinia.js 是新一代的状态管理器,由 Vue.js团队中成员所开发的,因此也被认为是下一代的 Vuex,即 Vuex5.x,在 Vue3.0 的项目中使用也是备受推崇。Pinia.js 有如下特点:完整的 typescript 的支持;足够轻量,压缩后的体积只有1.6kb;去除 mutations,只有 state,getters,actions(这是我最喜欢的一个特点);actions 支持同步和异步;没有模块嵌套,只有 store 的概念,store 之间可以自由使用,更好的代码分割原创 2022-05-24 16:56:09 · 481 阅读 · 0 评论 -
axios取消接口操作
// 发送axios接口 let fileList = this.restfileList fileList.forEach((item, index) => { setTimeout(() => { let notifyKey = 'q' + nanoid() //生成唯一的id window.sessionStorage.setItem("cancelAxiosId", notifyKey)// 存浏览器session里面,请求拦截器用原创 2022-03-11 10:57:47 · 323 阅读 · 0 评论 -
vue hook 使用
用途一:在同一个组件中如何监听实例的某个生命周期,并执行相应的操作?简单语法如下: this.$on/$once('hook:生命周期',callback)除了文档中的例子,我们最常用到的是定时器的使用与销毁。export default{ data(){ timer:null }, mounted(){ this.timer = setInterval(()=>{ //具体执行内容 console.log('1'); },原创 2022-02-21 10:21:07 · 2028 阅读 · 0 评论 -
vue项目,在.js文件中使用element ui
import Vue from 'vue';import ElementUI from 'element-ui'; //Message 消息提示ElementUI.Message({ message: '恭喜你,这是一条成功消息', type: 'success'});//Notification 通知ElementUI.Notification({ title: '警告', message: '这是一条警告的提示消息', type: 'warning'原创 2022-01-12 17:41:31 · 1872 阅读 · 1 评论 -
vue生成环境开发环境配置
process.env.NODE_ENV 监听当前是生成环境还是开发环境process.env.NODE_ENV==='development'// 开发环境.env 默认全局配置文件.env.development 开发环境配置文件.env.production 生产环境配置文件 文件名为Vue的约定,不可随意更改 配置环境变量格式 VUE_APP_{自定义环境变量名} = {值} 其中“VUE_APP_”是规定的环境变量名前缀,如果变量名不是以此开头,则在程序中不能调用此环境变原创 2022-01-12 11:20:46 · 623 阅读 · 0 评论 -
升级node.js版本之后,node-sass 启动vue项目报错: PostCSS received undefined instead of CSS string
解决 Syntax Error: Error: PostCSS received undefined instead of CSS string解决方法卸载当前版本的node-sass和sass-loader,因为版本和当前的不兼容,安装对应版本的包即可。#卸载node-sas和sass-loadernpm uninstall node-sassnpm uninstall sass-loader安装其他版本#安装node-sas和sass-loadernpm install node-sa原创 2022-01-10 13:10:21 · 2947 阅读 · 0 评论 -
vue element-ui按需加载,安装完成后项目启动报错Error: Cannot find module ‘babel-preset-es2015‘
项目使用vue cli3脚手架工具构建按照element 官方文档中所示。npm install babel-plugin-component -D然后添加.babelrc文件{ "presets": [["es2015", { "modules": false }]], "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName":原创 2021-12-01 08:52:47 · 965 阅读 · 0 评论 -
vue双击实现编辑功能
<template> <div> <el-tree :data="data" show-checkbox node-key="id" default-expand-all :expand-on-click-node="false"> <span class="custom-tree-node" slot-scope="{ n原创 2021-10-21 18:36:43 · 3693 阅读 · 0 评论 -
element ui 上传文件组件,可以选中文件夹并上传文件夹内所有文件
<template> <el-upload class="upload-demo" action="#" :on-remove="fileRemoveHandle4" :on-change="fileChangeHandle4" accept="" :auto-upload="false" multiple原创 2021-09-29 16:01:18 · 5087 阅读 · 3 评论 -
使用 markdown-it-vue加载 .md文件
安装 cnpm i markdown-it-vue使用<template> <div class="md-content"> <markdown-it-vue class="md-body" :content="htmlMD"/> </div></template><script>import axios from 'axios';import MarkdownItVue from 'ma原创 2021-09-26 11:06:04 · 828 阅读 · 0 评论 -
element ui框架上传文件去掉文件动态切换的效果
.upload-demo { display: flex; } /deep/ .el-list-enter-active, /deep/ .el-list-leave-active { transition: none; } /deep/ .el-list-enter, /deep/ .el-list-leave-active { opac..原创 2021-09-24 19:45:36 · 363 阅读 · 0 评论 -
vue使用递归实现多级目录数
APP.vue:<template> <div id="app"> <FilePathTree></FilePathTree> </div></template> <script>import FilePathTree from "@/components/FilePathTree.vue";export default { name: "Aside", dat.原创 2021-08-06 17:08:19 · 944 阅读 · 0 评论 -
vue修改:after伪元素样式
<template> <div class="test"> <span :style="spanStyle" class="span1">hello world</span> <br> <span :style="{'--width': widthVar}" class="span2">hello earth</span> </div></t原创 2021-08-02 15:33:05 · 2648 阅读 · 3 评论 -
vuePress项目搭建及配置
参考链接1: https://www.cnblogs.com/softidea/p/10084946.html.参考链接2: https://www.jianshu.com/p/2ac5727947cd.demo代码地址:https://gitee.com/wk1255315430/vue-press-demo.git搭建创建项目文件夹mkdir vuepressBlogDemo全局安装 VuePress// An highlighted blocknpm install -g v原创 2021-07-31 18:44:38 · 890 阅读 · 0 评论 -
element-plus 问题整理
目录1.引入中文2.form表单验证1.引入中文1.修改vite.config.js配置,添加optimizeDepsconst path = require('path')export default function () { return { optimizeDeps: { include: ["element-plus/lib/locale/lang/zh-cn"], }, }}在main.js中引入impo原创 2021-07-28 10:10:39 · 764 阅读 · 0 评论 -
vue3.x实践经验-1、mapState、mapGetters、mapMutations、mapActions
链接: https://blog.csdn.net/weixin_41364246/article/details/117572374.转载 2021-07-28 09:47:03 · 465 阅读 · 0 评论 -
vue3.0 知识点整理
vue3.0 知识点整理Composition API1.setup2.ref3.reactive(优化)4.toRefs(再次优化)Composition API1.setup新的option, 所有的组合API函数都在此使用, 只在初始化时执行一次函数如果返回对象, 对象中的属性或方法, 模板中可以直接使用2.ref作用: 定义一个数据的响应式语法: const xxx = ref(initValue):创建一个包含响应式数据的引用(reference)对象js中操作数据: xxx.原创 2021-07-09 15:05:43 · 417 阅读 · 0 评论 -
vue组件之间的消息传递
vue组件之间的消息传递父子组件之间的消息传递1.props和$emit2. $parent和 $children3.v-model兄弟组件之间的消息传递1.中央事件总线 Vue-bus隔代组件(子孙组件)之间的消息传递1.$attrs和 $listeners2.provide和injectvuex处理组件之间的数据交互props和$emit(常用)props和$emit(常用)attrs和attrs和attrs和listeners中央事件总线(非父子组件间通信)v-modelprovide和原创 2021-07-09 14:12:42 · 302 阅读 · 2 评论 -
vue-cookies
安装vue-cookies npm install vue-cookies --save 引入vue-cookies import Vue from 'vue' import VueCookies from 'vue-cookies' Vue.use(VueCookies) -设置全局配置,设置cookie过期时间和url this.$cookies.config(expireTimes[,path]) ...原创 2021-07-02 10:39:52 · 252 阅读 · 0 评论 -
vue中如何使用better-scroll滚动插件实现横向拖动
npm install better-scroll --save<template> <div class="mapLine"> <!-- 时间 --> <div class="time-content" v-show="timeShowFlag" :class="[ 'left-content',原创 2021-06-23 19:45:21 · 868 阅读 · 0 评论 -
vue element 使用el-image-viewer预览图片
<template> <el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="viewerImgList" /></template><script> import ElImageViewer from "element-ui/packages/image/src/image-viewer"; export default {原创 2021-06-23 19:05:13 · 1218 阅读 · 0 评论 -
element ui时间选择器添加时间标注
<el-date-picker v-model="formData.registerDate" type="date" :picker-options="customPickerOptions" popper-class="el-date-picker-custom" @focus="initCustomDate" placeholder="选择日期"></el-date-picker>.原创 2021-05-27 10:26:32 · 1237 阅读 · 2 评论 -
vue路由跳转打开新页面
let routeUrl = this.$router.resolve({ path:"/index/oneStop", query: { companyName: "名称", } }); window.open(routeUrl.href, '_blank');原创 2021-04-02 15:16:07 · 1094 阅读 · 0 评论 -
vue watch监听数据变化
watch: { num: { // 数据发生变化就会调用这个函数 handler(newVal, oldVal) { console.log('oldVal:', oldVal) console.log('newVal:', newVal) }, // 立即处理 进入页面就触发 immediate: true, deep.原创 2021-04-02 14:30:23 · 875 阅读 · 0 评论 -
解决使用Vue-SuperSlide插件获取数据后没滚动效果问题
解决思路,获取数据后使用v-if 重新渲染一遍dom,插件会重新初始化<superslide :options="options1" v-if="superShow"> <div class="superslide-box1"> <div class="company-item" v-for="(item,index) in mlList" :key="index"> <div class="name">原创 2021-04-02 14:23:09 · 785 阅读 · 0 评论 -
使用addRoutes动态添加路由
登录是获取添加的路由,存在vuex中login.vue import {initRoutes} from "@/router/index.js"; // 按需引入路由的动态注入方法 //获取要添加的路由let navList = [ { module: "system", children: [ { id: 1, path: "/system/marketTopics", ico原创 2021-03-29 16:21:30 · 9347 阅读 · 0 评论 -
vue路由守卫
全局守卫:router.beforeEach((to,from,next)=>{ console.log(to); console.log(from); next(); })router.afterEach((to,from)=>{ //这里不接收next console.log(to); console.log(from);})路由独享的守卫:beforeEnter:(to,from,next)=>{}组件内的守卫: bef原创 2021-03-25 18:42:30 · 69 阅读 · 0 评论 -
解决 Vue 重复点击相同路由,出现 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation错误
问题描述:重复点击导航时,控制台出现报错 ,解决方案:方案一:只需在 router 文件夹下,添加如下代码:// src/router/index.jsVue.use(Router)const router = new Router({ routes}) const VueRouterPush = Router.prototype.pushRouter.prototype.push = function push (to) { return VueRouterPush.call(t原创 2021-03-25 18:37:00 · 368 阅读 · 0 评论 -
Vuex整理
store文件夹下index.js:import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { count: 0 }, mutations: { //不能执行异步操作,修改state add(state) { state.count++ }, addN(state, step) { state.count += step }原创 2021-03-23 17:34:29 · 68 阅读 · 0 评论 -
vue项目生成二维码qrcodejs2
步骤:1、安装qrcodejs2插件,在控制台输入:npm install qrcodejs2 --save*注意:这里安装的是qrcodejs2,不是qrcode,否则会报错2、页面引入——在入口文件(默认是main.js)里引入:import QRCode from 'qrcodejs2'3、页面展示①:在对应的Html页面中,添加html标签<div id="qrcode" ref="qrcode"></div>在组件script中import QRC原创 2021-03-23 11:15:55 · 388 阅读 · 0 评论 -
vue拖拽组件 vuedraggable 实现拖拽功能
vue拖拽克隆clone组件API, vue.draggable实现盒子之间相互拖拽排序克隆(网上资源整理的文档)效果图:首先需要安装vuedraggable依赖包:npm install vuedraggable --save因为拖拽组件依赖sortablejs ,如果项目没有安装sortablejs ,可能需要安装一下npm install sortablejs --save复制vue html代码到项目:<template> <div class="dndLi转载 2021-03-23 11:05:26 · 2300 阅读 · 3 评论 -
在vue中使用animate.css
链接: https://animate.style/.第一步:安装:在命令行中执行:npm install animate.css --save第二步:引入及使用:main.js中:import ‘animate.css’ // npm install animate.css --save安装,在引入使用:vue模板中:<div class="ty"><!-- 直接使用animated中的动画class名,注意:必须使用animate__animated这个class名原创 2021-03-05 14:20:26 · 183 阅读 · 0 评论 -
vue项目中使用md5加密
npm安装:npm install --save js-md51.在需要使用的项目文件中引入:import md5 from 'js-md5';使用:md5('holle') // bcecb35d0a12baad472fbe0392bcc0432.或者在main.js文件中将md5转换成vue原型:import md5 from 'js-md5';Vue.prototype.$md5 = md5;在需要用到的文件中使用:this.$md5('holle') // bcecb3原创 2021-03-02 10:18:42 · 145 阅读 · 0 评论 -
使用vue-bus解决兄弟组件之间的消息传递
1、安装npm install vue-bus --save2、注册在main.js中注册import Vue from 'vue';import VueBus from 'vue-bus';//中央事件总线...Vue.use(VueBus);…3、使用A页面传递给B也页面:A页面中,触发了一个叫toBPage的事件,并传递了参数’hello world!’methods: { toBPage(){ this.$bus.emit('bPage', 'hello w原创 2021-02-25 09:25:14 · 106 阅读 · 0 评论 -
vue插件Vue-SuperSlide轮播
Vue-SuperSlideVue-SuperSlide(Github) 是 SuperSlide 的 Vue 封装版本,API 配置及使用方法与 SuperSlide 几乎一致,让你能够便捷的在 Vue 工程中使用 SuperSlide。简介关于 SuperSlide 的详细介绍可以到 SuperSlide 官方网站 - 大话主席 进行查看。大话主席的 SuperSlide 是多年以前前端还处于 jQuery 时代我使用的最多的一个插件,它帮我解决了网页中大部分的文字、图片切换轮播等问题,用起来的原创 2020-10-22 11:17:48 · 2319 阅读 · 1 评论 -
vue插件qs
关于Vue中,序列化字符串,处理发送请求的参数使用工具qs来处理参数步骤:1、首先先下载:npm i qs 2、然后引入 :import qs from 'qs'3、qs主要有两个方法 :方法一:将对象序列化,多个对象之间用&拼接(拼接是由底层处理,无需手动操作)qs.stringify() 转换成查询字符串let comments = {content: this.inputValue}let comValue = qs.stringify(comments)方原创 2020-10-22 11:19:59 · 351 阅读 · 0 评论 -
Vue插件使用NProgress
NProgress是页面跳转是出现在浏览器顶部的进度条官网:http://ricostacruz.com/nprogress/github:https://github.com/rstacruz/nprogress安装$ npm install --save nprogress 或者$ yarn add nprogress//用法NProgress.start();NProgress.done();使用复制代码//导入import NProgress from 'nprogres原创 2020-10-22 11:23:38 · 88 阅读 · 0 评论 -
vue中使用自适应的postcss-plugin-px2rem插件
flexiblenpm install lib-flexible --save在lib文件夹下建立flexible.js文件 ,flexible.js代码如下// An highlighted block;(function(win, lib) { var doc = win.document; var docEl = doc.documentElement; var metaEl = doc.querySelector('meta[name="viewport"]');原创 2021-02-25 09:18:04 · 1343 阅读 · 0 评论 -
vue路由传参
先有如下场景 点击当前页的某个按钮跳转到另外一个页面去,并将某个值带过去<div class="examine" @click="insurance(2)">查看详情</div>第一种方法 页面刷新数据不会丢失methods:{ insurance(id) { //直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/particulars/${id}`,原创 2020-10-08 13:34:43 · 174 阅读 · 0 评论