
#### **Tree使用**

1、动态加载Tree结构时，默认选中以及默认展开功能问题

> 动态数据默认选中能选中，但是默认展开功能会失效
>
> 解决方案 ： 

```react
/**
*@loop方法 官网中方法
*@this.props.selectedKeys 默认选中数据  string[]  
*@this.props.expandedKeys 默认展开数据 string[]
*/
render(){
    return(
        <div>
         	{
                this.props.treeData && this.props.treeData.length > 0 ? 
                <Tree className="draggable-tree"
             		 defaultSelectedKeys={this.props.selectedKeys}
            		 defaultExpandedKeys={this.props.expandedKeys}
           			 blockNode>
              {loop(this.props.treeData)}
          </Tree > : '暂无数据'
            }   
         <div>
    )
}
```

#### **dva使用详解**

> ​	需要在 config.js文件进行开启配置

```react
plugins :[
    ['umi-plugins-react',{
        dva : true
    }]
]
```

在umi中，约定在src/models文件夹中定义model进行数据处理交互

> 以代码为例，使用dva进行分层

1、page页

```react
import React from 'react'
import { connect } from 'dva'

//model层[namespace]唯一值，提供给page页面找到指定的model数据
const namespace = 'spanModel';

/**
* 第一种写法
* [connect中参数解析]
* @val 作用：将page层与model层进行连接，并将数据绑定到this.props
* @dispatch 作用：调用model层effects中方法
*/
@connect((val) => {
   return {
    spanText : val[namespace].spanText,//spanText是mnodel中定义的值
   }
},(dispatch) =>{
   return {
     OnChange : (val) =>{
      dispatch({
        type : `${namespace}/OnChange`,//调用namespace =spanModel的model中OnChange方法
        payload : val //传值
     });
     }
   }
})
class DvaPage extends React.Component{
    render(){
        return(
            <div>
                <span>{this.props.spanText}</span>
                <button onClick = {this.props.OnChange.bind('嘿嘿')}>点击更改值</button>
            </div>
            //.bind("嘿嘿"),自定义方法传值方式之一
        )
    }
}



/* 
* 第二种写法
* 适用于添加了hooks
*/
const dvaState = ()=>{
    return {
    spanText : val[namespace].spanText,
   }
}
const DvaPage =(props) =>{
   const  OnChange = (val) =>{
     const { dispatch } = props;
      dispatch({
        type : `${namespace}/OnChange`,
        payload : val
     });
   }
    return(
        <div>
                <span>{this.props.spanText}</span>
                <button onClick = {this.props.OnChange.bind('嘿嘿')}>点击更改值</button>
          </div>
    )
}
export default connect(dvaState)(DvaPage)

```

2、model页面

```react
export default {
    namespace: 'spanText',
    state: {
        spanText: '',//树结构数组
    },
    reducers: {
        /**
        * @odlstate 当前state
        * @res effects中put过来的值
        */
      setSpanText: (odlstate, res) => {
            if (res.data) { 
                //给state中的spanText更新值
                //也可以直接返回res.data，会自动复制（不推荐）
                return { ...odlstate, spanText: res.data}; 
            }
        }
    },
    effects: {
        /**
        * 写法一
        * @payload page页面传入的参数
        * @call 请求使用
        * @put 提交数据到reducers进行数据更新
        */
        OnChange({ payload }, { call, put }) {
            yield put({
                type: 'setSpanText',
                data: payload,
            }); // Lo
        },
        //写法二
        //带星号是属于异步进行数据操作：如请求操作
        *OnChange({ payload }, { call, put }){}

    }

}
```

#### **hooks用法**

> 还不熟练  简单写写以后完善

```react
import React ,{ useState } from 'react'
import { connect } from 'dva'
//不能适用类的写法
const namespace = 'spanModel';
const DvaPage =(props) =>{
    /**
    * @text 初始值
    * @setText 更改值得方法
    */
    const {text,setText} = useState('嘿嘿'); //可以规定值得类型 useState<string>('嘿嘿')
    return(
        <div>
               <span>{`显示这个文字${text}`}</span>
               <button onClick={() => setText('哈哈')}>更改值</button>
         </div>
    )
}
export default connect(null)(DvaPage)



```

#### **react-redux运用**

1、树结构详解（切勿多次定义属性名。以免树结构层次变深）

>reducers中返回的命名是state树最底下的名字

```react

//reducers.js
import * as Audit from './auditTypes';

//treeData 最终取值属性名
//treeReducer 可在合并时更改
const treeReducer = (state = [], action) => {
    switch(action.type) {
      case Audit.AUDIT_TREE:
        return {
          ...state, treeData: action.treeData
        }
      default:
        return state
    }
  }
  
  export default treeReducer;
```

```react
import { combineReducers } from 'redux';
import treeReducer from './auditReducers';
//treeReducer在此处还能更改树结构（合并处）
const auditReducers = combineReducers({
    treeReducer,
    //treeData : treeReducer 将treeReducer重命名为treeData
  })
  
  export default auditReducers;
```

> 合并后最上层属性为合并时定义的属性名；如：auditReducers
>
> 当取值时取值依次为：树结构.合并名.单个reducers名.定义名；
>
> 如：

```react
//业务.js(取值操作)
const mapStateToProps = (state, ownProps) => {
  return {
    treeData: state.auditReducers.treeReducer.treeData
  }
}
```

**react对函数式组件优化**



React-ant-design使用记录


#### **1.获取屏幕宽高**
> 常规取值

