ccalm

ccalm 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 该用户太懒什么也没留下

个人动态

ccalm 赞了回答 · 10月27日

关于在x轴在0-100,y轴在0-100这个区域内,随机个数点,随机分布的问题?

不凌乱就把随机数的区域改小,在一定范围内随机呗

比如说用 index/length 划分区域,每一块区域内随机分配。

关注 3 回答 2

ccalm 提出了问题 · 10月26日

Antd2和Antd3下使用Form+getFieldDecorator后引起重复渲染表单性能差

一个Form下如果有大量包裹了getFieldDecorator的Input组件的话,一旦一个Input的值发生变化,就会导致所有Form下组件全部重新渲染
目前只能使用Antd2和Antd3,有什么比较简单的优化方案吗?

codesandbox重现链接:
https://codesandbox.io/s/antd...

关注 1 回答 0

ccalm 提出了问题 · 2019-02-14

Vue DOM切换渲染的一个BUG

问题描述:

今天发现一个很神奇的渲染问题,当点击to tab1和to tab2切换的时候,发现界面没有被渲染出来,代码如下,大家知道为什么吗?
其中必要条件是(缺1不可):
    * p标签上的z-index:-1
    最外层section的-webkit-overflow-scrolling: touch;
    *{ position: relative;margin: 0;line-height: 1;}
    要在手机上运行,PC上是没问题的,本人是IPHONE7,系统12.1.2,微信和safari必现
<html>
<head>
  <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1, maximum-scale=1,user-scalable=no">
  <script data-original="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <style>
  * {
    font-size:40px;
    position: relative;
    margin: 0;
    line-height: 1;
  }

  </style>
</head>

<body>
  <div id="app">
    <section style="overflow: scroll;-webkit-overflow-scrolling: touch;">
      <hgroup>
        <p @click="tab=1">to tab1</p>
        <p @click="tab=2">to tab2</p>
      </hgroup>

      <hgroup v-if="tab===1" style="margin-top:20px;">
        <p style="z-index: -1" color-black>
          this is tab1
        </p>
      </hgroup>
      <hgroup v-if="tab===2">
        <p color-black>this is tab2</p>
      </hgroup>
    </section>
  </div>
  <script>
  var app = new Vue({
    el: '#app',
    data: {
      tab: 1,
    }
  })
  </script>
</body>

</html>

关注 3 回答 3

ccalm 关注了问题 · 2018-11-27

关于扩展Array的prototype上的方法

我看到可以通过扩展Array对象的原型来增加方法,比如增加一个findIndex方法。
我的问题是采用 Object.defineProperty 来扩展和直接用

Array.prototype.findIndex=function(callback){
    //实现代码
}

这两种方式有什么区别呢?

下面附上大拿们扩展的方法,采用defineProperty方式

