多功能

時間 2019-11-11

標籤多功能简体版

原文原文鏈接

1.原生去除右邊的滾動條javascript

::-webkit-scrollbar{width:0;height:1px}
    ::-webkit-scrollbar-thumb{border-radius:5px;-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,.2);background:rgba(0,0,0,.2)}

2.vue阻止事件冒泡，好比只要父元素有點擊效果(或者子讓子元素執行本身的方法)css

<div class="activity"       v-on:click.self="switchoverOnn">
       點擊三號
     <div v-show="showOnnn">cccc</div>
   </div>
給子元素阻止冒泡
<span @click.stop="funcSon">刪除</span>

3.文字中間加一條線html

text-decoration:line-through

6.url裏面得參數用this.$route.query + 參數名字vue

7.移動端消除300毫秒的方法java

路由的簡單配置方法node

10.文字超出省略號linux

overflow: hidden;text-overflow:ellipsis;white-space: nowrap;

多行省略號android

display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 5;  //第幾行
                    overflow: hidden;

11.四個角的border-radiusweb

 border-top-left-radius:20px;border-top-right-radius:20px;
 border-bottom-right-radius:20px;border-bottom-left-radius:20px;

12封裝全局使用方法的方式，闖將utils文件夾裏面建立index文件，還有根據本身想要的功能建立其餘js文件， index.js就是把方法其餘公共方法文件引入chrome

再導出，再min。js使用就變成全局公共方法了

13.封裝一個過濾器（公共方法）

再utils文件裏面建立一個filter.js而後在導出以後就和上面的差很少，使用方法

14.在標籤內容裏賣用三元運算符和綁定img的src地址

{{i.IsCaptain == 0? '團隊長' : '團員'}}

15實現地址引入封裝

16.撥打電話，發送短信

點擊按鈕實現撥號

17.本地使用node起一個服務器

首先安裝node而後安裝鏡像文件

npm install http-server -g(windows下)
sudo npm install http-server -g(linux和mac下)

cd 文件夾名字
http-server   //起服務指令

18.vue子傳父

this.$emit('searchValue',value)  //子級經過發送

父級經過

@searchValue="searchValue" //而後再methods裏面定義searchValue方法

searchValue:function(value){   //搜索請求
			this.searchValueo = value;
			this.$post('PlatFormAPI/NetHospital/GetNetHospitals',{SortType:this.searchValueo}).then( o =>{
				//console.log(o.ReturnData)
				this.hospitalList = o.ReturnData
			})
		},

19，vue滾動條事件（下拉加載更多）

getMore(){ //下拉加載分頁
window.onscroll =() =>{
let hei = document.documentElement.clientHeight || document.body.clientHeight;
let top = document.documentElement.scrollTop || document.body.scrollTop;
let all = document.documentElement.scrollHeight || document.body.scrollHeight;
if(hei+top == all){
this.PageIndex = this.PageIndex + 1;
this.getPageData();
}
}
},

　　而後

跳轉其餘頁面讓改方法失效
beforeDestroy(){
        window.onscroll = null
      },

    created(){
		this.getMore()
    },

20 往一個數組添加數據方法

		addPage(){
			this.$post('PlatFormAPI/NetHospital/GetNetHospitals',{PageIndex:this.page}).then( o =>{
				this.hospitalList = [   //原有數據對象
						...this.hospitalList,  //展開原有對象
						...o.ReturnData   //把新的數據對象添加到原有對象
				]
			})
		}

21回到頂部直接使用方法

goTop () {
	      this.timer = setInterval(() => {
	        let osTop = document.documentElement.scrollTop || document.body.scrollTop
	        let ispeed = Math.floor(-osTop / 5)
	        document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed
	        this.isTop = true
	        if (osTop === 0) {
	          clearInterval(this.timer)
	        }
	      }, 30)
	    }

22 vue實現跳轉路由返回前一個頁面不刷新狀態，（好比進入詳情後返回主頁仍是在那個位置）

　　1在APP.vue裏面設置

	<div id="app">
	<keep-alive>  //設置這個
		<router-view  v-if="$route.meta.keepAlive"></router-view>
	</keep-alive>
		<router-view v-if="!$route.meta.keepAlive"></router-view>
	</div>