```js
window.onresize = () => {  
    return (() => {    
        window.screenHeight = window.innerHeight;    
        this.screenHeight = window.screenHeight;  
    })()
}
```
> mixins--定义一部分公共的方法或者计算属性,然后混入到各个组件中使用,方便管理与统一修改

```js
const resizeScreen = {  
	data() {    
        return {      
            screenHeight : window.innerHeight,//屏幕高度      
            visibleHeight : window.innerHeight, // 屏幕高度      
            screenWidth : window.innerWidth,//屏幕高度      
            visibleWidth : window.innerWidth, // 屏幕高度    
        }  
    },  
   mounted() {    
       let _this = this;    
       this.$nextTick(() => {      
           window.onresize = function () { // 定义窗口大小变更通知事件        
               return (() => {          
                   window.screenHeight = window.innerHeight;          
                   _this.screenHeight = window.screenHeight;          
                   window.screenWidth = window.innerWidth;         
                   _this.screenWidth = window.screenWidth;        
               })()      
           };    
       })  
   },  
   watch : {    
       screenHeight(val) { //监听屏幕高度变化      
           this.screenHeight = val;      
           this.visibleHeight = this.screenHeight    
       },    
       screenWidth(val) { //监听屏幕高度变化      
           this.screenWidth = val;      
           this.visibleWidth = this.screenWidth    
       },  
   }
};
export default resizeScreen
```

#### **2.vue阻止事件**

> click.prevent 阻止默认事件 
>
> click.stop 阻止按钮事件冒泡

#### **3.表单验证 、 动态验证**

> 普通跨组件验证

``` js
      submitForm() {//子组件验证回调
        return this.$refs.moreintentionRef.validate()
      },
          
      this.$refs.moreIntentionRef.submitForm().then((valid) => {//父组件使用
         if(valid){
            this.dialogVisible = true
          }
      	}, () => {
            this.$message.error("请检查必填项!!!!")
      })
```

> 动态表单验证

```js
//data,动态表单数据  
for (let i in data){
   let refName = `dynamicValidateForm${i}`
   let itemName = `Verify${i}`
   this.$refs.addProblemRef.getProblemVerify(refName,itemName)//调用子类问题验证,多表单提交验证,将结果装进数组
  }
```



``` js
      /**
      *@param [refName] [表单ref,动态生成]
      *@param [str][装动态验证值]
      **/
	getProblemVerify(refName,str){//多动态表单验证
           str  =  new Promise((resolve,reject)=>{
            this.$refs[refName][0].validate((valid)=>{
              if (valid) {
                resolve(true)
              } else {
                reject(false)
              }
            })
          })
        this.validateList.push(str)//将验证信息存储
      },
```

```js
Promise.all(this.$refs.addProblemRef.validateList).then(()=>{//验证Promise生成数据
  //console.log("动态表单验证成功!")
})
```

#### **4.tabs动态绑定组件、多组件**

```vue
<el-tabs type="border-card"  v-model="tabindex" tab-position="left" style="margin: 10px" :style="{'height':fullHeight+'px'}" >
    <template v-for="item in tabs"  >
      <el-tab-pane :name="item.dictId" :label="item.label">
        <div style="height: 100%;">
           <component :is=item.content :height="fullHeight" :ref="`ref${item.dictId}`"></component>
         </div>
       </el-tab-pane>
      </template>
 </el-tabs>
```

```js
 tabs : [
          {
            dictId : '1001',
            label : '客源信息',
            content : 'base-information'//组件名
          },{
            dictId : '1002',
            label : '客配房',
            content : 'c-m-h-index'
          }
     ]
```

> :ref="`ref${item.dictId}`动态调用子组件方法使用方法如下:
>
> ```js
> this.$refs[`ref${this.tabindex}`][0].子组件方法名
> ```
>
> 

#### **5.在滚动条内添加数据让数据想上推动一直显示新添加的数据**

```js
在生命周期updated中使用
    updated (){
        this.speechScrollDown()
    },
```



```js
speechScrollDown(){
  this.$refs['speechScrollbarRef'].wrap.scrollTop =                			     this.$refs['speechScrollbarRef'].wrap.scrollHeight
},
```

#### **6.实现树组件或者动态组件更换绑定数据属性值**

> 动态表单生成时,element-ui只支持value属性,字段不同时需自行跟换

```js
/**
*@param [content][数据当前的属性]
*@param [value][需要跟换而成的数据]
**/
let keyMap = {
  "content" : "value",
  };
```



```js
/**
*@param [keyMap][需要跟换属性的json]
*@param [list][需要跟换的数据]
**/
export function attributeReplace(keyMap,list){
  for(let i = 0;i < list.length;i++){
    let obj = list[i];
    for(let key in obj){
      let newKey = keyMap[key];
      if(newKey){
        obj[newKey] = obj[key];
        delete obj[key];
      }
    }
  }
  return list
}
```

#### **7.对象相互比较看是否相等**

```js
/**
*@param [val1][对象1]
*@param [val2][对象2]
*@return boolean
**/
export function objectContrast(val1,val2){
  for (let propName in val1) {
    if (val1.hasOwnProperty(propName) != val2.hasOwnProperty(propName)) return false
    if (typeof val1[propName] != typeof val2[propName]) return false
  }
  for (let propName in val2) {
    if (val1.hasOwnProperty(propName) != val2.hasOwnProperty(propName)) return false
    if (typeof val1[propName] != typeof val2[propName]) return false
    // if(!this.hasOwnProperty(propName)) continue
    if(val1[propName] !== val2[propName]) return false
    if (val1[propName] instanceof Array && val2[propName] instanceof Array) {
      if (!val1[propName].equals(val2[propName])) return false
    } else if (val1[propName] instanceof Object && val2[propName] instanceof Object) {
      if (!val1[propName].equals(val2[propName])) return false
    } else if (val1[propName] != val2[propName]) {
      return false
    }
  }
  return true
}
```

