5/7 总结

总结近期遇到的一些问题

看到相似功能可以模仿开源源码学习, 达到对应的效果

1.(保存前监听校验) 判断是否数据更新, 可以通过 , $(form ::input).change() ,触发了表明值发生了变化
例:
//也可以 json化后判断 新旧字符串是否相等

$("form :input").change(function (){		
        //每次修改触发此处 
		$("#form_save").attr("flag","1");
	});					
	$('.am-header-left .font_color').click(function(){
		if($("#form_save").attr("flag")){		
			f = {msg:"是否保存已修改的信息？",cancleFunc:function(){window.location.href="javascript:history.go(-1);"}}
			openSubmit(f,function(){
				$('#form_save').click()
			})		
						
		}else{
			window.location.href="{site_url('resume','ResumeUpdate')}";
		}
	})

2. 点击阴影部分自动收起, 隐藏
   // 使用jq进行判断的时候 , 通常使用e.target表示当前点击对象, 不建议使用this

jq //通过is 判断当前点击
$('.input-list').on('click',function(e){
		// console.log(e.target);
		if(!($('.input-li').is(e.target))&&!$(e.target).parents('.input-li').length){
			$('.input-list').hide()
		}
	})


js //contain 判断包含关系


vue ,// 对于vue可以使用自定义指令实现功能(也是在创建一个事件到body,用完就删除)

3. 通过 computed 与watch 结合使用监听特定对应组合对象达到判断按钮是否置灰

computed: {
      liveId() {
        return this.$route.query["live_id"];
      },
      unionid() {
        return this.$route.query.unionid || localStorage.getItem("unionid")
      },
      isAllExist() {
        let { phone, code} = this
        return {phone,code}
      }
    },
    watch: {
      isAllExist() {
        if (handle.checkPhone(this.phone) && this.code) {
          this.isBindDisable = false
        } else {
          this.isBindDisable = true
        }
      }
    },