vue项目之功能模块

其他功能模块：

拓展内容：

webpack是不是有关于配置不打包文件路径

海报合成相关资料

base64 转blob

base64图片的优点

图片为什么要转化为base64格式

Vue.js结合Canvas制作二维码和图片的合成（qrcanvas + html2canvas）

vue2.0 webApp保存图片到相册

mui扩展插件mui.showLoading加载框

vue开发APP，结合vue-scroller实现上拉加载更多，下拉刷新数据的功能

vue 实现发送短信验证码后按钮的倒计时及禁用功能

复制文字链接

上拉加载和下拉刷新

项目通用功能模块：

1. 版本更新

第一步：在config.js设置版本号
	export default {
      
	    BASE_URL: 'https://www.soukevip.com:8443/tdd',
	    version: '1.1.0'
	}
	
第二步：在设置或者账户与安全页面，添加结构（默认隐藏）
	<div @click="versionbut"  v-if="false">
	   检查更新
	</div>
	
	versionbut() {
      
	  this.sys.post(this.ports.updateVersionsNumber, {
      'number': this.configs.version}, function(res){
      
	    mui.toast('上传成功',{
       duration: 3000, type:'div' })
	  })
	}
	
第三步：在tool.js中设置版本更新
	变量有如下数据：
	1.downurl  主域名 + 下载接口
	2.versiondq   版本号
	3.getVersionsNumber  获取版本号

	appUpdate(ismanual) {
         // app进行版本更新
	    var downurl = configs.BASE_URL + '/tddApp/downloadApp'
	    var versiondq = configs.version;
	    sys.post(ports.getVersionsNumber, {
      }, function(data){
      
	      // console.log(data)   data.obj就是版本号 例如：1.1.0
	      var normItem = data.obj
	      var btn = ["确定升级", "取消"];
	      if (normItem != versiondq) {
      
	        var ua = navigator.userAgent.toLowerCase();
	        if (/iphone|ipad|ipod/.test(ua)) {
          //苹果手机
	          var _msg = "发现新版本:V" + normItem;
	          //plus.nativeUI.alert("发现新版本:V" + normItem);
	          mui.confirm(_msg, '升级确认', btn, function (e) {
      
	              if (e.index == 0) {
       //执行升级操作
	                  document.location.href = downurl
	              }
	          });
	          return;
	        } else if (/android/.test(ua)) {
      
	          var _msg="发现新版本:V" + normItem;
	          mui.confirm(_msg, '升级确认', btn, function (e) {
      
	              if (e.index == 0) {
       //执行升级操作
	                  plus.nativeUI.toast("下载中。。。，请稍后！");
	                  var dtask = plus.downloader.createDownload(downurl, {
      }, function (d, status) {
      
	                      if (status == 200) {
      
	                          var path = d.filename;//下载apk
	                          plus.runtime.install(path); // 自动安装apk文件
	                      } else {
      
	                          plus.nativeUI.alert('版本更新失败:' + status);
	                      }
	                  });
	                  dtask.start();
	              }
	          });
	        }
	      }
	    })
	}

第四步：在登录页面的mounted函数中   this.tool.appUpdate()

2. vue中复制到剪贴板功能

https://blog.csdn.net/weixin_39907729/article/details/89211669
安装插件：vue-clipboard2

注意：content表示复制内容区的内容

	复制文字
	

	// 复制成功
	onCopy(e){
      
	  mui.toast('复制成功',{
       duration: 3000, type:'div' })
	},
	// 复制失败
	onError(e){
      
	  mui.toast('复制失败',{
       duration: 3000, type:'div' })
	}

3. 记住用户名和密码

login.vue页面

'logindata': {
           // 登录接口请求参数
'number': '',
'password': ''
},

请求登录接口成功后：
localStorage.setItem('token', data.obj)  // 保存token
localStorage.setItem('username', that.logindata.number)    // 保存用户名
localStorage.setItem('password', that.logindata.password) // 保存登录密码


// 记住用户名和密码
initdata() {
      
 if (localStorage.getItem('username')) {
      
   this.logindata.number = localStorage.getItem('username')
 }
 if (localStorage.getItem('password')) {
      
   this.logindata.password = localStorage.getItem('password')
 }
},
mounted() {
      
 this.initdata()  // 记住用户名和密码
}

4. 动态设置元素的样式

