vue
100斤的狗
这个作者很懒,什么都没留下…
展开
-
configureWebpack两种格式配置alias别名(亲测有效)
一、configureWebpack对象形式configureWebpack:{ resolve: { // 别名配置 alias: { 'assets': '@/assets', 'common': '@/common', 'components': '@/components', 'network': '@/network',原创 2020-10-27 09:38:23 · 10361 阅读 · 4 评论 -
移动端(微信端)显示控制台
1、安装vconsolenpm安装npm install vconsole二、使用vconsole在App.vue中直接引入import Vconsole from 'vconsole'在App.vue中创建实例mounted(){ const vConsole = new Vconsole()}原创 2020-10-26 10:28:28 · 874 阅读 · 0 评论 -
watch的deep属性监听对象,没有监听到对象的属性新增
问题说明子组件监听父组件传过来的infoData,父组件的infoData是一个个添加属性的父组件中infoData的添加对象代码如下: this.infoData.customerId = data.customerId; this.infoData.customerName = data.customerName; this.infoData.customerAdress = data.customerAdress; t原创 2020-10-14 08:59:21 · 790 阅读 · 1 评论 -
区分用户使用PC端还是非PC端(移动端等)
computed: { /** * 判断是够是pc设备 */ IsPC() { const userAgentInfo = navigator.userAgent; const Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPod"]; let flag = true; Agents.forEach(item => { if..原创 2020-09-26 17:19:39 · 269 阅读 · 0 评论 -
解决.scss的普通样式能生效,但是嵌套写法,变量等都失效
问题说明:类似这样的样式能实现:但是变量,嵌套写法等scss特有的语法都失效了错误原因:解决方法:原创 2020-09-15 17:08:56 · 4924 阅读 · 3 评论 -
vue 引用外部字体样式
1、在你喜欢的目录下创建一个font.css文件2、font.css中定义字体名称、引用路径等@font-face { font-family: 'PUTHAfont'; src: url('./PUTHIAfont.TTF'); font-weight: normal; font-style: normal; }3、在main.js中全局引入该字体import Vue from 'vue'import App f原创 2020-08-16 21:21:29 · 1557 阅读 · 0 评论 -
监听鼠标右键事件并取消默认事件
思路:1、先取消默认右击事件:监听一个oncontextmenu事件,然后使用event.preventDefault();oncontextmenu = {(event) => {event.preventDefault()}}2、判断是否为右击事件:监听一个onmousedown事件,然后event.Button0为左键,event.Button1为滚轮,event.Button==2为右键onmousedown= {(event) => {if(event.Button=原创 2020-08-01 15:48:29 · 4106 阅读 · 1 评论 -
html导出docx文件
1、npm安装$ npm install --save html-docx-js$ npm install --save file-saver2、引入import htmlDocx from 'html-docx-js/dist/html-docx';import saveAs from 'file-saver';3、点击事件实现导出<template> <div class="about"> <button @click="this.expor原创 2020-08-01 15:25:37 · 4929 阅读 · 4 评论 -
实现iframe内嵌页面与父页面通讯
详细介绍地址:https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessageiframe内嵌页面发送数据<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0原创 2020-07-31 15:18:01 · 437 阅读 · 0 评论 -
vue中使用jsx封装一个文件预览的组件,可实现全屏,退出全屏,关闭预览等效果
1、创建一个组件(其中包含全屏,退出全屏,关闭预览等功能,加载中的组件使用了antd的组件库,使用jsx渲染页面,可改成template)目录:Component.vue内容:<script>export default { name: 'FilePreview', props: { }, data() { return { // 是否显示整个预览组件(默认不显示,点击预览按钮触发show事件 isShow: false,原创 2020-07-22 13:23:49 · 641 阅读 · 0 评论 -
点击图标实现图片上传及相同图片上传无法触发change事件的问题解决
1、渲染(用了antd的组件) <a-button type="primary" onClick={this.chooseImg}> <a-icon type="file-image" /> </a-button> <input type="file" onChange={this.getFile} accept="image/*" ref="imginput" style="display:none"/>2、选择图片文件的方法: /**原创 2020-07-20 17:43:21 · 564 阅读 · 0 评论 -
vue使用jsx语法渲染html型的数据
数据:data() { return { previewHTML: '<div>dddd</div>', } }vue使用jsx语法渲染时:render() { return ( <div id="cropper"> <div {...{ domProps: { innerHTML: this.previewHTML }原创 2020-07-18 17:47:13 · 1239 阅读 · 2 评论 -
使用vue-cropper实现图片裁剪,放大缩小,实时预览等
1、安装npm install vue-cropper -S2、main.js引用import VueCropper from 'vue-cropper' import Antd from 'ant-design-vue';import 'ant-design-vue/dist/antd.css';Vue.config.productionTip = falseVue.use(Antd)Vue.use(VueCropper)3、主要文件<template> <原创 2020-07-18 16:16:30 · 8964 阅读 · 2 评论 -
vue 使用jsx进行渲染时,出现提示可能无限循环You may have an infinite update loop in a component render function.
错误提示:[Vue warn]: You may have an infinite update loop in a component render function.错误代码:正确写法:1.不需要入参:onClick={this.changeLanguage}2.需要入参写成箭头函数onClick={() =>{ this.changeLanguage(item.type) }}错误原因:写 onClick={this.cha原创 2020-07-10 10:01:15 · 720 阅读 · 0 评论 -
路由死循环报错‘vue-router.esm.js?8c4f:2181 RangeError: Maximum call stack size exceeded’
跳转路由时加了一个导航守卫验证是否存在token,没有则跳转登录页面错误提示:RangeError: Maximum call stack size exceeded错误代码:// 是否带有token值,有的话正常跳转,没有的话就跳转login页面router.beforeEach((to, from, next) => { if (!window.sessionStorage.getItem('mytoken')) return next('/login') next()})原创 2020-07-03 20:21:30 · 3679 阅读 · 2 评论 -
子路由路径写/和不写/的差别
突然发现子路由path写不写‘/’是有差别的1. 路径不写 ’ / ' { path: '/home', component: Home, children: [ { path: '', redirect: 'welcome' }, { path: 'welcome', component: Welcome } ] }浏览器中路径显示:跳转welco原创 2020-07-02 23:02:06 · 716 阅读 · 0 评论 -
debounce防抖函数的使用
debounce防抖函数的使用说明:1.首页有30多张图片,每次图片加载完都要执行一个refresh的函数,由于执行次数过多,对refresh函数进行防抖2.图片位于组件goodsitem.vue中,需要发送事件给home.vue步骤:1. 创建一个utils.js文件封装debounce函数//func为要执行的函数(要防抖的),delay为防抖的毫秒数,在该毫秒数内的函数会被合并掉export function debounce(func, delay) { let timer = n原创 2020-06-30 14:07:14 · 2343 阅读 · 0 评论 -
vue封装toast插件
代码是跟着coderwhy王红元老师的视频打的,这里主要是记录一下摘要:想要的效果:监听事件的点击,调用一个method,method中再调用this.$toast.show(message,duration),其中message为提示语,duration为提示语的显示时长步骤(以下步骤非严格步骤顺序,太麻烦就直接整个文件代码放上来了):创建一个components文件夹,其中包含两个文件,index.js和toast.vue编辑toast.vue组件的样式<template>原创 2020-06-30 13:15:17 · 218 阅读 · 3 评论 -
vue中的图片懒加载-vueLazyLoad
vue框架中实现图片懒加载详细地址:https://github.com/hilongjw/vue-lazyload步骤如下:安装 npm install vue-lazyload --save在main.js文件中导入引用import vueLazyLoad from 'vue-lazyload';安装插件//朴素版 Vue.use(vueLazyLoad); //丰富版Vue.use(vueLazyLoad,{ preLoad: 1.3, error:原创 2020-06-30 12:45:57 · 141 阅读 · 0 评论 -
路由使用query和params的差别
axios使用query和params的差别1.入参的差别:methods: { itemClick() { // query方式: this.$router.push({ path: "/detail", query: { iid : this.goodslistitem.iid } }); // params方式 this.$router.push('/原创 2020-06-20 13:38:51 · 372 阅读 · 0 评论