2在主頁路由配置

		{
			path: '/hospital', //互聯網醫院
			name: 'hospital',
			component: pick('hospital/index'),
			meta:{   //加這個對象就行了 ，scollTopPosition是用來記錄離開的滾動條距離上邊的距離
				keepAlive:true,
				scollTopPosition:0
			}
		},

3設置路由守衛信息

 beforeRouteEnter(to, from, next) {  //進入前
	    next(vm => {
　　　　　　　　　　　　vm.getMore()  //這裏執行你的滾動條方法，不執行你反回的時候，滾動條事件會不生效
	          if (from.path === "/hospital/home"){
	          		setTimeout(()=>{
	          			console.log(2)
	          			document.documentElement.scrollTop = document.body.scrollTop = to.meta.scollTopPosition;   //這邊是進入前提取咱們保存的滾動條距離上面的距離,使用延時器是由於生命週期沒了
	          		},100)
	          }
	    });
	},
   beforeRouteLeave(to, from, next) {   //離開前
	    if(from.meta.keepAlive) {
	　        from.meta.scollTopPosition = this.scrollTopDistance; //由於我這邊已經有下拉加載更多獲取了滾動條距離上面的距離 因此我直接把距離保存在data裏面 而後這邊直接保存
	    }
	    next();
	}

　由於我這邊已經有下拉加載更多獲取了滾動條距離上面的距離因此我直接把距離保存在data裏面

		getMore(){ //判斷滾動條到達底部
			window.onscroll = () =>{
				let hei = document.documentElement.clientHeight || document.body.clientHeight;
				let top = document.documentElement.scrollTop || document.body.scrollTop;
				let all = document.documentElement.scrollHeight || document.body.scrollHeight;
				this.scrollTopDistance = top;   //這裏就是保存在data的top距離
				if(hei + top == all){
					this.page = this.page + 1;
					this.addPage();
				}
				top > 500?this.returnTop = true:this.returnTop = false;
			}
		},

　有一個小bug就是當你返回的時候你的生命週期不生效，方法不會被調用，因此這時候咱們應該在進入路由守衛裏面使用回調函數來執行你須要的方法 vm.xxx

下拉刷新原生實現

reload(){  //下拉刷新
            const el2 = this.$refs.el3   //在要刷新的最大容器裏面定義一個ref， ref="el3"
            let startX = null
            let startY = null
            let endX = null
            let endY = null
            el2.addEventListener('touchstart', e => {
                startX = e.changedTouches[0].pageX
                startY = e.changedTouches[0].pageY
            })
            el2.addEventListener('touchmove', e => {
                endX = e.changedTouches[0].pageX
                endY = e.changedTouches[0].pageY
                if(Math.abs(startX - endX)<Math.abs(startY-endY) && (startY-endY)<0){
                    const top = document.documentElement.scrollTop
                                || window.pageYOffset
                                || document.body.scrollTop
                    if(top == 0){
                        this.show3 = true   //請求完的方法裏面把show3設置成false // 在data裏面設置show
                    }
                } 
            })
             el2.addEventListener('touchend',() => {
                if(this.show3){
                    this.page2 = 1
                    this.haveMore2 = true
                    this.getHospitalList()   //執行的刷新後的方法
                }
            })
        }

23.css實現開關按鈕了，須要事件直接元素綁定事件（一共兩段元素+css）

<span class='tg-list-item' @click="showFun">
                <input class='tgl tgl-light' id='cb1' type='checkbox'>
                <label class='tgl-btn' for='cb1'></label>
        </span>

.tgl{display:none}
.tgl,.tgl *,.tgl :after,.tgl :before,.tgl+.tgl-btn,.tgl:after,.tgl:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.tgl ::-moz-selection,.tgl :after::-moz-selection,.tgl :before::-moz-selection,.tgl+.tgl-btn::-moz-selection,.tgl::-moz-selection,.tgl:after::-moz-selection,.tgl:before::-moz-selection{background:0 0}
.tgl ::selection,.tgl :after::selection,.tgl :before::selection,.tgl+.tgl-btn::selection,.tgl::selection,.tgl:after::selection,.tgl:before::selection{background:0 0}
.tgl+.tgl-btn{outline:0;display:block;width:rem(90);height:rem(45);position:relative;cursor:pointer}
.tgl+.tgl-btn:after,.tgl+.tgl-btn:before{position:relative;display:block;content:"";width:50%;height:100%}
.tgl+.tgl-btn:after{left:0}
.tgl+.tgl-btn:before{display:none}
.tgl:checked+.tgl-btn:after{left:50%}