#### **8.两数组比较是否相等**

> 内容可能是一般数据也可能是Object

```js
/**
 * 比较两个数组是否相等
 * @return boolean
 *@param [val1][数组1]
 * @param [val2][数组2]
 * **/
export function arrayContrast(val1,val2){
  if (val1.length != val2.length) return false
  for (var i = 0, l = val1.length; i < l; i++) {
    if (val1[i] instanceof Array && val2[i] instanceof Array) {
      if (!val1[i].equals(val2[i])) return false
    }else if (val1[i] instanceof Object && val2[i] instanceof Object) {
      if(objectContrast(val1[i],val2[i])){//调用对象比较
        continue
      }else{
        return false
      }
    }else if (val1[i] !== val2[i]) {
      return false
    }
  }
  return true
}
```

#### **9.动态生成单一表单**

> 内容属性必须是value,验证时可直接使用elemen-ui中form表单方法验证
>
> prop内容显示必须 :prop="'domains.' + index + '.value'"格式
>
> 动态属性与默认属性不相同时可使用方法6

```vue
<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="40px">
      <el-form-item
        :show-message ='false'
        v-for="(domain, index) in dynamicValidateForm.domains"
        :label="index + 1+'、'"
        :prop="'domains.' + index + '.value'"
        :key="domain.key"
        :rules="{ required: true, message: ' ', trigger: 'blur'}">
        <div style="display: flex;flex-direction: row;width: 100%;">
          <div  class="inputLeft">
            <el-input size="mini"  :autosize="{ minRows: 1, maxRows: 4}" type="textarea" :rows="1" v-model="domain.value"></el-input>
          </div>
          <div class="buttonRight" >
            <div id="buttonright">
              <el-button icon="el-icon-delete" size="mini" type="danger" @click.prevent="removeDomain(domain)"></el-button>
            </div>
          </div>
        </div>
      </el-form-item>
    </el-form>
```

```js
      removeDomain(item) {//删除
        let index = this.dynamicValidateForm.domains.indexOf(item)
        if (index !== -1) {
          this.dynamicValidateForm.domains.splice(index, 1)
        }
      },
```

#### **10.动态生成复杂表单并验证**

>复杂数据验证看方法3

```vue
<template v-for="(item,index) in problemArrayList">
      <el-form :model="item" :ref="'dynamicValidateForm'+ index" label-width="40px" class="demo-dynamic form_label_item">
		...内部数据与方法8相同         
      </el-form>
    </template>
```

#### **11.使用checkbox生成自定义数据并实现选择**

> v-model="item.checked" 数据必须

```vue
          <template v-for="item in dataList">
            <div>
              <el-checkbox  :value="item"  v-model="item.checked">
                <div style="background-color:#F8F8F8;margin: 5px 15px 0px 15px;">
                  <span class="checkbox_span">
                    {{item.content}}
                </span>
                </div>
                </el-checkbox>
            </div>
          </template>
```

> 使用计算属性动态生成选中数据

```js
computed : {
      foos(){
        return this.dataList.filter(x => {if(x.checked === true){return true}})//生成数据对象
          //.map可生成数据id
      }
    },
```

#### **12.区间处理回显数据[大三元]**

> 记录学习

```js
/**
 * 区间处理字段转为显示字符串
 * 面积区间,楼层区间,价格区间处理
 * @param [val1] [区间开始]
 * @param [val2] [区间结束]
 * @param [str] [区间单位]
 * @param [up] [表示无不限]
 * @param [down] [表示以下]
 * @return [返回拼接字符串]
 * @exception/throws [val1,val2] [可缺省]
 * */
export function sectionToString(val1,val2,str,up ='不限',down='以下'){
  let flag1 = ![null, undefined, ''].includes(val1)
  let flag2 = ![null, undefined, ''].includes(val2)
  let sectionstring = flag1 ? flag2 ? typeof val2 === 'string' ? `${val1}${str}~${val2}` : `${val1}-${val2}${str}` : `${val1}${str}~${up}` : flag2 ? `${val2}${str}${down}` : ''
  //代码可读注释|  1 ? { 1t2 ? (1t2t3 ? 1t2t3t : 1t2t3f) : 1t2f } : 1f2 ? 1f2t : 1f2f
  // 1 :val1不为空
  // 2 :val2不为空
  // 3 :typeof val2 === 'string' 判断val2等于字符串
  //1t2 : 条件1为true 并执行条件2
  //1f2 : 条件1为false 并执行条件2
  //1t2t3 : 条件1 2 为true 并执行条件3
  //1t2t3t : 条件1 2 3都为true -------------------------执行结果:50/万元 -不限
  //1t2t3f : 条件1 2 为true 条件三为false---------------执行结果:50-100/万元
  //1t2t : 条件1 2 为true
  //1t2t3t : 条件1 2 3 为true
  //1t2f : 条件1为true 条件2位false--------------------执行结果:50/万元 -不限
  //1f2t : 条件1为false 条件2位true--------------------执行结果:100/万元以下
  //1f2f : 条件1位false 条件2位false-------------------执行结果:null
  return sectionstring
}
```

