
#### **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的。

***





WX-小程序js表单验证

&emsp;&emsp;**写小程序的时候实在不喜欢小程序从下方弹出的默认日历，毕竟丑还不好操作，所以从网上找了个日历组件**  

&emsp;&emsp;写博客记录的时候找了一早上原来的抄袭的博客，实在抱歉没找到，如有博客原著看到麻烦留个言，我加上**转载**  

#### 1、效果图片：  

![][1]

2、js代码  

```js
// components/calendar/calendar.js
/**
 * 日历选择组件
 * 2018-03-04
 * mehaotian
 * github ：https://github.com/mehaotian
 */
Component({
  /**
   * 组件的属性列表
   * data [Date] 当前现实的月份
   * selected [Array] 所有被选择的天
   */
  properties: {
    date: {
      type: null,
      value: new Date()
    },
    selected: {
      type: Array,
      value: [],
      observer(newVal, oldVal) {
        this.getWeek(new Date())
      }
    },
    isOpen: {
      type: Boolean,
      value: false,
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    calShow: true, // 日历组件是否打开
    dateShow: false, // 日期是否选择
    selectDay: '', // 当前选择日期
    canlender: {
      "weeks": []
    }
  },
  ready() {
    this.getWeek(new Date())
    if (this.data.isOpen) {
      this.setData({
        calShow: false,
        dateShow: true
      })
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    dateSelection() {
      if (this.data.isOpen) {
        return
      }
      let self = this;
      if (self.data.calShow) {
        self.setData({
          calShow: false
        }, () => {
          setTimeout(() => {
            self.setData({
              dateShow: true
            }, () => {
              self.triggerEvent('select', { ischeck: !self.data.calShow })
            })
          }, 100)
        })
      } else {
        self.setData({
          dateShow: false
        }, () => {
          setTimeout(() => {
            self.setData({
              calShow: true
            }, () => {
              self.triggerEvent('select', { ischeck: !self.data.calShow })
            })
          }, 300)
        })
      }

    },
    selectDay(e) {
      let index = e.currentTarget.dataset.index;
      let week = e.currentTarget.dataset.week;
      let ischeck = e.currentTarget.dataset.ischeck;
      let canlender = this.data.canlender;
      if (!ischeck) return false;
      let month = canlender.weeks[week][index].month < 10 ? "0" + canlender.weeks[week][index].month : canlender.weeks[week][index].month
      let date = canlender.weeks[week][index].date < 10 ? "0" + canlender.weeks[week][index].date : canlender.weeks[week][index].date
      this.getWeek(canlender.year + "-" + month + "-" + date);

    },
    packup() {

      let self = this;
      if (this.data.isOpen) {
        let year = self.data.canlender.year + "-" + self.data.canlender.month + "-" + self.data.canlender.date
        let _date = self.getDate(year, 0);
        self.getWeek(_date);
        return
      }
      self.setData({
        dateShow: false
      }, () => {
        setTimeout(() => {
          self.setData({
            calShow: true
          }, () => {
            let year = self.data.canlender.year + "-" + self.data.canlender.month + "-" + self.data.canlender.date
            let _date = self.getDate(year, 0);
            self.getWeek(_date);
            self.triggerEvent('select', { ischeck: !self.data.calShow })
          })
        }, 300)
      })
    },
    // 返回今天
    backtoday() { this.getWeek(new Date()); },
    // 前一天|| 后一天
    dataBefor(e) {
      let num = 0;
      let types = e.currentTarget.dataset.type;

      if (e.currentTarget.dataset.id === "0") {
        num = -1;
      } else {
        num = 1
      }
      let year = this.data.canlender.year + "-" + this.data.canlender.month + "-" + this.data.canlender.date
      let _date = this.getDate(year, num, types === 'month' ? "month" : "day");
      this.getWeek(_date);
    },
    // 获取日历内容
    getWeek(dateData) {
      let selected = this.data.selected
      let a = new Date()
      // console.log("im date ", a, typeof a === 'object')
      // 判断当前是 安卓还是ios ，传入不容的日期格式
      if (typeof dateData !== 'object') {
        dateData = dateData.replace(/-/g, "/")
      }
      let _date = new Date(dateData);
      let year = _date.getFullYear(); //年
      let month = _date.getMonth() + 1;  //月
      let date = _date.getDate();//日
      let day = _date.getDay();// 天
      let canlender = [];
      // console.log(selected)
      let dates = {
        firstDay: new Date(year, month - 1, 1).getDay(),
        lastMonthDays: [],// 上个月末尾几天
        currentMonthDys: [], // 本月天数
        nextMonthDays: [], // 下个月开始几天
        endDay: new Date(year, month, 0).getDay(),
        weeks: []
      }

      // 循环上个月末尾几天添加到数组
      for (let i = dates.firstDay; i > 0; i--) {
        dates.lastMonthDays.push({
          'date': new Date(year, month, -i).getDate() + '',
          'month': month - 1
        })
      }
      // 循环本月天数添加到数组
      for (let i = 1; i <= new Date(year, month, 0).getDate(); i++) {
        let have = false;
        for (let j = 0; j < selected.length; j++) {
          let selDate = selected[j].date.split('-');

          if (Number(year) === Number(selDate[0]) && Number(month) === Number(selDate[1]) && Number(i) === Number(selDate[2])) {
            have = true;
          }
        }
        dates.currentMonthDys.push({
          'date': i + "",
          'month': month,
          have
        })
      }
      // 循环下个月开始几天 添加到数组
      for (let i = 1; i < 7 - dates.endDay; i++) {
        dates.nextMonthDays.push({
          'date': i + '',
          'month': month + 1
        })
      }

      canlender = canlender.concat(dates.lastMonthDays, dates.currentMonthDys, dates.nextMonthDays)
      // 拼接数组  上个月开始几天 + 本月天数+ 下个月开始几天
      for (let i = 0; i < canlender.length; i++) {
        if (i % 7 == 0) {
          dates.weeks[parseInt(i / 7)] = new Array(7);
        }
        dates.weeks[parseInt(i / 7)][i % 7] = canlender[i]
      }


      // 渲染数据
      this.setData({
        selectDay: year+"/"+ month + "/" + date,
        "canlender.weeks": dates.weeks,
        'canlender.month': month,
        'canlender.date': date,
        "canlender.day": day,
        'canlender.year': year,
      })
      month = month < 10 ? "0" + month : month
      date = date < 10 ? "0" + date : date
      this.triggerEvent('getdate', { year, month, date })
    },
    /**
     * 时间计算
     */
    getDate(date, AddDayCount, str = 'day') {
      if (typeof date !== 'object') {
        date = date.replace(/-/g, "/")
      }
      let dd = new Date(date)
      switch (str) {
        case 'day':
          dd.setDate(dd.getDate() + AddDayCount)// 获取AddDayCount天后的日期
          break;
        case 'month':
          dd.setMonth(dd.getMonth() + AddDayCount)// 获取AddDayCount天后的日期
          break;
        case 'year':
          dd.setFullYear(dd.getFullYear() + AddDayCount)// 获取AddDayCount天后的日期
          break;
      }
      let y = dd.getFullYear()
      let m = (dd.getMonth() + 1) < 10 ? '0' + (dd.getMonth() + 1) : (dd.getMonth() + 1)// 获取当前月份的日期，不足10补0
      let d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate()// 获取当前几号，不足10补0
      return y + '-' + m + '-' + d
    }
  }
})

```