.tgl-light+.tgl-btn{background:#f0f0f0;border-radius:rem(30);padding:rem(2);-webkit-transition:all .4s ease;transition:all .4s ease}
.tgl-light+.tgl-btn:after{border-radius:50%;background:#fff;-webkit-transition:all .2s ease;transition:all .2s ease}
.tgl-light:checked+.tgl-btn{background:rgb(48,105,207)}

24,h5調用手機拍照功能和顯示（vue)

<template>
    <div class="com-upload-img">
        <div class="img_group">
            <div class="img_box" v-if="allowAddImg">
                <input type="file" accept="image/*" multiple="multiple" @change="changeImg($event)">
                <div class="filter"></div>
            </div>
        <div class="img_box" >
             <div class="img_show_box">
                <img :src="imgArr" alt="">
                <i class="img_delete" @click="deleteImg(index)"></i>
                <!-- <i class="img_delete" @click="imgArr.splice(index,1)"></i> -->
            </div>
        </div>
        </div>
    </div>
</template>
 
<script>
export default {
    name:'ComUpLoad',
    data () {
        return {
            imgArr:'',
            allowAddImg:true,
        }
    },
    created(){
        
    },
methods: {
    changeImg: function(e) {
        var _this = this;
        var imgLimit = 1024;
        var files = e.target.files;
        var image = new Image();
        if(files.length>0){
            var dd = 0;
            var timer = setInterval(function(){
                if(files.item(dd).type != 'image/png'&&files.item(dd).type != 'image/jpeg'&&files.item(dd).type != 'image/gif'){
                    return false;
                }
 
            if(files.item(dd).size>imgLimit*102400){
                //to do sth
            }else{
                image.src = window.URL.createObjectURL(files.item(dd));
                image.onload = function(){
                // 默認按比例壓縮
                var w = image.width,
                h = image.height,
                scale = w / h;
                w = 200;
                h = w / scale;
                // 默認圖片質量爲0.7，quality值越小，所繪製出的圖像越模糊
                var quality = 1;
                //生成canvas
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');
                // 建立屬性節點
                var anw = document.createAttribute("width");
                anw.nodeValue = w;
                var anh = document.createAttribute("height");
                anh.nodeValue = h;
                canvas.setAttributeNode(anw);
                canvas.setAttributeNode(anh);
                ctx.drawImage(image, 0, 0, w, h);
                var ext = image.src.substring(image.src.lastIndexOf(".")+1).toLowerCase();//圖片格式
                var base64 = canvas.toDataURL("image/"+ ext, quality );
                // 回調函數返回base64的值
                if(_this.imgArr.length<=4){
                    _this.imgArr.unshift('');
                    console.log(base64)
                    _this.imgArr = base64;//替換數組數據的方法，此處不能使用：this.imgArr[index] = url;
                if(_this.imgArr.length>=5){
                    _this.allowAddImg = false;
                }
            }
        }
    }
 
        if(dd<files.length-1){
            dd++;
        }else{
            clearInterval(timer);
        }
        },1000)
    }
    console.log(this.imgArr)
},



deleteImg: function(index){
        this.imgArr.splice(index,1);
            if(this.imgArr.length<5){
            this.allowAddImg = true;
        }
    },
    },
}
</script>

25.把數據保存到本地，關閉頁面就銷燬 sessionStorage（下面代碼是永久保存 sessionStorage纔是關閉頁面銷燬）

let servicePackage = JSON.stringify(this.servicepackageData)
localStorage.setItem("servicePackage",servicePackage);

//先轉把數組或者對象轉字符串保存在本地

 this.servicePackage = JSON.parse(localStorage.getItem("servicePackage"));

//而後在須要用的頁面上使用parse轉換對象

2六、獲取當前時間(年月日時分秒）

 var date = new Date();
                var year = date.getFullYear();
                var month = date.getMonth()+1;//js中是從0開始因此要加1
                var day = date.getDate();
                var hour = date.getHours();
                var minute = date.getMinutes();
                var second = date.getSeconds();
                //console.log(year+"-"+month+"-"+day +"   "+ hour+':'+minute+':'+second)

27.建立一個對象的鍵和值

let obj = { }
 obj[" xxx "] = xxx ;
向數組裏面push這個obj對象

28.用淘寶鏡像安裝依賴　https://www.jianshu.com/p/481197064aa2

npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver

29.vue裏面使用v-html圖片設置不了大小問題

　　給v-html標籤添加一個idv_htmlCont而後

updated() {
		const ele = document.getElementById('v_htmlCont').getElementsByTagName('img')
		const arr = [ ...ele ]
		arr.forEach(v => {
			v.style.cssText = "width: 100%;"
		})
	},

30.單行居中和多行居中

 單行居中：line-height
多行居中：vertical-align: middle;

31父子通訊

　　父組件

<amend v-show="modification" :modificationData="modificationData"/>

　　子組件

props:{
        modificationData :{
            type:Object
        }
    },

　　要監聽，否則沒數據

 watch: {       
        modificationData(curInfo, oldInfo) {
            if (curInfo) {
                this.modificatiData= curInfo;
                 console.log(this.modificationData)
            }
        }

      },

32點擊彈出蒙層不能滑動

 var bodyEl = document.body
            var top1 = 0
                if (this.search == true) {
                    top1 = window.scrollY
                    bodyEl.style.position = 'fixed'
                    bodyEl.style.top = -top1 + 'px'
                } else {
                    bodyEl.style.position = ''
                    bodyEl.style.top = ''
                    window.scrollTo(0, top1) // 回到原先的top
                }

33改變inputplaceholder的樣式

::-webkit-input-placeholder{}    /* 使用webkit內核的瀏覽器 */
:-moz-placeholder{}                  /* Firefox版本4-18 */
::-moz-placeholder{}                  /* Firefox版本19+ */
:-ms-input-placeholder{}           /* IE瀏覽器 */

34.短信倒計時功能

<span v-show="show" @click="getCode">獲取驗證碼</span>
<span v-show="!show" class="count">{{count}} s</span>

data(){
  return {
   show: true,
   count: '',
   timer: null,
  }
 },
 methods:{
   getCode(){
     const TIME_COUNT = 60;
     if (!this.timer) {
       this.count = TIME_COUNT;
       this.show = false;
       this.timer = setInterval(() => {
       if (this.count > 0 && this.count <= TIME_COUNT) {
         this.count--;
        } else {
         this.show = true;
         clearInterval(this.timer);
         this.timer = null;
        }
       }, 1000)
      }
   }  
 }

35內邊框外邊框

//外邊框
    box-sizing: content-box;
//內邊框
    box-sizing: border-box;

36 input當輸入框和展現框

 <div class="datum_list">
                <p>公司名稱</p>
                <input type="text"
                 :class="amend == true?'inputBorder':''" 
                 value="深圳市好策劃有限公司" 
                 :readonly="amend == true?fasle:true">
            </div>

37知足條件前進，不知足後退　　

this.$router.go(-1) 和 this.$router.go(1)

這兩個編程式導航的意思是後退和前進，功能跟咱們瀏覽器上的後退和前進按鈕同樣，這在業務邏輯中常常用到。好比條件不知足時，咱們須要後退。

38vue嵌入第三方頁面

<template>
  <div>
    <iframe src="http://0.0.0.0:8080" id="mobsf" scrolling="no" frameborder="0" style="position:absolute;top:80px;left: 120px;"></iframe>
  </div>
</template>
 
 
<script>
  export default {
    data () {
      return {
      }
    },
    mounted(){
      /**
      * iframe-寬高自適應顯示   
      */
      function changeMobsfIframe(){
        const mobsf = document.getElementById('mobsf');
        const deviceWidth = document.body.clientWidth;
        const deviceHeight = document.body.clientHeight;
        mobsf.style.width = (Number(deviceWidth)-120) + 'px'; //數字是頁面佈局寬度差值
        mobsf.style.height = (Number(deviceHeight)-80) + 'px'; //數字是頁面佈局高度差
      }
 
      changeMobsfIframe()
 
      window.onresize = function(){
        changeMobsfIframe()
      }
    },     
  }
</script>

39把本地的圖片放到js裏面的寫法

imgUrl1: require('../../assets/activity/形狀46.png'),

<img :src="i.imgUrl1"> //動態引入js地址

40跨組件監聽當前路由watch

 $route: {
            handler: function(val, oldVal){
                console.log(val)
                if(val.fullPath == '/home/sample'){sessionStorage.setItem("titleIndex",2); this.titleIndex = 2}
                if(val.fullPath == '/home/engineer'){sessionStorage.setItem("titleIndex",1);this.titleIndex = 1}
            },
        }

41vue的獲取input焦點事件

 @blur="getsearch"  //失去

@focus="absentsearch"  //得到

42vue監聽按鍵的方法

@keyup.enter=''   //回車鍵,下面本身換其餘的

　　v-model.trim = '' enter回車校驗爲空是屬於空格

.delete	delete（刪除）/BackSpace（退格）
.tab	Tab
.enter	Enter（回車）
.esc	Esc（退出）
.space	Space（空格鍵）
.left	Left（左箭頭）
.up	Up（上箭頭）
.right	Right（右箭頭）
.down	Down（下箭頭）
.ctrl	Ctrl
.alt	Alt
.shift	Shift
.meta	(window系統下是window鍵，mac下是command鍵)

43vue使用富文本框

npm 安裝 vue-quill-editor 

//在main.js裏面引入
    
import  VueQuillEditor from 'vue-quill-editor'
// require styles 引入樣式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

Vue.use(VueQuillEditor)

而後組件使用
<template>
     <quill-editor 
      v-model="content" 
      ref="myQuillEditor" 
      :options="editorOption" 
      @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
      @change="onEditorChange($event)">
    </quill-editor>
</template> 
<script>
    import { quillEditor } from 'vue-quill-editor'
    export default{
        data(){
            return {
                content:null,
                editorOption:{}
            }
        },
        methods:{
            onEditorBlur(){//失去焦點事件
            },
            onEditorFocus(){//得到焦點事件
            },
            onEditorChange(){//內容改變事件
            }
        }
    }
</script>

44篩選fine

            this.options.find((item)=>{//這裏的userList就是上面遍歷的數據源
                    this.value5.find( (i) =>{
                        if(item.typecode == i){
                            return obj.push(item.typename) 
                        }
                    })
            });

45vue裏面經過for循環出來的input獲取每個值的方法

46餓了麼獲取樹狀已經勾選的id

　　this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys())

47vue子組件調用父組件方法

　　this.$parent. (加方法名字)

　48.讓video視頻鋪滿大小的css樣式:object-fit:fill;

　49獲取用戶設備信息

getUserData(){  //獲取登陸設備信息
            var sUserAgent = navigator.userAgent.toLowerCase();
            var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
            var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
            var bIsMidp = sUserAgent.match(/midp/i) == "midp";
            var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
            var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
            var bIsAndroid = sUserAgent.match(/android/i) == "android";
            var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
            var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
            if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
                console.log("我是移動設備")
            } else {
                console.log("我是pc端")
            }
        },