#### **13.滚动条触底加载数据[瀑布流,无滚动加载]**

> 其他组件瀑布流加载方式与之一样
>
> 组件调用时  v-scrollbar="scrollbar"    [scrollbar]中写具体方法

```js
/**
*el-scrollbar瀑布流触底加载
*/
Vue.directive('scrollbar',{
  bind(el,binding){
    const selectWrap = el.querySelector('.el-scrollbar__wrap');
    selectWrap.addEventListener('scroll', function () {
      if (this.scrollTop !== 0 && this.scrollHeight - this.scrollTop - this.clientHeight === 0) {
        binding.value();
      }
    })
  }
})
```

#### **14.更改路由数据**

>   import merge from 'webpack-merge'

```js
this.$router.push({
 	query : merge({},{uuid : uuidC,params : paramsC})
  })
```

#### **15.自定义命令-鼠标点击别处收起div**

```js
export default {
  bind(el,binding,vnode){
    function documentHandler(e){
      if(el.contains(e.target)){
        return false;
      }
      if(binding.expression){
        binding.value(e)
      }
    }
    el._vueClickOutside_ = documentHandler;
    document.addEventListener('click',documentHandler);
  },
  unbind(el,binding){
    document.removeEventListener('click',el._vueClickOutside_);
    delete el._vueClickOutside_;
  }
}

```



```js
import dropdown from './dropdown'
//用法，需要使用页面路径引入：import elHouseType from '@/directive/el-hosuType'
//页面注册命令：  directives: { elHouseType }
//模块化单独引用，禁止改动
//不全局引用
const install = function(Vue) {
  Vue.directive('clickoutside', dropdown)
}

if (window.Vue) {
  window['clickoutside'] = dropdown
  Vue.use(install); // eslint-disable-line
}
dropdown.install = install
export default dropdown

```

#### **16.跨几个组件传值[v-bind="$attrs" v-on="$listeners"]**

> 祖先组件 `v-on:getHouseList="getHouseList"

> 子组件 `v-bind="$attrs" v-on="$listeners" ,也可$emit

> 孙组件`$emit

**16.祖先组件直接传值到最底层组件**(等找到能响应式更新写上来)

```js
provide: {
      height: 100
  },