#### 2、wxml代码段  

```xml

  
  <view  bindtap="dateSelection">
     <image style='width:35px;height:35px' src='/image/time.png'></image>
    
  </view>
  

<view wx:if='{{!calShow}}' class="{{isOpen?'':'calendar-box'}} {{dateShow?'active':''}}" style='z-index:100'>
  <view class="calendar-wrapper {{dateShow?'active':''}}">
    <view class="calendar-panel">
      <view class="date-befor" data-id="0" data-type="month" bindtap='dataBefor'>
        <text class="iconfont">
        <text class='left color'></text>
        </text>
      </view>
      <view class="calendar-panel-box">
        <view>{{canlender.year}}年</view>
        <view>{{canlender.month}}月</view>
      </view>
      <view class="date-after" data-id="1" data-type="month" bindtap='dataBefor'>
        <text class="iconfont">
        <text class='right color'></text>
        </text>
      </view>
      <view class='backtoday' bindtap='backtoday'>
        回到今天
      </view>
    </view>
    <view class="calendar-header">
      <view>日</view>
      <view>一</view>
      <view>二</view>
      <view>三</view>
      <view>四</view>
      <view>五</view>
      <view>六</view>
    </view>
    <view class="calendar-body">
      <block wx:for="{{canlender.weeks}}" wx:for-item="weeks" wx:for-index="week" wx:key="weeks">
        <view class="calender-body-date-week">
          <block wx:for="{{weeks}}" wx:for-item="day" wx:key="day">
            <view class="date {{canlender.month === day.month? '' : 'placeholder'}} {{(day.date==canlender.date||day.checked) && canlender.month == day.month?'date-current': ''}} " data-week="{{week}}" data-index="{{index}}" data-ischeck="{{canlender.month === day.month}}"
              bindtap='selectDay'>
              {{day.date}}
              <view wx:if="{{day.have}}" class="data-circle"></view>
            </view>
          </block>
        </view>
      </block>
    </view>
    <view class="packup" bindtap='packup'>确定</view>
  </view>
</view>
```

#### 3、json代码段  

```json
{
  "component": true,
  "usingComponents": {}
}
```

#### 4、wxss代码段  