　50實現多個input輸入完跳轉到下一個input

<!DOCTYPE html>
<html>
  <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>
            RunJS 演示代碼
        </title>
        <style>
            *{
                margin:0;
                padding:0;
            }
            #wrap {
                margin:auto;
                width: 300px;
            }
            #wrap input[type=text]{
                width:30px;
                height:20px;
                float:left;
                text-align:center;
            }
        </style>
        <script>
            onload = function(){
                var txts = wrap.getElementsByTagName("input");
                for(var i = 0; i<txts.length;i++){
                    var t = txts[i];
                    t.index = i;
                    t.setAttribute("readonly", true);
                    t.onkeyup=function(){
                        this.value=this.value.replace(/^(.).*$/,'$1');
                        var next = this.index + 1;
                        if(next > txts.length - 1) return;
                        txts[next].removeAttribute("readonly");
                        txts[next].focus();
                    }
                }
                txts[0].removeAttribute("readonly");
            }
        </script>
  </head>
    <body>
    <div id="wrap">
            <input type="text" />
            <input type="text" />
            <input type="text" />
            <input type="text" />
            <input type="text" />
            <input type="text" />
        </div>
  </body>
</html>

50. 改變data裏面的數據對象可是頁面render函數不觸發須要手動觸發一些this.$forceUpdate();

