weixin_44632257的博客

原创 uni-app之页面参数传递

uni.navigateTo({ url:'./nav?index=1'})接收的页面：只能用onLoad才能接收参数onLoad(options){ console.log(options)}

原创 uni-app之清理缓存

<template> <view class="content"> <view>应用缓存：{{storageSize}}</view> <button type="default" @tap="clearStorage">清除缓存</button> </view></template><script>export default { data() { return { .

原创 请求接口生成二维码压缩打包下载

原创 element中的table固定左侧列之后，底部滚动轴不能滚动到最左侧

添加css样式：.el-table--scrollable-x .el-table__body-wrapper { z-index : 1;}

原创 收藏技术

滚动条插件：vue-happy-scrollhttps://www.cnblogs.com/libo0125ok/p/9101118.html

原创 前端单元测试

安装npm install --save-dev jest @vue/test-utils在package.json中定义{ "scripts": { "test": "jest" }}启动测试：npm run test

原创 前端自动化测试

自动化测试框架Jest安装jestnpm install jest@24.8.0 -D修改package.json中的test"scripts": { "test": "jest" },运行npm run test//配置jest，执行会生成jest.config.js的js文件npx jest --init//生成coverage文件夹的测试报告npx jest --coverage一般我们都不会使用commonJS语法，会使用import和export进行导出和引入

原创 vue国际化（vue-i18n）

一、安装(npm安装) npm install vue-i18n二、配置（main.js文件配置）1、引入import Vue from 'vue'import VueI18n from 'vue-i18n'Vue.use(VueI18n)2、在assets=>lang中新建en.js和zh.js3、注册i18n实例并引入语言文件，文件格式等下解析const i18n = new VueI18n({ locale: 'en', // 语言标识 messages: {

原创 前端将xml数据保存成word文档

// 点击下载 download(value,flag){ let _this = this this.axios({ method: 'get', url: '/url/lengthMeasurementTwice', params:{ machineId:_this.machineID[1], language:_this.$st

原创 vue中用过滤器filter

当name名超过15个字符的时候，只显示15个字符，超出部分用省略号显示第一种方法三目运算符判断<span class="userName">{{userInfoDataAccount.name&&userInfoDataAccount.name.length>15?userInfoDataAccount.name.substr(0,15)+'...': userInfoDataAccount.name}}</span>第二种方法用filter过滤器

原创 通过一个值来控制某一个页面是否显示底部

首先创建一个bottom.vue ,在app.vue 中引入<template> <div id="app"> <router-view v-on:footer="footer"></router-view> <bottom v-if="footer_show"></bottom> </div></template>通过footer_show来控制是否显示底部v-if="foot

原创 使用watch监听导航切换来控制导航栏的有无

1、新建底部导航页面，bottomBar.vue2、在App.vue中引入底部导航，通过watch去监听路由跳转<template> <div id="app"> <router-view></router-view> <bottom-bar v-if="show"></bottom-bar> </div></template><script>import bott

原创 移动端如何让某些页面存在底部导航，某些页面不存在

1、新建bottomBar.vue，底部页面<template> <div class="buttom_nav"> <div class="nav-list"> <mt-tabbar v-model="select"> <mt-tab-item id="btnOne" @click.native="changeOne()"> <img :src="btnUrl">

原创 用vueCropper去剪裁图片

https://blog.youkuaiyun.com/qq_35023116/article/details/84886846https://blog.youkuaiyun.com/qq_31837621/article/details/80825484?utm_source=blogxgwz5

原创 vue移动端实现px自动转换rem？

第一步安装npm install lib-flexible px2rem-loader -S第二步：在 main.js中引入 import ‘lib-flexible/flexible’import 'lib-flexible/flexible'第三步：修改build/utils.js如下const px2remLoader = { loader: 'px2rem-loader', options: { remUnit: 37.5 }}function generateL

原创 VUE如何关闭Eslint的方法

借用这篇文章https://www.cnblogs.com/yuzihong/p/10418123.html

原创 vue新建项目

新建项目vue init webpack 项目名在build文件夹下的webpack.base.conf.js中隐藏这段代码const createLintingRule = () => ({ // test: /\.(js|vue)$/, // loader: 'eslint-loader', // enforce: 'pre', // include: [resolve('src'), resolve('test')], // options: { // for

原创 用vuex保存一个全局变量

新建一个vuex文件夹，在vuex文件夹下建立store.js文件在store.js中引入vue和vueximport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)在state中定义一个全局变量：const state = { httpimgurl:''}将state导出去export default new Vuex.Store({ state})在main.js中引入这个store.jsimport store

原创 兄弟组件传值

新建一个utiles文件夹，在这个文件夹下建立bus.jsimport Vue from 'vue'export default new Vue()在文件中引入import bus from '../utiles/bus'点击优质项目跳转到底部导航中的项目页面，并且底部导航项目的icon高亮<router-link @click.native="goPub"> <img src="../assets/img/index/3.png" alt="">

原创 全局方法，全局变量

全局方法，全局变量全局变量：在index.vue中定义一个方法，请求接口去拿返回值getimgurl:function(){ let _this=this this.axios.get('url/user/imgHttpUrl.json') .then(function (res) { console.log(res) _this.httpurl=res.data Vue.prototype.$imgHttpUrl =