```css
/* pages/calendar/calendar.wxss */

.calendar-box {
  position: absolute;
  top: 10%;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0);
  z-index: 999;
  padding-top: 100rpx;
  box-sizing: border-box;
  transition: all 0.3s;
  opacity: 0;
}

.calendar-box.active {
  opacity: 1;
}

.calendar-wrapper {
  width: 100%;
  border-top: 1px #f5f5f5 solid;
  box-sizing: border-box;
  font-size: 26rpx;
  background: #fff;
  transition: all 0.3s;
  transform: translateY(-100%);
}

.calendar-wrapper.active {
  transform: translateY(0%);
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 100rpx;
  /* width: 100%; */
  background: #fff;
  /* padding: 0 30rpx; */
  z-index: 10000;
}

.top-jiantou {
  width: 100rpx;
  height: 100rpx;
  text-align: center;
  box-sizing: border-box;
  line-height: 100rpx;
}

.iconfont {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  color: #52b8f5;
  width: 40rpx;
  height: 35rpx;
}

.iconfont .left, .iconfont .right {
  display: block;
  width: 0;
  height: 0;
  border-top: 20rpx solid transparent;
  border-bottom: 20rpx solid transparent;
}

.iconfont .left {
  border-right: 40rpx solid transparent;
}

.iconfont .right {
  border-left: 40rpx solid transparent;
}

.iconfont .left.color {
  border-right-color: #52b8f5;
}

.iconfont .right.color {
  border-left-color: #52b8f5;
}

.btn {
  margin: 0 30rpx;
  width: 240rpx;
  height: 53rpx;
  border: 1rpx solid #52b8f5;
  border-radius: 26rpx;
  color: #52b8f5;
  font-size: 26rpx;
  box-sizing: border-box;
}

.calendar-panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  height: 80rpx;
}

.backtoday {
  position: absolute;
  right: 0;
  top: 15rpx;
  padding: 0 10rpx;
  padding-left: 5%;
  height: 50rpx;
  line-height: 50rpx;
  border: 1px #52b8f5 solid;
  border-right: none;
  font-size: 28rpx;
  border-top-left-radius: 50rpx;
  border-bottom-left-radius: 50rpx;
  color: #52b8f5;
  background: rgba(82, 184, 245, 0.1);
}

.date-befor, .date-after {
  /* border: 1px red solid; */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80rpx;
  width: 80rpx;
  text-align: center;
  line-height: 80rpx;
  /* margin-right: 20rpx; */
}

/* .date-after {
    margin-left: 20rpx;
} */

.calendar-panel-box {
  display: flex;
}

.calendar-header {
  display: flex;
}

.calendar-header view {
  width: 100%;
  text-align: center;
  line-height: 80rpx;
  color: #52b8f5;
}

.calendar-body {
  display: flex;
  flex-wrap: wrap;
}

.calender-body-date-week {
  display: flex;
  width: 100%;
  border-bottom: 1px #f5f5f5 solid;
}

.date {
  position: relative;
  width: 100%;
  text-align: center;
  color: #1c1c1c;
  background: #fff;
  line-height: 100rpx;
}

.date.active {
  background: red;
}

.placeholder {
  color: #a4a4a4;
}

.date-current {
  background: #52b8f5;
  color: #fff;
}

.data-circle {
  position: absolute;
  bottom: 10rpx;
  left: 0;
  right: 0;
  margin: auto;
  width: 10rpx;
  height: 10rpx;
  border-radius: 50%;
  background: #ff5a5f;
  z-index: 2;
}

.packup {
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  color: #52b8f5;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

```

#### 5、使用方法  

&emsp;5.1、在需要使用的页面先注册，.json文件中

> "usingComponents": {"calendar": "../../components/calendar/calendar"}，  

> **calendar**组件名  
>
> **../../components/calendar/calendar**组件地址  

5.2、在.wxml文件中  

> ```xml
> <calendar bindselect="bindselect" bindgetdate="bindgetdate"></calendar>
> ```

5.3、在.js文件中  

> ```js
>  bindselect(e) {
>     var that = this
>     console.log("点击日历图标=" + JSON.stringify(that))
>   },//日历组件控制
>   bindgetdate(e) {
> 
>     console.log("选择日期=" + e.detail.year + "-" + e.detail.month + "-" + e.detail.date)
> 
>   },//获取选择的日期
> ```

#### 6、组件显示样式可在底层文件中更改  

#### 7、说几个没完善的地方，方法**bindselect(e)**可添加二次点击收起弹出，点击灰色部分日期时(非当前月所显示的日期)可添加跳转到点击月，并且选中方法  

#### 8、当前组件提供了[代码块](https://github.com/18487115313/wx-calendar.git)可导入编辑器查看  

***

[1]:https://raw.githubusercontent.com/18487115313/18487115313.github.io/master/screenshot/20190313103705.png

1.获取屏幕宽高

element-ui中Dialog弹框拖动

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