51谷歌字體縮放切文字居中方法

-webkit-transform: scale(0.80);-webkit-transform-origin:50% 50%;

52 v-html的樣式修改問題

    .html /deep/ span{line-height:40px;}

//奇數行
<ul>
 <li class="list-item" v-for="(item,index) in data" :class="{'active':index%2 != 1}">{{data[index].name}}</li>
</ul>

　左右滑動插件vue-touch

讓一個容器滾動條一直在底部，相似qq聊天那樣

scrollToBottom() {   //每次讓內容至於底部
            this.$nextTick(() => {
                var container = this.$el.querySelector(".content");
                container.scrollTop = container.scrollHeight;
            })
        }

//每次頁面渲染完以後滾動條在最底部
    updated:function(){
        this.scrollToBottom();
    },

mounted () {
   this.scrollToBottom();
},

pc端調取攝像頭拍照上傳

<template>
    <div>
        <!--開啓攝像頭-->
        <img @click="callCamera" class="img" :src="headImgSrc" alt="攝像頭">
        <!--canvas截取流-->
        <canvas ref="canvas" width="200" height="200"></canvas>
        <!--圖片展現-->
        <video ref="video" width="200" height="200" autoplay></video>
        <!--確認-->
        <el-button size="mini" type="primary" @click="photograph"></el-button>
    </div>
