vue项目之功能模块

旧城等待， 2023-03-12 07:26 14阅读 0赞

## 其他功能模块： ##

> 拓展内容：
> 
> [webpack是不是有关于配置不打包文件路径][webpack]
> 
> 海报合成相关资料
> 
> [base64 转blob][base64 _blob]
> 
> [base64图片的优点][base64]
> 
> [图片为什么要转化为base64格式][base64 1]
> 
> [Vue.js结合Canvas制作二维码和图片的合成（qrcanvas + html2canvas）][Vue.js_Canvas_qrcanvas _ html2canvas]
> 
> [vue2.0 webApp保存图片到相册][vue2.0 webApp]
> 
> [mui扩展插件mui.showLoading加载框][mui_mui.showLoading]
> 
> [vue开发APP，结合vue-scroller实现上拉加载更多，下拉刷新数据的功能][vue_APP_vue-scroller]
> 
> [vue 实现发送短信验证码后按钮的倒计时及禁用功能][vue]
> 
> [复制文字链接][Link 1]
> 
> [上拉加载和下拉刷新][Link 2]

## 项目通用功能模块： ##

### 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表示复制内容区的内容
> 
>     <span 
>     	v-clipboard:copy="content" 
>     	v-clipboard:success="onCopy" 
>     	v-clipboard:error="onError">复制文字</span>
> 
>     // 复制成功
>     	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
      <div class="fixa" :style="height" @click="onopen" v-if="fixto"></div>
      
      // 在data中定义 'height': { },  遮罩层的样式
      
      // 中间主体内容的高度,也就是遮罩层的高度；
      this.height.height = winHig-heightNav-heightFix + 'px'; 
      
      this.height.top = heightFix + 'px'; // 遮罩层距离顶部的距离--可有可无
      
      // 包裹中间内容盒子的样式 sty2  <div :style="sty2"></div>
      // 在data中定义 'sty2': { },
      
      // 中间内容主体的样式(一定有定位 position:relative) 距离头部的高度 top
      this.sty2.top = heightFix + 'px';  
      
      // 中间内容主体的样式(一定有定位 position:relative) 距离底部的高度 bottom
      this.sty2.bottom = heightNav + 'px';
      
      // 中间内容主体的高度:浏览器高度-底部高度=中间内容的高度
      this.sty2.height = winHig-heightNav + 'px'; 
      
      ...................................................
      
      <div :style="sty2" id="container">
    	中间内容...
      </div>
      
      // 中间内容主体的样式 padding-top:'头部区域的高度'，正好显示中间内容主体的高度
       this.sty2.paddingTop = heightFix + 10 + 'px'; 
       ...........................................................
      
      // 组件最外层的div  <div :style="sty3"></div>
      // 在data中定义 'sty3': {'background-color': '#ffffff'}
      this.sty3.height = winHig + 'px'
      
    }

### 5.横向滚动 ###

<scroll-view class="svg" scroll-x>
    	<view>1</view>
    	<view>2</view>
    	<view>3</view>
    	<view>4</view>
    	<view>5</view>
    	<view>6</view>
    </scroll-view>

.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属性标注，属性名称自定义  <div ref="info">hello</div>
        
        2.通过$refs获取DOM元素
        	// 通过Vue实例的$refs获取标记ref属性的元素
        	let info = this.$refs.info.innerHTML
        	console.log(info) // hello

### 10. 退出功能实现原理 ###

> 基于 token 的方式实现退出比较简单，只需要销毁本地的 token ,利用编程式导航–重新返回登录页面。
> 
> 这样，后续的请求就不会携带 token ，必须重新登录生成一个新的 token 之后才可以访问页面。
> 
> 在`Home.vue`组件中：
> 
>     <template>
>     <div>
>      <el-button type="info" @click="logout">退出</el-button>
>     </div>
>     </template>
>     
>     <script>
>     	export default {
>     		methods:{
>       	logout(){
>           	window.sessionStorage.clear();
>           	this.$router.push("/login");
>       	}
>     	}
>     	}
>     </script>
>     
>     <style lang="less" scoped>
>     
>     </style>

### 11. 缓存技术 ###

> 1.  短期存储token
> 
>     window.sessionStorage.setItem("token",token);
>     const tokenStr = window.sessionStorage.getItem('token')
>     
>     // 清除token
>     window.sessionStorage.clear();
> 
> 1.  长期缓存
> 
>     // 清除缓存
>     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

*  使用

<quill-editor
        v-model="content"
        ref="myQuillEditor"
        :options="editorOption"
        @focus="onEditorFocus($event)"
        @blur="onEditorBlur($event)"
        @change="onEditorChange($event)">
    </quill-editor>
    
    
    editor: null,   // 富文本编辑器对象
    content: `<p></p><p><br></p><ol></ol>`, // 富文本编辑器默认内容
    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
    }

[webpack]: https://blog.csdn.net/momDIY/article/details/87906111
[base64 _blob]: https://blog.csdn.net/return_js/article/details/95893182
[base64]: https://blog.csdn.net/AndyNikolas/article/details/78910768
[base64 1]: https://blog.csdn.net/xiaolinlife/article/details/91977075
[Vue.js_Canvas_qrcanvas _ html2canvas]: https://blog.csdn.net/zuorishu/article/details/83866234
[vue2.0 webApp]: https://blog.csdn.net/qq_27717857/article/details/84181924
[mui_mui.showLoading]: https://blog.csdn.net/langyu1021/article/details/90266894
[vue_APP_vue-scroller]: https://blog.csdn.net/weixin_43842567/article/details/96139653
[vue]: https://blog.csdn.net/weixin_42216142/article/details/89417809
[Link 1]: https://www.cnblogs.com/ldlx-mars/p/8819717.html
[Link 2]: http://www.mescroll.com/index.html