```



```js
inject : ['height'],//接收,使用是直接this.height
```

#### **17.跨页面验证表单[多页面集于tabs也可使用]**

> ```js
> submitForm() {//父组件调用并验证
>     return this.$refs.moreintentionRef.validate()
> },
> ```

> ```js
>  return  new Promise((resolve,reject)=>{//子组件验证后将结果封装传给父组件(适合多种表单子组件公用),只返回验证通过的值,且只有一个参数
>         this.$refs.comming.validate((valid)=>{
>           if (valid) {
>             resolve({flag : true,value : this.commingForm})
>           } else {
>             this.$message.error("请填写必填项!")
>           }
>         })
>       })
> ```
>
> ```js
> commingFormsubmit(){//父组件配合方法4使用
>         this.$refs[`ref${this.tabindex}`][0].submitForm().then((valid)=>{
>           switch (this.tabindex) {//
>             case "1001":
>               this.saveBasicInformation(valid.value)
>           }
>      })
>   }
> ```
>
> 



vue-杂记


#### **element-ui中Dialog弹框拖动**

[自己码的源码](https://github.com/18487115313/element-el-dragDialog.git)

> 借用网上样例，网上样例不支持在浏览器可见范围内拖动，在结合[vue-element-admin](<https://panjiachen.github.io/vue-element-admin-site/zh/>)中弹框拖动的模块合并更改的。
>
> > 问题：与容器的position: absolute冲突


```js
export default {
  bind(el, binding, vnode) {
    //element-ui弹框拖动效果：双击表头全屏，可拖动（区域限制在可视化区域），可拉取宽高
    const dialogHeaderEl = el.querySelector('.el-dialog__header')
    const dragDom = el.querySelector('.el-dialog')
    dialogHeaderEl.style.cssText += ';cursor:move;'
    dragDom.style.cssText += ';top:0px;'
    dialogHeaderEl.onselectstart = new Function("return false");
    let minWidth = 400;
    let minHeight = 300;
    //初始非全屏
    let isFullScreen = false;
    //当前宽高
    let nowWidth = 0;
    let nowHight = 0;
    //当前顶部高度
    let nowMarginTop = 0;
    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
    const getStyle = (function() {
      if (window.document.currentStyle) {
        return (dom, attr) => dom.currentStyle[attr]
      } else {
        return (dom, attr) => getComputedStyle(dom, false)[attr]
      }
    })()
    let moveDown = (e) => {
      // 鼠标按下，计算当前元素距离可视区的距离
      const disX = e.clientX - dialogHeaderEl.offsetLeft
      const disY = e.clientY - dialogHeaderEl.offsetTop
      const dragDomWidth = dragDom.offsetWidth
      const dragDomHeight = dragDom.offsetHeight

      const screenWidth = document.body.clientWidth
      const screenHeight = document.body.clientHeight
      console.log(document);
      const minDragDomLeft = dragDom.offsetLeft
      const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth

      const minDragDomTop = dragDom.offsetTop
      const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomHeight
      // 获取到的值带px 正则匹配替换
      let styL = getStyle(dragDom, 'left')
      let styT = getStyle(dragDom, 'top')
      if (styL.includes('%')) {
        styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100)
        styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100)
      } else {
        styL = +styL.replace(/\px/g, '')
        styT = +styT.replace(/\px/g, '')
      }
      document.onmousemove = function(e) {
        // 通过事件委托，计算移动的距离
        let left = e.clientX - disX
        let top = e.clientY - disY
        //---------边界处理（可视化区域）----------------------------------------------------------------------------------------------------------//
        if (-(left) > minDragDomLeft) {
          left = -minDragDomLeft
        } else if (left > maxDragDomLeft) {
          left = maxDragDomLeft
        }
        if (-(top) > minDragDomTop) {
          top = -minDragDomTop
        } else if (top > maxDragDomTop) {
          top = maxDragDomTop
        }
        //--------------------------------------------------------------------------------------------------------------------------------------------//
        // 移动当前元素
        dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
        // emit onDrag event
        vnode.child.$emit('dragDialog')
      }
      document.onmouseup = function(e) {
        document.onmousemove = null
        document.onmouseup = null
      }
    }
    dialogHeaderEl.onmousedown = moveDown
    dialogHeaderEl.ondblclick = (e) => {
      if (isFullScreen == false) {
        nowHight = dragDom.clientHeight;
        nowWidth = dragDom.clientWidth;
        nowMarginTop = dragDom.style.marginTop;
        dragDom.style.left = 0;
        dragDom.style.top = 0;
        dragDom.style.height = "100VH";
        dragDom.style.width = "100VW";
        dragDom.style.marginTop = 0;
        isFullScreen = true;
        dialogHeaderEl.style.cursor = 'initial';
        dialogHeaderEl.onmousedown = null;
      } else {
        dragDom.style.height = "auto";
        dragDom.style.width = nowWidth + 'px';
        dragDom.style.marginTop = nowMarginTop;
        isFullScreen = false;
        dialogHeaderEl.style.cursor = 'move';
        dialogHeaderEl.onmousedown = moveDown;
      }
    }
    dragDom.onmousemove = function(e) {
      let moveE = e;
      if (e.clientX > dragDom.offsetLeft + dragDom.clientWidth - 10 || dragDom.offsetLeft + 10 > e.clientX) {
        dragDom.style.cursor = 'w-resize';
      } else if (el.scrollTop + e.clientY > dragDom.offsetTop + dragDom.clientHeight - 10) {
        dragDom.style.cursor = 's-resize';
      } else {
        dragDom.style.cursor = 'default';
        dragDom.onmousedown = null;
      }
      dragDom.onmousedown = (e) => {
        const clientX = e.clientX;
        const clientY = e.clientY > document.documentElement.clientHeight ? document.documentElement.clientHeight : e.clientY;
        let elW = dragDom.clientWidth;
        let elH = dragDom.clientHeight;
        let EloffsetLeft = dragDom.offsetLeft;
        let EloffsetTop = dragDom.offsetTop;
        // dragDom.style.userSelect = 'none';
        let ELscrollTop = el.scrollTop;
        //判断点击的位置是不是为头部
        if (clientX > EloffsetLeft && clientX < EloffsetLeft + elW && clientY > EloffsetTop && clientY < EloffsetTop + 100) {
          //如果是头部在此就不做任何动作，以上有绑定dialogHeaderEl.onmousedown = moveDown;
        } else {
          document.onmousemove = function(e) {
            // e.preventDefault(); // 移动时禁用默认事件
            //左侧鼠标拖拽位置
            if (clientX > EloffsetLeft && clientX < EloffsetLeft + 10) {
              //往左拖拽
              if (clientX > e.clientX) {
                dragDom.style.width = elW + (clientX - e.clientX) * 2 + 'px';
              }
              //往右拖拽
              if (clientX < e.clientX) {
                if (dragDom.clientWidth < minWidth) {} else {
                  dragDom.style.width = elW - (e.clientX - clientX) * 2 + 'px';
                }
              }
            }
            //右侧鼠标拖拽位置
            if (clientX > EloffsetLeft + elW - 10 && clientX < EloffsetLeft + elW) {
              //往左拖拽
              if (clientX > e.clientX) {
                if (dragDom.clientWidth < minWidth) {} else {
                  dragDom.style.width = elW - (clientX - e.clientX) * 2 + 'px';
                }
              }
              //往右拖拽
              if (clientX < e.clientX) {
                dragDom.style.width = elW + (e.clientX - clientX) * 2 + 'px';
              }
            }
            //底部鼠标拖拽位置
            if (ELscrollTop + clientY > EloffsetTop + elH - 20 && ELscrollTop + clientY < EloffsetTop + elH) {
              //往上拖拽
              if (clientY > e.clientY) {
                if (dragDom.clientHeight < minHeight) {} else {
                  dragDom.style.height = elH - (clientY - e.clientY) * 2 + 'px';
                }
              }
              //往下拖拽
              if (clientY < e.clientY) {
                dragDom.style.height = elH + (e.clientY - clientY) * 2 + 'px';
              }
            }
          };
          //拉伸结束
          document.onmouseup = function(e) {
            document.onmousemove = null;
            document.onmouseup = null;
          };
        }
      }
    }
  }
}

```

---

```JS
import drag from './drag'
//用法，需要使用页面路径引入：import elDragDialog from '@/directive/el-dragDialog'
//页面注册命令：  directives: { elDragDialog }
//模块化单独引用，禁止改动
//不全局引用
const install = function(Vue) {
  Vue.directive('el-drag-dialog', drag)
}

if (window.Vue) {
  window['el-drag-dialog'] = drag
  Vue.use(install); // eslint-disable-line
}
drag.install = install
export default drag