</template>   
<script>
export default {
  data () {
    return {
      headImgSrc: require('@/assets/img/sidebar/微信圖片_20190717140407.jpg'),
    }
  },
  methods: {
    // 調用攝像頭
    callCamera () {
      // H5調用電腦攝像頭API
      navigator.mediaDevices.getUserMedia({
        video: true
      }).then(success => {
        // 攝像頭開啓成功
        this.$refs['video'].srcObject = success
        // 實時拍照效果
        this.$refs['video'].play()
      }).catch(error => {
        console.error('攝像頭開啓失敗，請檢查攝像頭是否可用！')
      })
    },
    // 拍照
    photograph () {
      let ctx = this.$refs['canvas'].getContext('2d')
      console.log(ctx)
      // 把當前視頻幀內容渲染到canvas上
      ctx.drawImage(this.$refs['video'], 0, 0, 200, 200)
      // 轉base64格式、圖片格式轉換、圖片質量壓縮
      let imgBase64 = this.$refs['canvas'].toDataURL('image/jpeg', 0.7)
     
      let data = this.dataURLtoFile(imgBase64)
       console.log(data)
　　　 // 由字節轉換爲KB 判斷大小
      let str = imgBase64.replace('data:image/jpeg;base64,', '')
      let strLength = str.length
      let fileLength = parseInt(strLength - (strLength / 8) * 2)
　　　 // 圖片尺寸  用於判斷
      let size = (fileLength / 1024).toFixed(2)
      console.log(size)
 　　  // 上傳拍照信息  調用接口上傳圖片 .........

      // 保存到本地
    //   let ADOM = document.createElement('a')
    //   ADOM.href = this.headImgSrc
    //   ADOM.download = new Date().getTime() + '.jpeg'
    //   ADOM.click()
    },
    dataURLtoFile(dataurl, filename = 'file') {  //base轉圖片格式
        let arr = dataurl.split(',')
        let mime = arr[0].match(/:(.*?);/)[1]
        let suffix = mime.split('/')[1]
        let bstr = atob(arr[1])
        let n = bstr.length
        let u8arr = new Uint8Array(n)
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n)
        }
        return new File([u8arr], `${filename}.${suffix}`, {
            type: mime
        })
    },
    // 關閉攝像頭
    closeCamera () {
      if (!this.$refs['video'].srcObject) return
      let stream = this.$refs['video'].srcObject
      let tracks = stream.getTracks()
      tracks.forEach(track => {
        track.stop()
      })
      this.$refs['video'].srcObject = null
    },
  }
}
</script>

<style scoped>
    .img{width: 100px;height: 100px;;}
</style>

　監聽頁面無操做跳轉到指定頁面

startTimer() {  // 有操做直接執行該方法，使得從新計算
            let that = this;
            clearInterval(that.timeOut);
            that.timeOut = setInterval(function () {
                that.$router.push({path: '/'})
            },1000*60)
        },
        isTimeOut() {   //監聽事件
            let that = this;
            if(that.$route.path == "/") {
                that.startTimer();
            }
            document.body.onmouseup = that.startTimer;
            document.body.onmousemove = that.startTimer;
            document.body.onkeyup  = that.startTimer;
            document.body.onclick  = that.startTimer;
            document.body.ontouchend  = that.startTimer;
        },

　數組對象的判斷

