S筱潇S四维Smile

created() { document.body.ondrop = function (event) { event.preventDefault(); event.stopPropagation(); } },

在mpvue小程序项目中，设置背景音乐：1、在公共js中设置一个变量，创建背景音乐例，我的是在utils文件下的global.js//背景音乐const bgrAudioContext = wx.createInnerAudioContext();export default { bgrAudioContext:bgrAudioContext}2、根目录下的main.js文件引入global.jsimport Vue from 'vue'import App fro

npm run dev 错误提示：{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.项目中找到 \node_modules\vue-loader\lib\template-compiler\index.js//将以下代码if (!isProduction) { code = prettier.format(code, { semi: false, parser: 'babylon' }

在router.js中加入以下代码就可以const originalPush = Router.prototype.pushRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err)}如果你的改了push还是没有生效，修改路由replace方法,阻止重复点击报错const originalReplace = VueRou

一、配置路由 keepactice:true { path: '/index', name: 'index', component: index, meta: { keepalive: true // 组件是否需要被保存 } }二、在App.vue页面当中，将需要保存的组件通过路由标签r...

1、静态文件路径错误找到config文件夹下的index.js文件修改以下位置assetsPublicPath: './',2、在css中写的background-img的路径出错 需要找到build文件夹下的utils.js,修改以下位置 publicPath:'../../'3、修改build文件夹下的webpack.prod.conf.js 修改以下位置p...

1.在vue（app.vue文件）里配置:<template> <div> <router-view v-if="isRouterAlive" /> </div></template><script>export default { provide() { //提供reload方法 r...

vue项目中使用iview远程搜索选择器匹配数据，选择之后，提交数据，继续选择。<Select v-model="associatedCode" filterable remote :remote-method="search" ref="relation"> <Option v-for="(item,index) in codeLists" :value="item.o...

最近项目中根目录添加favicon.ico，直接在index.html中加入<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> 这种方法本地能添加成功，打包发布后就不成功，也是郁闷了。。在配置文件修改 build/webpack.dev.conf.js & webpack.pro...

在 Vue 项目中，引入到工程中的所有 js、css 文件，编译时都会被打包进 vendor.js，若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首开的体验。解决方案：将引用的外部 js、css 文件剥离出来，不编译到 vendor.js 中，而是用资源的形式引用，这样浏览器可以使用多个线程异步将 vendor.js、外部的 js 等加载下来，达到首次打开加速的目的。推荐外...

在优化基于vue-cli开发的vue项目中，把vue-router改成外部引入的时候，配置参数： externals: { 'vue': 'Vue', 'vue-router':'VueRouter', 'axios':'axios', },console中提示Uncaught TypeError: Cannot redefine property:...

html模板代码：&lt;FormItem label=""&gt;   &lt;Row&gt;     &lt;Col span="11"&gt;       &lt;DatePicker type="date" :options="startTimeOptions" @on-change="startTimeChange" placeho

在h5项目中，经常遇到不同组件需要不同背景色，通过vue的生命周期来解决。这组件创建前设置我的样式，销毁之前移除我设置的样式。用以下方式给body添加样式：<script>export default { beforeCreate: function() { document.getElementsByTagName("body")[0].class...

微信摇一摇抽奖：export default { data() { return { SHAKE_THRESHOLD:4000,//定义一个摇动的值 last_update :0,//定义一个变量保存上次更新的时间 x:0, //定义xyz记录三个轴的数据以及上一次出发的时间 y:0, z:0, last_x :0, las...

1、点击按钮，实现微信扫一扫功能：<template> <a class="btn" @click="scan">扫一扫</a></template>2、使用config接口注入配置信息，wx.config调用方法如下：（其中appId,timestamp,nonceStr,signature必须从后台获取，传参当前网页的UR...

1.在index.html引入高德地图JSAPI <script src="https://webapi.amap.com/maps?v=1.3&key=xxx"></script>2.地图dom<div class="map-container"> <div id="container" style="width:1...

1.安装sass的依赖包：npm install --save-dev sass-loader//sass-loader依赖于node-sassnpm install --save-dev node-sass2.修改webpack.base.conf.js配置：在build文件夹下的webpack.base.conf.js的rules里面添加配置{ test: /\.s...

在vue项目中出现以下报错：错误原因：一个template中有两个一样的v-for, key属性冲突导致解决方法：在第二个v-for中， key属性设置一下即可：:key="index+1"如下图所示：...

在单页应用如此流行的今天，曾经令人惊叹的前端路由已经成为各大框架的基础标配，每个框架都提供了强大的路由功能，导致路由实现变的复杂。想要搞懂路由内部实现还是有些困难的，但是如果只想了解路由实现基本原理还是比较简单的。本文针对前端路由主流的实现方式 hash 和 history，提供了原生JS/React/Vue 共计六个版本供参考，每个版本的实现代码约 25~40 行左右（含空行）。什么是前...

默认配置为 en-US，如果你需要设置其他语言，推荐在入口处使用提供的国际化组件，详见：LocaleProvider 国际化。方式一：在组件中单独设置import locale from 'antd/lib/date-picker/locale/zh_CN';<DatePicker locale={locale} />;方法二：全局设置注意：DatePick...

1、在项目根目录config文件夹下找到index.js2、修改index.js中proxyTable{}内容：proxyTable: { '/api': { target: 'http://192.168.199.190:9998',//设置你调用的接口域名和端口号 别忘了加http changeOrigin: true, ...

1、安装clipboardnpm install clipboard --save2、引入clipboard（1）全局引入，在main.js引入import clipboard from 'clipboard';//注册到vue原型上Vue.prototype.clipboard = clipboard;（2）在某个组件中使用时引用import Clipboard...

在vue项目中，使用vue.ant.design中的Table组件会出现一下报错：列表中的每个记录应该有唯一的“key”支持，或者将“rowKey”设置为唯一的主键。方法一：对数据进行处理，加入key的键值对data.forEach((item, index) => { item.key = index + 1; })方法二：设置rowKey<a-t...

在Chrome中页面首次加载的时候有事会出现以上报错：Uncaught（in promise）DOMException：play（）处理方法：设置浏览器参数打开谷歌地址输入chrome://flags/#autoplay-policy修改为 No user gesture is requiredlet audio = document.querySelector("#a...

一.<router-link>标签实现新窗口打开：官方文档中说 v-link 指令被 <router-link> 组件指令替代，且 <router-link> 不支持 target="_blank" 属性，如果需要打开一个新窗口必须要用<a>标签，但事实上vue2版本的 <router-link> 是支持target="_bla...

项目中遇到的需求:输入框默认获取焦点,回车后选中文本信息<input ref="code" type="text" @keyup.enter="enterPress()" v-model="code"/>export default { data() { return { code:'', } }, m...

1.安装npm install swiper --save-dev2.在组件中引用import Swiper from "swiper"import 'swiper/dist/css/swiper.css';3.初始化swipernew Swiper('.swiper-container', { pagination: '.swiper-pagination', ...

1.安装npm install html2canvas --save2.引入import html2canvas from 'html2canvas'3.在组件中使用的方法createImg(){ let dom = document.getElementById("card");　//要转化的div let width = dom.offsetWidth;...

路由参数改变，页面数据不更新解决方法：http://localhost:8080/#test?id=1http://localhost:8080/#test?id=2，参数切换后，数据未更新以下为解决办法：监听路由变化，若参数不相同，则重新加载数据，更新视图：watch: { '$route' (to, from) { //监听路由是否变化 if(to.quer...

1.路径：http://localhost:8080/#/detail?detail_id=1<router-link :to="{path:'/detail',query: {detail_id: id}}">跳转</router-link> (id是参数值)js中使用获取参数值：this.$route.query.idjs跳转：this.$r...

npm start 启动服务的时候，出现了一下报错：You may use special comments to disable some warnings.Use // eslint-disable-next-line to ignore the next line.Use /* eslint-disable */ to ignore all warnings in a file....

第一次接触小程序，为了减少学习成本，选择了基于vue的框架 mpvue官网地址：http://mpvue.com// 全局安装 vue-cli$ npm install --global vue-cli// 创建一个基于 mpvue-quickstart 模板的新项目$ vue init mpvue/mpvue-quickstart my-project// 安装依赖$ c...

JavaScript 自定义选择年月日，需求如下图所示：代码示例如下：&lt;div class="select-box"&gt; &lt;span class="item"&gt; &lt;select v-model="formData.year"&gt; &lt;option v-for="item in year" :value=&quot

HTML： &lt;div class="item"&gt; &lt;input type="text" v-model="phone" placeholder="请输入手机号"&gt;&lt;/div&gt;&lt;div class="item phone-code"&gt; &lt;input type=&

自定义common.js公共方法//第一种方法：export 导出函数export function getWinGoods(that,header, params) { return new Promise(function(resolve, reject) { let obj={} let objH={} if(params) { //添加自定义参数 for(let...

自定义音乐播放器组件为H5添加背景音乐：1.创建music.vue组件&lt;template&gt; &lt;div&gt; &lt;div @click="changeOn" :class="isOff?'isOff':'isOn'"&gt;&lt;/div&gt; &lt;audio id="audio" :src="

1.使用npm安装:npm install wangeditor2.将编辑器封装一个组件，创建editor.vue组件:<template> <div id="editor"></div></template><script> import E from 'wangeditor' export default...

vue 在引入组件后无法显示组件内容且报错如下 ：Do not use built-in or reserved HTML elements as component id这是因为组件的命名和html标签重复导致警告，如下图所示：解决方法：创建组件的时候要注意组件命名与html标签区分开方法一、方法二、...

我们用 vue/cli 创建新项目的时候，通常会选择代码检查工具 [eslint|tslint]，有的时候难免会选错，这个时候想要替换，怎么办场景再现vue create lint-vue 为了方便查看，每个选项的结果做了换行， 和原脚本生成排版有一些不同```Vue CLI v3.0.0-rc.3? Please pick a preset: Manually sel...

从git上 clone 下来的代码：npm install 安装依赖以后，启动服务，出现Error: No PostCSS Config found报错：npm run dev解决办法：在项目根目录下创建postcss.config.js，配置内容如下：即可修复报错问题。module.exports = { plugins: { 'autopr...