9.23Webapi;Vue的拖拽组件使用draggable

1.window.open

1，参数

window.open 常用来在新的window 或新的tab页打开一个页面或文件( 图片或者是PDF )

window.open本质上可以看做<a>标签的js版本，或者说是编码式地打开窗口。但它比<a>标签更加灵活，可以通过js实现与打开的页面之间的通信。

返回值

window.open 返回的是对新打开的窗口的引用，即该窗口的window对象

const refwin = window.open("http://www.baidu.com");

这里引用到的window对象并不具备完整的DOM属性和方法，它仅仅提供了访问该页面的一些基本属性和方法，如图所示。

通信问题

使用window.open打开新窗口时，原窗口与新窗口之间时可以实现实现双向通信的。

2.Vue中 this.$set()的用法

官方解释：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于响应式对象上添加新属性，应为Vue 无法探测普通的新增属性

简单的说：当你发现你给对象加了一个属性，在控制台能打印出来，但是却没有跟新在试图上时，也许这个时候就需要用到 this.$set() 这个方法

1.Vue.set( target, propertyName/index, value )
	数组：第一个参数是要修改的数组, 第二个值是修改的下标或字段,第三个是要修改成什么值。

2. this.$set(this._data,”key”,value');  可用于请求接口后挂在this的data里面的属性上
对象：第一个参数是要修改的对象, 第二个值是修改属性字段,第三个是要修改成什么值。

target: 要更改的数据源（可以是一个对象或者数组） key 要更改的具体数据 （索引） value 重新赋的值。

受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除，即Vue未做到脏数据检查。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。

3.this.$router.resolve() ; 新窗口打开

有些时候需要在单击事件或者在函数中实现页面跳转，新窗口打开

const { href } = this.$router.resolve({
      path: "/iframeChild",
      query: Object.assign(this.$route.query, {
      url: url + params2,
      appName: "",
      cname: "Toilet & Cleaning",
      userInfo: userInfo,
      token: token,
      backUrl: "",
     }),
   });
 window.open(href, "_blank");

4. window.location.origin

取假运算

满足条件赋值；取假运输，从左到右依次判断，遇到假值返回假值，后面不再执行，否则返回最后一个真值

假值： null，undefined，空值

取真运输

默认赋值；取真运算，从左到右依次判断，遇到真值返回真值，后面不在执行，否则返回最后一个假值

const d = false ;
const b = d || 1 ;
log(b) // 1

Vue.Draggable 基于Sortable.js实现的vue拖拽插件

中文文档

完整例子

//定义要被拖拽对象的数组，对数组结构也没有特殊的要求
//元素被拖拽后数组里面的对象顺序也会是随着改变
 let myArr = [
     {id:10,name:"xxx"},
     {id:10,name:"xxx"},
     {id:10,name:"xxx"},
     {id:10,name:"xxx"},
 ]

使dranggable组件

使用dranggable组件 v-modle绑定数组 
<template>
<!--使用draggable组件 v-model绑定数组-->
 <draggable v-model="myArray"  @start="onStart" @end="onEnd">
    <transition-group>
     <div class="item" v-for="item in myArray" :key="item.id">{{item.name}}</div>
    </transition-group>
</draggable>
</template>

被拖拽对象的样式

<style scoped>
     被拖拽对象的样式
    .item{
        padding: 6px;
        background-color: #fdfdfd;
        border: solid 1px #eee;
        margin-bottom: 10px;
        cursor: move;
    }
    选中样式
    .chosen{
        border:1px soild black;
    }
</style>

导入draggable组件

//导入draggable组件
import draggable from 'vuedraggable'
export default {
  //注册draggable组件
   components: {
            draggable,
        },
   data() {
    return { 
      drag:false,
      //定义要被拖拽对象的数组
      myArray:[
        {people:'cn',id:10,name:'www.itxst.com'},
        {people:'cn',id:20,name:'www.baidu.com'},
        {people:'cn',id:30,name:'www.taobao.com'},
        {people:'us',id:40,name:'www.yahoo.com'}
        ] 
    };
  },
  methods: {
     //开始拖拽事件
      onStart(){
        this.drag=true;
      },
      //拖拽结束事件
       onEnd() {
       this.drag=false;
    },
  },
};
</script>