my utils


修改chrome记住密码后自动填充表单的黄色背景？

 input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: #FFF; 
    background-image: none;
    color: #333;
  }

鼠标选中文本时添加背景色

<style>
　　p::selection{
　　　　color:red,
　　　　background:yellow
　　}
</style>


<p>Custom text selection color</p>

使用form表单，提交时按钮使用了button标签但未添加type属性，点击提交会刷新页面。

　　原因：form表单下的按钮在没有指定type类型的时候，button会有一个默认的type="submit"

　　解决办法：1.添加type="button"属性 <button type="button">确认</button>

　　　　　　　2.使用<input type="button"/>

　　　　　　　3.button点击事件里阻止默认行为，event.preventDefault()

　　　　　　　4.如果配合UI框架如element等，请使用框架封装的button按钮，如 el-button

使用reduce方法同时实现map和filter

　　假设有一个数组，你需要更新它的项并且过滤出一部分，如果先使用map后使用filter的话，数组将被遍历两次，此时用reduce方法更方便。

//将数组的值翻倍并且筛选出大于40的数据项
var arr = [10,20,30,40,50];
const result = arr.reduce((list,curNum)=>{
    curNum = curNum * 2;
    if(curNum > 40){
        list.push(curNum);        
    }
    return list;
},[])

result;     //[60,80,100]

使用reduce计算数组中元素出现的次数

//计算数组中元素出现的次数
var arr = ["a","b","c","d","c","a","e","b"];
var result = arr.reduce((obj,item)=>{
    if(item in obj){
        obj[item]++
    }else{
        obj[item] = 1
    }
    return obj
},{})
console.log(result)   //{a: 2, b: 2, c: 2, d: 1, e: 1}

使用reduce将对象的key转换成中文

// 将{name:'Jack',age:19,gender:'male'}中的key值转换成中文;

var obj = {name:'Jack',age:19,gender:'male'};

var objMap = {name:'姓名',age:'年龄',gender:'性别'}; // 创建映射关系

function transKey(data,dataMap){

　　return Object.keys(data).reduce((newObj,currentKey)=>{

　　let newKey = dataMap[currentKey]

　　newObj[newKey] = data[currentKey]

　　return newObj

},{})

}

console.log(transKey(obj,objMap))

// {姓名:'Jack',年龄:19,性别:'male}

使用解构来交换参数数值

//以往我们通常使用 var temp = a; a = b; b = temp;
//来交换两个参数的数值，现在我们不妨用ES6提供的变量的解构赋值来代替。

let param1 = 1;
let param2 = 2;
[param1,param2] = [param2,param1];
console.log(param1)  //2;
console.log(param2)  //1;

封装cookie方法

//set cookie
export function setCookie(name, value, expiredays) {
    let exdate = new Date();
    exdate.setTime(exdate.getTime() + expiredays*24*60*60*1000);
    document.cookie = name + '=' + encodeURI(value) + ((expiredays == null) ? '' : '; expires = ' + exdate.toGMTString());
}

//get cookie
export function getCookie(name, cookieText = '') {
    cookieText = document.cookie;
    const reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)');
    const arr = cookieText.match(reg);
    let ret = '';
    if (arr) {
        ret = decodeURIComponent(arr[2]);
    }
    return ret;
}

//delete cookie
export function deleteCookie(key) {
    let name = decodeURI(key);
    let expires = new Date(0);
    document.cookie = name + '=' + '; expires = ' + expires.toUTCString();
}

格式化日期为YYYY-MM-DD HH：MM：SS格式

function formatDate(time){
    var date = new Date(time);
    var year = date.getFullYear(),
        month = date.getMonth() + 1,//月份是从0开始的
        day = date.getDate(),
        hour = date.getHours(),
        min = date.getMinutes(),
        sec = date.getSeconds();

        month = month < 10 ?  '0' + month : month
        day = day < 10 ?  '0' + day : day
        hour = hour < 10 ?  '0' + hour : hour
        min = min < 10 ?  '0' + min : min
        sec = sec < 10 ? '0 '+ sec : sec

    var newTime = year + '-' +
                month + '-' +
                day + ' ' +
                hour + ':' +
                min + ':' +
                sec;
    return newTime;         
}
formatDate(Date.now())  //2019-07-04 17:27:28

Vue

1. 监听子组件的生命周期
例如有父组件Parent和子组件Child，如果父组件监听到子组件挂载mounted就做一些逻辑处理，常规写法可能如下：

// Parent.vue
<Child @mounted="doSth" />