<script>
let arr = [{name:'haung'},{name:'guang'},{name:'fa'}]
let arr1 = [{name:'guang'},{name:'haung'}]

let bb = []
arr.find( (item) =>{
    if(JSON.stringify(arr1).indexOf(JSON.stringify(item.name)) == -1){
        bb.push(item)
    }
})
console.log(bb)
</script>

　修改只能讀的對象

<script>
    var a = {
        address: "192.168.0.9",
        candidate: "candidate:3281809336 1 tcp 1518280447 192.168.0.9 9 typ host tcptype active generation 0 ufrag vllH network-id 1 network-cost 10",
        component: "rtp",
        foundation: "3281809336",
        port: 9,
        priority: 1518280447,
        protocol: "tcp",
        relatedAddress: null,
        relatedPort: null,
        sdpMLineIndex: 1,
        sdpMid: "1",
        tcpType: "active",
        type: "host",
        usernameFragment: "vllH",
    }

    Object.defineProperty(a, 'address', {
        configurable: true,
        get: function () {
            return 33;
        },
        set: function () {
            console.error('屬性只讀哦')
        }
    })
    console.log(a.address)
    a.address = 999
    
    const oldDefine = Object.getOwnPropertyDescriptor(a, 'address');
    const config = {
        ...oldDefine,
        ...{
            configurable: true,
            get: function () {
                return 11111
            },
            set: function (value) {
                return this['_address'] = value
            }
        }
    }
    Object.defineProperty(a, 'address', config)

    console.log(a.address)

    // a.address = 6666

    console.log(a)  //我只想改變這個address有別的方法嗎 ，_address這個新的對象不能被我拿去用 ， 我用的原生的api調用的原生默認address
</script>

53判斷一個數組對象裏面是否包含某個值

let arr = [{name:'張三',age:13},{name:'李四',age:11}]
let str = JSON.stringify(arr)
console.log(str.includes('張三')) //true

54建立一個時刻表

mounted(){
            // 頁面加載完後顯示當前時間
            this.time = this.dealWithTime(new Date())
            // 定時刷新時間
            let _this = this
            // 定時器
            this.setIntervalObj = setInterval(function () {
                _this.time = _this.dealWithTime(new Date()) // 修改數據date
            }, 1000)
       },

methods:{
            dealWithTime (data) {
                let formatDateTime
                let Y = data.getFullYear()
                let M = data.getMonth() + 1
                let D = data.getDate()
                let H = data.getHours()
                let Min = data.getMinutes()
                let S = data.getSeconds()
                let W = data.getDay()
                H = H < 10 ? ('0' + H) : H
                Min = Min < 10 ? ('0' + Min) : Min
                S = S < 10 ? ('0' + S) : S
                switch (W) {
                    case 0:
                    W = '天'
                    break
                    case 1:
                    W = '一'
                    break
                    case 2:
                    W = '二'
                    break
                    case 3:
                    W = '三'
                    break
                    case 4:
                    W = '四'
                    break
                    case 5:
                    W = '五'
                    break
                    case 6:
                    W = '六'
                    break
                    default:
                    break
                }
                // formatDateTime = Y + '年' + M + '月' + D + '日 ' + H + ':' + Min + ':' + S + ' 星期' + W
                formatDateTime = H + ':' + Min + ':' + S + ' 星期' + W
                return formatDateTime
            }
        }

destroyed () {
            if (this.setIntervalObj) { 
                clearInterval(this.setIntervalObj)
            }
        }

　　vue從左邊往右邊滑動效果

 <template>
      <div id="app">
        <!-- 需用transition標籤包裹起來 -->
        <transition>
          <router-view/>
        </transition>
        <Footer></Footer>
      </div>
    </template>

    <style lang="scss">
      
      html{
        font-size: calc( 100vw / 7.5 )
      }
      // 頁面從右側滑出左側消失特效
      #app{
        width: 100%;
        // padding-top: 46px;
        padding-bottom: 50px;
        overflow-x: hidden;
        font-size: 14px;
      }
      .v-enter{
        opacity: 0;
        transform: translateX(100%);
      }
      .v-leave-to{
        opacity: 0;
        transform: translateX(-100%);
        // 解決頁面從上往下位移問題
        position: absolute;
      }
      .v-enter-active,.v-leave-active{
        transition: all 0.35s ease;
      }
    </style>