```



vue-dialog弹框拖动

#### 1、**根据属性来更新一个数组中的对象**  

```js
const arr = [ {id: 1, score: 1}, {id: 2, score: 2}, {id: 3, score: 4}];
const newValue = {id: 3, score: 3}
const result = arr.map(x => x.id === newValue.id ? newValue : x); 
document.write(JSON.stringify(result)  + "<br />")
//或者
const updated = arr.map(function(item){
    return item.id == newValue.id ? newValue : item ;
});
document.write(JSON.stringify(updated)  + "<br />")
```

代码提供[w3school](http://www.w3school.com.cn/tiy/t.asp?f=jseg_isNaN)在线测试   

------

#### 2、**数组去重**  

```js
const numbers = [1, 2, 1, 1, 2, 1, 3, 4, 1 ];
const uniq = [...new Set(numbers)] // => [ 1, 2, 3, 4 ];
const uniq2 = Array.from(new Set(numbers)) // => [ 1, 2, 3, 4 ];
document.write(JSON.stringify(uniq)  + "<br />")
document.write(JSON.stringify(uniq2)  + "<br />")
```

代码提供[w3school](http://www.w3school.com.cn/tiy/t.asp?f=jseg_isNaN)在线测试     

------

#### 3、**根据属性删除数组中的一个对象**  

```js
 // 根据属性删除数组中的对象,利用filter进行过滤数组中id相同的项
 const initial = [ {id: 1, score: 1}, {id: 2, score: 2}, {id: 3, score: 4}];
 const removeId = 3;
 const without3 = initial.filter(x => x.id !== removeId);
document.write(JSON.stringify(without3)  + "<br />")
```

代码提供[w3school](http://www.w3school.com.cn/tiy/t.asp?f=jseg_isNaN)在线测试   

------

#### 4、**删除一个对象上的属性（key）**  

```js
//利用es6的 ...运算符将其他属性和ａ属性分开来
const obj = {a: 1, b: 2, c: 3};
const {a, ...newObj} = obj;
document.write(JSON.stringify(newObj)  + "<br />")
```

代码提供[w3school](http://www.w3school.com.cn/tiy/t.asp?f=jseg_isNaN)在线测试   

------

#### 5、**两个Set对象相减**  

```js
//去掉s3中的2和4
 const s3 = [ 1, 2, 3, 4, 5, 4, 5, 6, 2, 2, 4 ];
 const s2 = [ 2, 4 ];
 const subtracted1 = s3.filter(x => s2.indexOf(x) < 0);
 document.write(JSON.stringify(subtracted1)  + "<br />")
```

代码提供[w3school](http://www.w3school.com.cn/tiy/t.asp?f=jseg_isNaN)在线测试   

------

#### 6、**数组对象去重**  

```js
let person = [
     {id: 0, name: "小明"},
     {id: 1, name: "小张"},
     {id: 2, name: "小李"},
     {id: 3, name: "小孙"},
     {id: 1, name: "小周"},
     {id: 2, name: "小陈"},   
];

let obj = {};

let peon = person.reduce((cur,next) => {
    obj[next.id] ? "" : obj[next.id] = true && cur.push(next);
    return cur;
},[]) //设置cur默认类型为数组，并且初始值为空的数组
document.write(JSON.stringify(peon)  + "<br />")
```

代码提供[w3school](http://www.w3school.com.cn/tiy/t.asp?f=jseg_isNaN)在线测试   

------

#### 7、**字符串转bool类型**

```js
let flag = 'true';//支持大小写
eval(flag.toLowerCase())
```

代码提供[w3school](http://www.w3school.com.cn/tiy/t.asp?f=jseg_isNaN)在线测试   

------

#### 8、**获取url地址后参数内容**

```js
 /**
  * 根据传入name获取url后缀中数据
  * @param {参数名} name 
  */
 export const GetQueryString = (name) => {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = decodeURI(window.location.search.substr(1)).match(reg);
    if (r != null)return unescape(r[2]);
    return null;
}
```

代码提供[w3school](http://www.w3school.com.cn/tiy/t.asp?f=jseg_isNaN)在线测试   

------



JS-数据处理

&emsp;&emsp;**当前方法也是在网上找的，找不到原作者了，如有侵权请告知**

#### 1、表单验证js（**WxValidate**）

```js
/**
 * 表单验证
 *
 * @param {Object} rules 验证字段的规则
 * @param {Object} messages 验证字段的提示信息
 *
 */
class WxValidate {
    constructor(rules = {}, messages = {}) {
        Object.assign(this, {
            data: {},
            rules,
            messages,
        })
        this.__init()
    }

    /**
     * __init
     */
    __init() {
        this.__initMethods()
        this.__initDefaults()
        this.__initData()
    }

    /**
     * 初始化数据
     */
    __initData() {
        this.form = {}
        this.errorList = []
    }