//Child.vue
mounted(){
　　this.$emit('mounted');
}

这里提供一种简便的方法，子组件无需做任何处理，只需要在父组件引用子组件时使用@hook方法来监听即可，代码如下：

// Parent.vue
<Child @hook:mounted="doSth" />

methods:{
　　doSth(){
　　　　//some codes here
　　}
}

当然这里不仅仅是可以监听到mounted，其他生命周期的事件都可以监听到，例如created updated等等。

2.render函数
　　1.render函数的作用：
　　Vue推荐在绝大数情况下实用模板创建你的HTML，然而当某些特殊场景使用template创建HTML会显得代码繁琐冗长，如根据一个为`level`的prop动态创建标题的组件，你可能想到这样写：

//Parent.vue
<Child :level="1" >hello world</Child>
//Child.vue
<template>
　　<div>
　　　　<h1 v-if="level===1">
　　　　　　<slot></slot>
　　　　</h1>
　　　　<h2 v-if="level===2">
　　　　　　<slot></slot>
　　　　</h2>
　　　　<h3 v-if="level===3">
　　　　　　<slot></slot>
　　　　</h3>
　　　　<h4 v-if="level===4">
　　　　　　<slot></slot>
　　　　</h4>
　　　　<h5 v-if="level===5">
　　　　　　<slot></slot>
　　　　</h5>
　　　　<h6 v-if="level===6">
　　　　　　<slot></slot>
　　　　</h6>
 　　</div>
</template>

<script>
　　export default{
　　　　props:["level"]
　　}
</script>

显然template用在这里不合适，我们来看一下用render函数重写这个组件

//Parent.vue
<template>
　　<div>
　　　　<Child :level="1">Hello World</Child> 
　　</div>
</template>
<script>
　　export default {
　　　　component:{
　　　　　　child:{
　　　　　　　　render(creatElement){
　　　　　　　　　　return creatElement(
　　　　　　　　　　　　'h'+this.level, //标签名称
　　　　　　　　　　　　{
　　　　　　　　　　　　　　style:{
　　　　　　　　　　　　　　　　color:'#f60'
　　　　　　　　　　　　　　}
　　　　　　　　　　　　}, //标签中的属性
　　　　　　　　　　　　this.$slots.default //子节点数组
　　　　　　　　　　) 
　　　　　　　　},
　　　　　　　　props:{
　　　　　　　　　　level:{
　　　　　　　　　　　　required:true,
　　　　　　　　　　　　type:Number
　　　　　　　　　　}
　　　　　　　　}
　　　　　　}
　　　　}
　　}
</script>

　　2.render函数的返回值：Vnode(即虚拟节点)
　　3.render函数的参数：createElement
　　　createElement本身也是一个函数，且有三个参数：
　　　* 要创建的节点: (必填) { string | object | function }，可以是要创建的HTML标签名称，也可以是组件对象，也可以是解析上述任何一种的一个异步函数
　　　* 标签中的属性: (可选) { object }
　　　* 子虚拟节点: (可选) { string | array } 由createElement()构建而成，可以使用字符串来生成“文本虚拟节点”

3.当传输数据较多时，无需一一绑定props的小技巧：$attrs

vm.$attrs 简单来说$attrs保存的是父组件中未绑定props的属性值




//父组件
<template>
　　<div>
　　　　<child1 :aa="aa" :bb="bb" :cc="cc"></child1>
　　</div>
</template>
<script>
import Child1 from './component/child1.vue';
export default {
  name: 'demo',
  data() {
    return {
      aa: 'attrs-aa',
      bb: 'attrs-bb',
      cc: 'attrs-cc',
    };
  },
  components: {
    Child1
  },
  methods: {
    reduce() {
      this.dd--;
    }
  }
};
</script>

//子组件1
<template>
    <div>
　　　　<p>child1获取的attrs：{{$atrrs}}</p>
　　　　<child2 :msg="msg" v-bind="$attrs"></child2>
　　</div>
</template>
<script>
import child2 from './child2.vue';
export default {
  name: 'demo1',
  data() {
    return {
　　　　msg:"msg"
　　};
  },
  components: {
    child2
  },
  methods: {
    
  }
</script>

//子组件2
<template>
    <div>
　　　　<p>child2获取的attrs：{{$atrrs}}</p>
　　</div>
</template>
<script>
export default {
  name: 'demo2',
  data() {
    return {};
  }
</script>

posted @ 2019-07-01 16:35 杰哥斯坦森阅读(449) 评论(0) 收藏举报

刷新页面返回顶部

代码改变世界😆

my utils

公告