// https://tc39.github.io/ecma262/#sec-array.prototype.findIndex
if (!Array.prototype.findIndex) {
  Object.defineProperty(Array.prototype, 'findIndex', {
    value: function(predicate) {
     // 1. Let O be ? ToObject(this value).
      if (this == null) {
        throw new TypeError('"this" is null or not defined');
      }

      var o = Object(this);

      // 2. Let len be ? ToLength(? Get(O, "length")).
      var len = o.length >>> 0;

      // 3. If IsCallable(predicate) is false, throw a TypeError exception.
      if (typeof predicate !== 'function') {
        throw new TypeError('predicate must be a function');
      }

      // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
      var thisArg = arguments[1];

      // 5. Let k be 0.
      var k = 0;

      // 6. Repeat, while k < len
      while (k < len) {
        // a. Let Pk be ! ToString(k).
        // b. Let kValue be ? Get(O, Pk).
        // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
        // d. If testResult is true, return k.
        var kValue = o[k];
        if (predicate.call(thisArg, kValue, k, o)) {
          return k;
        }
        // e. Increase k by 1.
        k++;
      }

      // 7. Return -1.
      return -1;
    }
  });

关注 4 回答 1

ccalm 提出了问题 · 2018-11-05

解决promise中第二个任务reject后catch没有捕获到的问题

代码如下,要怎样才可以在尾部catch能捕获前面任何一个任务的reject?


var task1 = new Promise(function(resolve, reject){
  resolve('success');
});
var task2 = new Promise(function(resolve, reject){
  reject('error'); 
});

task1.then(task2)
.catch(function(error) {
    console.log('catched:', error);
});

报 VM266:5 Uncaught (in promise) error

关注 5 回答 5

ccalm 提出了问题 · 2018-05-28

vue-cli 创建的项目无法启动,报 couldn`t infer a parser

如图,
1、vue init webpack projectname 创建项目
2、项目目录下npm run dev

node v7.4.0

图片描述

关注 2 回答 1

ccalm 提出了问题 · 2018-04-16

vue-router如何在到达某个页面后清空之前的所有历史记录?

A页面->B页面(可以返回A)->C页面(不能返回B也不能返回到A)
这样的效果怎么做到?

关注 7 回答 4

ccalm 提出了问题 · 2017-11-17

POSTMAN中如何将一段JS代码在多个接口中复用?

POSTMAN中如何将一段JS代码在多个接口中复用?
现在只能复制黏贴,但是这样代码修改的话就需要多处修改,有什么办法可以一处编写JS代码,然后多个接口内都能单独调用它

关注 2 回答 0

ccalm 提出了问题 · 2017-07-26

input v-model绑定数据,在个别手机上出现数据没有更新

在IOS系统IPHONE6SP手机上,有很少数的用户在input输入框内输入数据后,v-model绑定的对象并没有发生值的变更,但是通过document.getElementById获取Input输入框检查value的确是有值的

这类问题有啥可以调试的方法?

代码大致如下:
在btnOk触发的时候,app.inputID为空

HTML

<div id="app">
  <input type="text" id="inputID" v-model="inputID"  />
  <button v-on:click="btnOk" >ok</button>
</div>

JS

var app = new Vue({
  el: '#app',
  data:{inputID:""},
  methods:{
    btnOk:function(){
        document.getElementById("inputID").value;//has value
        app.inputID;//no value
    }
  }
});

关注 2 回答 1

ccalm 提出了问题 · 2017-07-26

vue下使用transition过渡动画的BUG(transform tanslate3d设置为百分比)

问题说明:
1、有2个DOM,通过 page1和page2控制隐藏和显示
2、DOM分别配置了transition用以在显示和隐藏的时候有过渡动画
3、过渡动画为 translate3d(0%,0,0) <-> translate3d(100%,0,0) 的过渡
4、页面载入后默认page1=true,page2=false;
5、然后我们触发 page1=false,page2=true; 这个时候期望值是page1从左往右移出屏幕的同时page2从右往左移入屏幕。
6、实际情况是,page2并没有从右往左移入,而是瞬间出现。
7、如果将百分比改为px则没这个问题。

请问有没有什么解决方案?代码如下:

HTML:

<transition name="move" >
    <section v-show="page1">
    </section>
</transition>

<transition name="move" >
    <section v-show="page2">
    </section>
</transition>

CSS:

section{
    position:absolute;
    display: none;
    width:100%;height:100%;
}
.move-enter-active {
  -webkit-animation: move-in .4s;
}
.move-leave-active {
   -webkit-animation: move-out .4s;
}
@-webkit-keyframes move-in {
  0% {
   -webkit-transform: translate3d(100%,0,0);
  }
  100% {
   -webkit-transform: translate3d(0,0,0);
  }
}
@-webkit-keyframes move-out {
  0% {
   -webkit-transform: translate3d(0,0,0);
  }
  100% {
   -webkit-transform: translate3d(100%,0,0);
  }
}

关注 2 回答 0

认证与成就

  • 获得 2 次点赞
  • 获得 12 枚徽章 获得 1 枚金徽章, 获得 2 枚银徽章, 获得 9 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2015-07-16
个人主页被 121 人浏览