    /**
     * 初始化默认提示信息
     */
    __initDefaults() {
        this.defaults = {
            messages: {//默认提示，需要验证且没有书写提示内容时
                required: '这是必填字段。',
                email: '请输入有效的电子邮件地址。',
                tel: '请输入11位的手机号码。',
                url: '请输入有效的网址。',
                date: '请输入有效的日期。',
                dateISO: '请输入有效的日期（ISO），例如：2009-06-23，1998/01/22。',
                number: '请输入有效的数字。',
                digits: '只能输入数字。',
                idcard: '请输入18位的有效身份证。',
                equalTo: this.formatTpl('输入值必须和 {0} 相同。'),
                contains: this.formatTpl('输入值必须包含 {0}。'),
                minlength: this.formatTpl('最少要输入 {0} 个字符。'),
                maxlength: this.formatTpl('最多可以输入 {0} 个字符。'),
                rangelength: this.formatTpl('请输入长度在 {0} 到 {1} 之间的字符。'),
                min: this.formatTpl('请输入不小于 {0} 的数值。'),
                max: this.formatTpl('请输入不大于 {0} 的数值。'),
                range: this.formatTpl('请输入范围在 {0} 到 {1} 之间的数值。'),
            }
        }
    }

    /**
     * 初始化默认验证方法
     */
    __initMethods() {
        const that = this
        that.methods = {
            /**
             * 验证必填元素
             */
            required(value, param) {
                if (!that.depend(param)) {
                    return 'dependency-mismatch'
                } else if (typeof value === 'number') {
                    value = value.toString()
                } else if (typeof value === 'boolean') {
                    return !0
                }

                return value.length > 0
            },
            /**
             * 验证电子邮箱格式
             */
            email(value) {
                return that.optional(value) || /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test(value)
            },
            /**
             * 验证手机格式
             */
            tel(value) {
                return that.optional(value) || /^1[34578]\d{9}$/.test(value)
            },
            /**
             * 验证URL格式
             */
            url(value) {
                return that.optional(value) || /^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})).?)(?::\d{2,5})?(?:[/?#]\S*)?$/i.test(value)
            },
            /**
             * 验证日期格式
             */
            date(value) {
                return that.optional(value) || !/Invalid|NaN/.test(new Date(value).toString())
            },
            /**
             * 验证ISO类型的日期格式
             */
            dateISO(value) {
                return that.optional(value) || /^\d{4}[\/\-](0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])$/.test(value)
            },
            /**
             * 验证十进制数字
             */
            number(value) {
                return that.optional(value) || /^(?:-?\d+|-?\d{1,3}(?:,\d{3})+)?(?:\.\d+)?$/.test(value)
            },
            /**
             * 验证整数
             */
            digits(value) {
                return that.optional(value) || /^\d+$/.test(value)
            },
            /**
             * 验证身份证号码
             */
            idcard(value) {
                return that.optional(value) || /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(value)
            },
            /**
             * 验证两个输入框的内容是否相同
             */
            equalTo(value, param) {
                return that.optional(value) || value === that.data[param]
            },
            /**
             * 验证是否包含某个值
             */
            contains(value, param) {
                return that.optional(value) || value.indexOf(param) >= 0
            },
            /**
             * 验证最小长度
             */
            minlength(value, param) {
                return that.optional(value) || value.length >= param
            },
            /**
             * 验证最大长度
             */
            maxlength(value, param) {
                return that.optional(value) || value.length <= param
            },
            /**
             * 验证一个长度范围[min, max]
             */
            rangelength(value, param) {
                return that.optional(value) || (value.length >= param[0] && value.length <= param[1])
            },
            /**
             * 验证最小值
             */
            min(value, param) {
                return that.optional(value) || value >= param
            },
            /**
             * 验证最大值
             */
            max(value, param) {
                return that.optional(value) || value <= param
            },
            /**
             * 验证一个值范围[min, max]
             */
            range(value, param) {
                return that.optional(value) || (value >= param[0] && value <= param[1])
            },
        }
    }

    /**
     * 添加自定义验证方法
     * @param {String} name 方法名
     * @param {Function} method 函数体，接收两个参数(value, param)，value表示元素的值，param表示参数
     * @param {String} message 提示信息
     */
    addMethod(name, method, message) {
        this.methods[name] = method
        this.defaults.messages[name] = message !== undefined ? message : this.defaults.messages[name]
    }

    /**
     * 判断验证方法是否存在
     */
    isValidMethod(value) {
        let methods = []
        for (let method in this.methods) {
            if (method && typeof this.methods[method] === 'function') {
                methods.push(method)
            }
        }
        return methods.indexOf(value) !== -1
    }

    /**
     * 格式化提示信息模板
     */
    formatTpl(source, params) {
        const that = this
        if (arguments.length === 1) {
            return function() {
                let args = Array.from(arguments)
                args.unshift(source)
                return that.formatTpl.apply(this, args)
            }
        }
        if (params === undefined) {
            return source
        }
        if (arguments.length > 2 && params.constructor !== Array) {
            params = Array.from(arguments).slice(1)
        }
        if (params.constructor !== Array) {
            params = [params]
        }
        params.forEach(function(n, i) {
            source = source.replace(new RegExp("\\{" + i + "\\}", "g"), function() {
                return n
            })
        })
        return source
    }

    /**
     * 判断规则依赖是否存在
     */
    depend(param) {
        switch (typeof param) {
            case 'boolean':
                param = param
                break
            case 'string':
                param = !!param.length
                break
            case 'function':
                param = param()
            default:
                param = !0
        }
        return param
    }

    /**
     * 判断输入值是否为空
     */
    optional(value) {
        return !this.methods.required(value) && 'dependency-mismatch'
    }

    /**
     * 获取自定义字段的提示信息
     * @param {String} param 字段名
     * @param {Object} rule 规则
     */
    customMessage(param, rule) {
        const params = this.messages[param]
        const isObject = typeof params === 'object'
        if (params && isObject) return params[rule.method]
    }

    /**
     * 获取某个指定字段的提示信息
     * @param {String} param 字段名
     * @param {Object} rule 规则
     */
    defaultMessage(param, rule) {
        let message = this.customMessage(param, rule) || this.defaults.messages[rule.method]
        let type = typeof message

        if (type === 'undefined') {
            message = `Warning: No message defined for ${rule.method}.`
        } else if (type === 'function') {
            message = message.call(this, rule.parameters)
        }

        return message
    }

    /**
     * 缓存错误信息
     * @param {String} param 字段名
     * @param {Object} rule 规则
     * @param {String} value 元素的值
     */
    formatTplAndAdd(param, rule, value) {
        let msg = this.defaultMessage(param, rule)

        this.errorList.push({
            param: param,
            msg: msg,
            value: value,
        })
    }

    /**
     * 验证某个指定字段的规则
     * @param {String} param 字段名
     * @param {Object} rules 规则
     * @param {Object} data 需要验证的数据对象
     */
    checkParam(param, rules, data) {

        // 缓存数据对象
        this.data = data

        // 缓存字段对应的值
        const value = data[param] !== null && data[param] !== undefined ? data[param] : ''

        // 遍历某个指定字段的所有规则，依次验证规则，否则缓存错误信息
        for (let method in rules) {

            // 判断验证方法是否存在
            if (this.isValidMethod(method)) {

                // 缓存规则的属性及值
                const rule = {
                    method: method,
                    parameters: rules[method]
                }

                // 调用验证方法
                const result = this.methods[method](value, rule.parameters)

                // 若result返回值为dependency-mismatch，则说明该字段的值为空或非必填字段
                if (result === 'dependency-mismatch') {
                    continue
                }

                this.setValue(param, method, result, value)

                // 判断是否通过验证，否则缓存错误信息，跳出循环
                if (!result) {
                    this.formatTplAndAdd(param, rule, value)
                    break
                }
            }
        }
    }

    /**
     * 设置字段的默认验证值
     * @param {String} param 字段名
     */
    setView(param) {
        this.form[param] = {
            $name: param,
            $valid: true,
            $invalid: false,
            $error: {},
            $success: {},
            $viewValue: ``,
        }
    }

    /**
     * 设置字段的验证值
     * @param {String} param 字段名
     * @param {String} method 字段的方法
     * @param {Boolean} result 是否通过验证
     * @param {String} value 字段的值
     */
    setValue(param, method, result, value) {
        const params = this.form[param]
        params.$valid = result
        params.$invalid = !result
        params.$error[method] = !result
        params.$success[method] = result
        params.$viewValue = value
    }

    /**
     * 验证所有字段的规则，返回验证是否通过
     * @param {Object} data 需要验证数据对象
     */
    checkForm(data) {
        this.__initData()

        for (let param in this.rules) {
            this.setView(param)
            this.checkParam(param, this.rules[param], data)
        }

        return this.valid()
    }

    /**
     * 返回验证是否通过
     */
    valid() {
        return this.size() === 0
    }

    /**
     * 返回错误信息的个数
     */
    size() {
        return this.errorList.length
    }

    /**
     * 返回所有错误信息
     */
    validationErrors() {
        return this.errorList
    }
}