contbut() {
	
  var winHig = document.documentElement.clientHeight; // 浏览器可见区域高度 
  var heightNav = this.$refs.nav.offsetHeight;       // 底部导航栏 (添加 ref="nav")
  var heightFix = this.$refs.fixed.offsetHeight;    // 头部导航栏区域 (添加 ref="fixed")
  
  .................................................................paddingTop
  var heightFix = this.$refs.fixed.offsetHeight; // 头部区域高度
  
  // 中间内容主体的style样式 padding-top:'头部区域的高度'，正好显示中间内容主体的高度
  this.sty2.paddingTop = heightFix + 10 + 'px'; 
  ....................................................................
  
  // 遮罩层的样式 height
  

  
  // 在data中定义 'height': { },  遮罩层的样式
  
  // 中间主体内容的高度,也就是遮罩层的高度；
  this.height.height = winHig-heightNav-heightFix + 'px'; 
  
  this.height.top = heightFix + 'px'; // 遮罩层距离顶部的距离--可有可无
  
  // 包裹中间内容盒子的样式 sty2  

  // 在data中定义 'sty2': { },
  
  // 中间内容主体的样式(一定有定位 position:relative) 距离头部的高度 top
  this.sty2.top = heightFix + 'px';  
  
  // 中间内容主体的样式(一定有定位 position:relative) 距离底部的高度 bottom
  this.sty2.bottom = heightNav + 'px';
  
  // 中间内容主体的高度:浏览器高度-底部高度=中间内容的高度
  this.sty2.height = winHig-heightNav + 'px'; 
  
  ...................................................
  
  

	中间内容...
  
  
  // 中间内容主体的样式 padding-top:'头部区域的高度'，正好显示中间内容主体的高度
   this.sty2.paddingTop = heightFix + 10 + 'px'; 
   ...........................................................
  
  // 组件最外层的div  

  // 在data中定义 'sty3': {'background-color': '#ffffff'}
  this.sty3.height = winHig + 'px'
  
}

5.横向滚动

	1
	2
	3
	4
	5
	6

.svg {
	display: flex;      // 必须
	flex-wrap: nowrap;  // 必须
	white-space: nowrap; // 必须
	width: 90%;
	margin: auto;
	background-color: #00FF00;
	}
.svg view {
	display: inline-block; // 必须
	width: 80%;    // 必须
	height: 200px;
	background-color: #007AFF;
}

6. 返回上一级

this.$router.go(-1) 

7. 页面强制刷新

 this.$forceUpdate();

8. 渲染后台返回的html标签

document.getElementById('container').innerHTML = data.obj.map((value,index)=>{
	return value.content
});

9. Vue直接操作DOM

Vue直接操作DOM

	1.通过ref标注DOM元素
    // 在DOM元素上通过ref属性标注，属性名称自定义  
hello
    
    2.通过$refs获取DOM元素
    	// 通过Vue实例的$refs获取标记ref属性的元素
    	let info = this.$refs.info.innerHTML
    	console.log(info) // hello

10. 退出功能实现原理

基于 token 的方式实现退出比较简单，只需要销毁本地的 token ,利用编程式导航–重新返回登录页面。

这样，后续的请求就不会携带 token ，必须重新登录生成一个新的 token 之后才可以访问页面。

在Home.vue组件中：

11. 缓存技术

1. 短期存储token

window.sessionStorage.setItem("token",token);
const tokenStr = window.sessionStorage.getItem('token')

// 清除token
window.sessionStorage.clear();

2. 长期缓存

// 清除缓存
localStorage.clear();

// 保存token
localStorage.setItem("token",token);

12. Vue使用进度条NProgress

方法1：点击页面实现跳转的时候，添加进度条loading效果

npm install --save nprogress

具体实现步奏：
1.打开可视化面板：依赖--运行依赖--安装nprogress

2.在main.js中：导入Nprogress包对应的js和css
import Nprogress from 'nprogress' **js实现进度条效果**
import 'nprogress/nprogress.css' **css美化进度条**

......................

1.在request拦截器中，展示进度条 Nprogress.start()
axios.interceptors.request.use(config=>{Nprogress.start()}) 

2.在response拦截器中，隐藏进度条 Nprogress.done()
axios.interceptors.response.use(config=>{Nprogress.done()})

方法2：点击页面实现跳转的时候，添加进度条loading效果

Vue使用NProgress 修改颜色

在App.vue中的style中增加自定义颜色：

#nprogress .bar {
	background: red !important; 
}

• 安装

npm install --save nprogress 或者
yarn add nprogress

• 使用方法：
  • NProgress.start();
  • NProgress.done();

router.js 导入

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

router.beforeEach((to, from, next) => {
    NProgress.start()
    next()
})

router.afterEach(() => {
    NProgress.done()
})

13. 富文本编辑器 vue-quill-editor

参考文档：https://www.jianshu.com/p/1675bcd396a2

• 安装：vue-quill-editor

npm install vue-quill-editor -S

• 安装quill

npm install quill -S

• 在main.js中引入

import {
      quillEditor } from 'vue-quill-editor' // 调用富文本编辑器
import 'quill/dist/quill.snow.css' // 富文本编辑器外部引用样式  三种样式三选一引入即可
//import 'quill/dist/quill.core.css'
//import 'quill/dist/quill.bubble.css'
import * as Quill from 'quill'; // 富文本基于quill

• 使用

editor: null,   // 富文本编辑器对象
content: `

`, // 富文本编辑器默认内容
editorOption: { //  富文本编辑器配置
    modules: {
        toolbar: '#toolbar'
    },
    theme: 'snow',
    placeholder: '请输入正文'
},


this.editor = this.$refs.myQuillEditor.quill;


this.editor = null;
delete this.editor;


// 准备富文本编辑器
onEditorReady (editor) {},
// 富文本编辑器 失去焦点事件
onEditorBlur (editor) {},
// 富文本编辑器 获得焦点事件
onEditorFocus (editor) {},
// 富文本编辑器 内容改变事件
onEditorChange (editor) {},


components: {
    quillEditor
}