1. js中?. 和 ?? 的用法

• ?. 可选链操作符，判断是否有该属性，有则返回，没有就返回undefined，不会报错。如this.video[index]?.detail?.width

  如果我们按照平常写this.video[i].detail.width，当video[i]为null或者detail为undefined时候，一定会报错说，不能从一个未定义的属性上取后面的xx属性。但是按照这个 则不会报错，只是直接返回undefined或者null

• ?? 判断是否为null 或者undefined，是就赋默认值，不是则取前面。如this.video[index]?.detail?.width ?? this.width

  这句代码的意思就是 如果video.detail.width存在，那么就取这个值，如果不存在，就取this.width这个默认值作为width。

2. 点击元素出现竖线

给元素加css属性user-select:none; ，不允许用户选中

给元素加css属性caret-color: rgba (0, 0, 0, 0) ;，设置竖线颜色透明

3. 页面出现弹窗后，滚动鼠标滚轮，背景会穿透滚动

<div class="window-bg">
  <div class="content"></div>
</div>
<style>
    .window-bg {
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1000;
      overflow: auto; //这个很重要，是不滚动的关键
    }
</style>

4. 调用goodle授权进行YouTube登录（第三方登录）

这个网上有很全的说明，但是，网上的比较旧了。所以说比较推荐去看文档。迁移到 Google Identity 服务 | Google Identity Services JavaScript SDK | Google Developers，当然我也简单说下流程

1. 首先，我们肯定是需要后端去配置一下的，可以看下这里，或者网上随便搜个，这里的流程很规范，也没什么变化，只要按照你的重定向地址等配置好就可以了

   How to Use Google OAuth 2.0 to Access Google APIs with Refresh Token - Digital Inspiration (labnol.org)

2. 接着是前端的部分，就直接贴代码了

   <template>
       <div class="add-account" @click="addNewAccount"></div>      
   </template>
   
   <script>
   import constants from "../constants/constants";
   
   export default {
       name: "GoogleAuthorize",
       data(){
           return{
               client:null,//用于保存oauth2的参数
           }
       },
       methods:{
       	//点击时出现登录弹窗。向google发送请求
       	addNewAccount(){
               this.client.requestCode();
           },
           //初始化google登录
           initNewAccount() {
               let google = window.google;
               if (google) {
                   //Google登录的授权，网址不是我们需要的 打开窗口的方式可以参考
                   this.client = google.accounts.oauth2.initCodeClient({
                       state: '这里传你后端需要的参数，比如用户的token等',//当然这里也可以不传，但这样就没有res.state
                       client_id: constants.GOOGLE_CLIENT_ID,//客户端ID
                       scope: constants.GOOGLE_SCOPE,//作用域
                       // authorized_grant_types:"implicit",
                       // include_granted_scopes: 'true',
                       ux_mode:'popup',//弹窗的方式
                       callback: this.callbackFunction
                   })
               }
           },
           //google弹窗打开回调，像你的后端发请求，这里是封装后的axios，也可以看例子用原生的xhr
           callbackFunction(res){
               //这里可以向后端发送请求，会有个response参数，
           },
       },
       mounted() {
           this.initNewAccount();
       },
   }
   </script>