Vue.js
文章平均质量分 66
灯火暗
Q229970025
展开
-
vue-在style中使用data或props中的值
需求:给tips设置动态color方法1 动态style重复代码有一点点多~方法2 setProperty用ref给外层容器标记引用信息 <div class="banner_page" ref="bannerPage">在style中声明变量 .banner_page { --tipsColor: #f08b40; }在mounted给style中的变量赋值(注意:操作DOM的代码要放在mounted后) this.$refs.bannerPage.style.setProp原创 2020-12-11 17:25:59 · 4591 阅读 · 0 评论 -
Ant Design Vue自定义菜单图标时收起菜单文字不隐藏问题
问题:自定义菜单图标时收起菜单文字不隐藏问题代码:<a-menu-item v-for="item in memberMenu" :key="item.path"> <i :class="['iconfont', item.icon]" style="marginRight: 10px;fontSize:20px;"></i> <span class="">{{ item.title }}</span></a-menu-it原创 2020-09-01 16:55:31 · 4421 阅读 · 6 评论 -
NavigationDuplicated报错问题
问题:跳转至当前路由时报错:Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location解决:import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)// 解决NavigationDuplicated报错问题const originalPush = Router.prototype.push原创 2021-05-13 14:08:49 · 214 阅读 · 0 评论 -
antd之Layout和Menu
<template> <a-layout id="components-layout-demo-custom-trigger"> <a-layout-sider style="background: #fff" v-model="collapsed" :trigger="null" collapsible> <div class="logo"> <a-icon type="gitlab" style="fontSi原创 2021-03-10 10:24:18 · 1034 阅读 · 0 评论 -
Vue实现元素拖拽功能
注册指令directives: { drag: function (el) { let dragBox = el; dragBox.onmousedown = e => { //算出鼠标相对元素的位置 let disX = e.clientX - dragBox.offsetLeft; let disY = e.clientY - dragBox.offsetTop; document.onmouse.原创 2020-11-27 17:35:42 · 2311 阅读 · 4 评论 -
在vue项目中预览pdf文件
在vue中预览pdfvue-pdf安装vue-pdfnpm install --save vue-pdf// yarn add vue-pdf使用不分页<template> <div> <pdf v-for="i in numPages" :key="i" :src="pdfUrl" :page="i"> </pdf> </div></template><script>imp原创 2020-10-29 15:51:35 · 1975 阅读 · 3 评论 -
compute与watch和filter
compute与watch和filter1. 计算属性 computed模板中放入太多的逻辑会让模板过重且难以维护 使用计算属性可以让模板更加的简洁计算属性是基于它们的响应式依赖进行缓存的computed比较适合对多个变量或者对象进行处理后返回一个结果值,也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化<template> <div&g...原创 2020-05-06 14:18:18 · 421 阅读 · 0 评论 -
Vue之$nextTick的简单使用
nextTickJavaScript 运行机制详解基本使用<template> <div> <h3>Vue之NextTick</h3> <div ref="num">{{ num }}</div> <div>{{ num1 }}</div> <div&...原创 2020-04-30 17:04:44 · 125 阅读 · 0 评论 -
Vue之slot的基本使用
Slot一般情况下是酱紫的父组件// index.vue<template> <div> <slot-tmp> Error </slot-tmp> <hr> <slot-tmp> Warn </slot-tmp> </div></template>...原创 2020-04-30 14:43:14 · 212 阅读 · 0 评论 -
Vue之mixin的基本使用和特性
Mixin1. 基本使用创建mixin文件// mixin.jsexport const HelloMixin = { data () { return { num: 0 } }, methods: { hello () { console.log('hello from mixin') }, addNum () ...原创 2020-04-30 11:52:55 · 234 阅读 · 0 评论 -
Ant Design of Vue 定制主题
背景ant design of vue在 vue cli 3中定制主题文件目录文件antd-variable.less/*Write your variables here. All available variables can befound in https://github.com/vueComponent/ant-design-vue/blob/master/comp...原创 2019-09-12 10:50:52 · 2514 阅读 · 2 评论 -
Vue项目小经验
复制template<a-button type="primary" @click="copyUrl(item.response)">Copy URL</a-button>methodscopyUrl (shareLink) { var input = document.createElement('input') input.value = shareL...原创 2019-08-26 10:07:14 · 325 阅读 · 0 评论 -
Vue切换Tab动态渲染组件
使用<component :is="组件名"></component>结合Element-UI的导航菜单 :UI组件el-menu-item里的index写对应的组件名点击事件@select="handleSelect"<el-menu :default-active="activeIndex" class="el-menu-demo" mode="...原创 2019-08-14 17:01:58 · 6186 阅读 · 2 评论 -
安装vue-cli3.x并快速创建项目
准备工作安装node.jsVue的脚手架是依赖于node.js的在node.js官网下载npmnode package managernpm是node的包管理工具查看版本安装卸载旧版本(1.x或2.x)npm un vue-cli -g安装3.x版本npm install -g @vue/cli查看 vue -V(大写V)安装webpacknp...原创 2019-05-11 22:51:43 · 262 阅读 · 0 评论 -
VUE之组件
1. 定义Vue组件组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可;组件化和模块化的不同:模块化: 是从代码逻辑的角度进行划分的;方便代码分层开发,保证每个功能模块的职能单一;组件化: 是从UI界面的角度进行划分的;前端的组件化,方便UI组件的重用;1.1 全局组件定义的四种方式...原创 2019-05-07 00:51:31 · 180 阅读 · 0 评论 -
VUE项目练习笔记
Vue-cms1. App.vue 组件的基本设置1.1 header头部的固定导航栏使用 Mint-UI 的 Header 组件;按需导入模块引用1.2 底部Tabbar底部的页签使用 mui 的 tabbar;先把 扩展图标的 css 样式和扩展字体库 ttf 文件,拷贝到 项目中按需导入// 引入Tabbar模块import './lib/mui/c...原创 2019-05-07 00:32:32 · 975 阅读 · 2 评论 -
Vue动画
Vue中的动画为什么要有动画:动画能够提高用户的体验,帮助用户更好的理解页面中的功能;1 使用过渡类名HTML结构:<div id="app"> <input type="button" value="toggle" @click="flag=!flag"> <transition> <h3 v-if="flag...原创 2019-04-21 20:28:14 · 260 阅读 · 0 评论 -
Vue.js之生命周期
<body> <div id="app"> <input type="button" value="修改msg" @click="msg='No'"> <h3 id="h3">{{ msg }}</h3> </div> <script> v...原创 2019-04-10 09:35:16 · 142 阅读 · 0 评论 -
VUE中通过路由传参
若 to="/login?name=cc&age=16" 则 路由规则不需修改则路由 --> path:’/login’console.log(this.$route.query) //{name: “cc”, age: “16”}若 to="/register/cc/16"则路由 --> path:’/register/:name/:age’console.lo...原创 2019-04-09 19:31:04 · 289 阅读 · 0 评论