此文档只记录Flutter中sentry搭建上报

**当前教程只负责搭建Flutter模块**

##### 搭建前提

一、需要搭建Sentry服务[Sentry搭建教程](https://www.jianshu.com/p/ca4ad23a2dd6)

二、熟悉Flutter异步异常同步异常

****

##### 入坑注意事项

一、main方法中将所有初始化操作都包含在runZoned中[1.17.0版本以上推荐使用runZonedGuarded]

> 不包含在里面会导致runZoned[runZonedGuarded]失效(现目前测试是此原因)监听不到异常

二、区分异步异常与同步异常

> 具有async以及请求异常为异步异常,try/catch为同步异常

三、教程中Map对象中有\n符号,是为了在服务页面(html页面自动解析\n符号)显示容易解读

##### 着手搭建

一、异常上报数据

​	1、错误标题

​	2、错误详细位置

​	3、设备信息

​	4、用户信息

二、用到插件

​	1、sentry: ">=3.0.0 <4.0.0"；以官网为准[Flutter官方推荐使用样例](https://flutter.dev/docs/cookbook/maintenance/error-reporting)

​	2、device_info；获取设备信息，版本以插件库为准

三、异常分类处理

​	1、RangeError ；dart异常

​	2、FlutterErrorDetails；页面渲染异常

​	3、MissingPluginException； 服务异常

​	4、DioError ；Dio请求异常

> 异常都为自定义可由error.runtimeType.toString()断定为什么异常

四、异常处理

###### 枚举定义

```dart
enum ErrorExceptionEnum{
  /// dart异常
  RangeError,
  ///页面渲染异常
  FlutterErrorDetails,
   ///服务定义异常
  MissingPluginException,
  ///dio请求异常
  DioError
}
```

###### 请求错误定义

```dart
///异常类型与枚举对应
Map<String ,ErrorExceptionEnum> errorMap = {
  'RangeError' : ErrorExceptionEnum.RangeError,
  'FlutterErrorDetails' : ErrorExceptionEnum.FlutterErrorDetails,
  'MissingPluginException' : ErrorExceptionEnum.MissingPluginException,
  'DioError' : ErrorExceptionEnum.DioError,
};

class ErrorParsing{
  static dynamic errorStatus(dynamic error){
      ///判断是否是请求异常
      ///将请求接口地址获取
    if(errorMap[error.runtimeType.toString()] == ErrorExceptionEnum.DioError){
      return {
        '\n msgData' :error?.response?.data??'',
        '\n 请求域名' :error?.request?.baseUrl ??'',
        '\n 请求类型' : error?.request?.method??'',
        '\n 请求地址' : error?.request?.path??'',
        '\n 错误error' : '$error \n'
      };
    }
    return error;
  }
}
```

###### 获取设备信息

1、Android信息处理

```dart
////自己翻译结果  
Map<String, dynamic> _readAndroidBuildData(AndroidDeviceInfo build) {
    return <String, dynamic>{
      ' \n 最新补丁日期':'${build.version.securityPatch}',
      ' \n 操作系统名' : '${build.version.baseOS??'安卓'}',
      ' \n sdkInt':'${build.version.sdkInt}',
      '\n Android版本': '${build.version.release} ',
      '\n 手机品牌 ': '${build.brand} ',
      '\n 手机详细版本': '${build.model} ',
      '\n 外观设计名 ': '${build.device} ',
      '\n 版本号': '${build.display} ',
      '\n 当前手机唯一标识': '${build.fingerprint} ',
      '\n 内核(单词简写)': '${build.hardware} ',
      '\n 主机名 ': '${build.host} ',
      '\n id': '${build.id} ',
      '\n supported32BitAbis': '${build.supported32BitAbis} ',
      '\n supported64BitAbis': '${build.supported64BitAbis} ',
      '\n supportedAbis': '${build.supportedAbis} ',
      '\n 是否真机': '${build.isPhysicalDevice} \n',
    };
  }

///官方插件提供样例device_info
//  Map<String, dynamic> _readAndroidBuildData(AndroidDeviceInfo build) {
//    return <String, dynamic>{
//      'version.securityPatch': build.version.securityPatch,
//      'version.sdkInt': build.version.sdkInt,
//      'version.release': build.version.release,
//      'version.previewSdkInt': build.version.previewSdkInt,
//      'version.incremental': build.version.incremental,
//      'version.codename': build.version.codename,
//      'version.baseOS': build.version.baseOS,
//      'board': build.board,
//      'bootloader': build.bootloader,
//      'brand': build.brand,
//      'device': build.device,
//      'display': build.display,
//      'fingerprint': build.fingerprint,
//      'hardware': build.hardware,
//      'host': build.host,
//      'id': build.id,
//      'manufacturer': build.manufacturer,
//      'model': build.model,
//      'product': build.product,
//      'supported32BitAbis': build.supported32BitAbis,
//      'supported64BitAbis': build.supported64BitAbis,
//      'supportedAbis': build.supportedAbis,
//      'tags': build.tags,
//      'type': build.type,
//      'isPhysicalDevice': build.isPhysicalDevice,
//      'androidId': build.androidId,
//      'systemFeatures': build.systemFeatures,
//    };
//  }

```

2、IOS设备信息获取

```dart
  Map<String, dynamic> _readIosDeviceInfo(IosDeviceInfo data) {
    return <String, dynamic>{
      '\n 设备名': '${data.name} ',
      '\n 操作系统名': '${data.systemName} ',
      '\n 系统版本': '${data.systemVersion} ',
      '\n 设备型号': '${data.model} ',
      ' \n 设备名(本地)': '${data.localizedModel}',
      '\n 当前设备唯一值': '${data.identifierForVendor} ',
      '\n 是否真机': '${data.isPhysicalDevice} ',
      '\n 版本号': '${data.utsname.version} ',
      '\n 硬件类型': '${data.utsname.machine} \n',
    };
  }
///官方插件提供样例device_info
//  Map<String, dynamic> _readIosDeviceInfo(IosDeviceInfo data) {
//    return <String, dynamic>{
//      'name': data.name,
//      'systemName': data.systemName,
//      'systemVersion': data.systemVersion,
//      'model': data.model,
//      'localizedModel': data.localizedModel,
//      'identifierForVendor': data.identifierForVendor,
//      'isPhysicalDevice': data.isPhysicalDevice,
//      'utsname.sysname:': data.utsname.sysname,
//      'utsname.nodename:': data.utsname.nodename,
//      'utsname.release:': data.utsname.release,
//      'utsname.version:': data.utsname.version,
//      'utsname.machine:': data.utsname.machine,
//    };
//  }
```

3、获取设备信息

```dart
 final DeviceInfoPlugin deviceInfoPlugin = DeviceInfoPlugin();
Future<Map<String, dynamic>> initPlatformState() async {
    Map<String, dynamic> deviceData;
    try {
      if (Platform.isAndroid) {
        deviceData = _readAndroidBuildData(await deviceInfoPlugin.androidInfo);
      } else if (Platform.isIOS) {
        deviceData = _readIosDeviceInfo(await deviceInfoPlugin.iosInfo);
      }
    } on PlatformException {
      deviceData = <String, dynamic>{
        'Error:': 'Failed to get platform version.'
      };
    }
   return deviceData;
  }
```

###### 异常数据上报(可上报到Sentry或者进行接口上报)

```dart
 static Future<Null> reportError(dynamic error, dynamic stackTrace) async {
    print("异常收集 error = ${error.toString()}");
    print("error.type = ${error.runtimeType.toString()}");
    initPlatformState().then((res){
      Map<String,dynamic> _errMap = {
        '\n 错误类型' :error.runtimeType.toString(),
        '\n error' : ErrorParsing.errorStatus(error),
        '\n 设备信息' :res,
        '\n 用户信息' :'${App.currentUser.toString()} \n '
      };
      ...Sentry上报或者接口上报
    }).catchError((err){
      Map<String,dynamic> _errMap = {
        '\n 错误类型' :error.runtimeType.toString(),
        '\n error' : ErrorParsing.errorStatus(error),
        '\n 设备信息' :'获取设备信息出错',
        '\n 用户信息' : '${App.currentUser.toString()} \n '
      };
      ...Sentry上报或者接口上报
    });
  }
```

Sentry上报

```dart
import 'package:sentry/sentry.dart'
final String _dsn = 'Sentry服务模块地址';
final RcSentry.SentryClient _sentry = new RcSentry.SentryClient(dsn: _dsn);

		///提交异常到Sentry服务
      _sentry.captureException(
        exception: _errMap,
        stackTrace: stackTrace,
      );
```

##### 错误页面上报

> 定义错误友好页面
>
> 在main -> 首页中定义接收错误ErrorWidget.builder = getErrorWidget;

```dart
///捕获页面异常，建议布局分块布局，以免出现异常异常模块以下都不会显示
Widget getErrorWidget(FlutterErrorDetails error)  {
  print(
      "异常日志开始+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++");
  print("异常日志=$error");
  print(
      "异常日志结束--------------------------------------------------------------------");
   ///传入错误自动上传
  reportError(error, null);
  return Scaffold(
    body: Center(
        child: Text('错误页面')),
  );
}
```

##### 同步异常上报

```dart
try{
    ...
}catch(err,stack){
    reportError(err, stack);
}
```

##### 异步异常上报

> 只需要在方法上添加async可自行获取异常







Flutter-使用Sentry上报异常搭建


#### **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)在线测试   

------



Tree使用

1.获取屏幕宽高

element-ui中Dialog弹框拖动

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