export default WxValidate
```



#### 2、需要验证页面引入以上（**WxValidate**）js

> `import WxValidate from '../lib/WxValidate.js'`

> 引用名：`WxValidate `

> 引用路径：`../lib/WxValidate.js`  

在引入的js的data中定义一个对象，如：  

```html
<form bindsubmit="formSubmit">
  <view class="section">
  <input name="CityID" placeholder="测试输入"></input>
</view>
  <view class="section">
  <input name="Name" placeholder="测试输入"></input>
</view>
  <view class="section">
  <input name="Year" placeholder="测试输入日期"></input>
</view>
  <view class="section">
  <input name="FrName" placeholder="测试输入"></input>
</view>
  <view class="section">
  <input name="FrTel" maxlength="11" type ='number'  placeholder="测试输入电话号码"></input>
</view>
   <button style='width:50%;background-color:#52b8f5;color:white;' formType="submit">保存</button>
</form>
```

```js
  initValidate() {//在js 写个方法，放进onLoad，当做初始化
  const rules = {
      CityID: { required: true, },//true OR false 控制是否验证，也可直接不写name
      Name: { required: true },
      Year: { required: true, dateISO: true},
      FrName: { required: true },
      FrTel: { required: true, tel: true },//第二个参数属于特殊字符验证
    }

    const messages = {
      CityID: { required: '请选择乡镇' },
      Name: { required: '请输入养殖场名称' },
      Year: { required: '请输入建场时间' },
      FrName: { required: '请输入法人名' },
      FrTel: { required: '请输入法人手机号', tel: '请输入正确的手机号' },
    }
    this.WxValidate = new WxValidate(rules, messages)
  },
```

#### 3、表单提交 **formSubmit**  

```js
  showModal(error) {//验证信息弹出
    wx.showModal({
      content: error.msg,
      showCancel: false,
    })
  },
  formSubmit(e)
  {
    var that = this
    const params = e.detail.value
    if (!this.WxValidate.checkForm(params)) {//获取表单信息进行验证
      const error = this.WxValidate.errorList[0]
      this.showModal(error)
      return false
    }
  },
```

**目前大概就是酱紫**，我写个[代码段](https://github.com/18487115313/wx-Validate.git)吧   GitHub的。

***





Tree使用

1.获取屏幕宽高

element-ui中Dialog弹框拖动

1、根据属性来更新一个数组中的对象