张怼怼

张怼怼 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 个人简介什么都没有

个人动态

张怼怼 回答了问题 · 4月21日

解决vue单页面应用多router页面怎么全局加水印?

canvasWM(
    {
      container = document.body,
      width = '300px',
      height = '200px',
      textAlign = 'center',
      textBaseline = 'middle',
      font = '12px Microsoft Yahei',
      fillStyle = 'rgba(184, 184, 184, 0.3)',
      content = '请勿外传',
      rotate = '30',
      zIndex = 10000
    } = {}) {
    const args = arguments[0];
    const canvas = document.createElement('canvas');

    canvas.setAttribute('width', width);
    canvas.setAttribute('height', height);
    const ctx = canvas.getContext('2d');

    ctx.textAlign = textAlign;
    ctx.textBaseline = textBaseline;
    ctx.font = font;
    ctx.fillStyle = fillStyle;
    ctx.rotate(Math.PI / 180 * rotate);
    ctx.fillText(content, parseFloat(width) / 2, parseFloat(height) / 2);

    const base64Url = canvas.toDataURL();
    const __wm = document.querySelector('#__wm');

    const watermarkDiv = __wm || document.createElement('div');

    const styleStr = `
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      z-index:${zIndex};
      pointer-events:none;
      background-repeat:repeat;
      background-image:url('${base64Url}')`;

    watermarkDiv.setAttribute('style', styleStr);
    watermarkDiv.setAttribute('id', '__wm');

    if (!__wm) {
      container.insertBefore(watermarkDiv, container.firstChild);
    }
    const MutationObserver = window.MutationObserver || window['WebKitMutationObserver'];
    if (MutationObserver) {
      let mo = new MutationObserver(() => {
        const __wm = document.querySelector('#__wm');
        // 只在__wm元素变动才重新调用 canvasWM
        if ((__wm && __wm.getAttribute('style') !== styleStr) || !__wm) {
          // 避免一直触发
          mo.disconnect();
          mo = null;
          Message.warning({
            message: '警告: ' + content + ' 在删除水印'
          });

          this.canvasWM(args);
        }
      });
      mo.observe(container, {
        attributes: true,
        subtree: true,
        childList: true
      });
    }
  }

关注 1 回答 1

张怼怼 回答了问题 · 4月11日

解决急求!vue 的 push方法失效!!

你为什么不在接口返回之后直接处理好 newList数据而要用list再去computed呢???

关注 4 回答 2

张怼怼 赞了回答 · 4月1日

解决文件下载,后台返回的是一个外链url,前端应该怎么处理?

// path name
const xhr = new XMLHttpRequest();
    xhr.open('get', path);
    xhr.responseType = 'blob';
    xhr.send();
    xhr.onload = function () {
      if (this.status === 200 || this.status === 304) {
        // 如果是IE10及以上,不支持download属性,采用msSaveOrOpenBlob方法,但是IE10以下也不支持msSaveOrOpenBlob
        if ('msSaveOrOpenBlob' in navigator) {
          navigator.msSaveOrOpenBlob(this.response, name);
          return;
        }
        // const blob = new Blob([this.response], { type: xhr.getResponseHeader('Content-Type') });
        // const url = URL.createObjectURL(blob);
        const url = URL.createObjectURL(this.response);
        let eleLink = document.createElement("a");
        eleLink.href = url;
        eleLink.download = name;
        eleLink.style.display = "none";
        document.body.appendChild(eleLink);
        eleLink.click();
        document.body.removeChild(eleLink);;
        URL.revokeObjectURL(url);
      }
    };

关注 3 回答 1

张怼怼 提出了问题 · 4月1日

解决文件下载,后台返回的是一个外链url,前端应该怎么处理?

现在需求是文件下载,任意类型文件,后台返回的是一个外链url。
我是通过创建 a 标签去下载。但是这个会出现pdf文件和图片预览的情况。
请问怎么做可以避免预览,无论哪种类型文件,都可以通过外链url直接下载?
谢谢

关注 3 回答 1

张怼怼 收藏了文章 · 3月23日

30个很棒的SVG动画

设计人员使用CSS在HTML元素中创建动画。然而,由于HTML元素在创建模式、形状等方面的局限性,它们自然会转向SVG,后者提供了更有趣的功能

使用SVG,我们享受到了对SVG动画良好的浏览器支持,并且我们有更多的方法来创建新的动画。您可以同时使用内置的SVG动画功能或CSS3动画(请注意,并不是所有的事情都可以通过CSS完成,所以仍然需要JavaScript)。另一种方法是使用GSAP或Snap等JavaScript引擎。JS是创建动画的良好实践。

这里有一些很棒的动画SVG。一些使用SVG动画,另一些使用CSS转换来制作基本动画,其余的使用JavaScript的帮助。

Border Animationby Sean McCaffery

仅用CSS制作,当你将鼠标悬停在“hover”指令上时,边框会平滑地围绕文本形成。

demo

Elastic SVG Sidebar by Nikolay Talanov

当你试图把侧边栏从侧面拉开时,它会变得有弹性。一个不错的概念应用于一个材料设计灵感的应用程序侧边栏。

demo

Pull Down to Refresh by Nikolay Talanov

大多数页面允许您“下拉”页面进行刷新。使用此动画,当您“释放”页面时,“发送”图标将变为平面图标并释放到空中。

demo

Animated Gradient on Text by Patrick Young

这里有一个微妙但不容易错过的移动文本梯度,排版爱好者会喜欢。

demo

Heart Animation by Nikolay Talanov

这个动画向你展示了一个心脏图标是如何由两个圆和一个正方形组成的。转换是用CSS动画完成的。

demo

Let’s Travel by jjperezaguinaga

一个动画,说明城市和受欢迎的旅游目的地在世界上。移动和转换是使用CSS动画创建的。

demo

Menu toggle animation by Tamino Martinius

汉堡图标变成十字图标的变形动画。查看两个对象之间的过渡有多平滑。

Menu toggle animation

Animated Infographic by Sdras

Sarah Drasner的精彩动画,由GSAP timeline提供动力。这是一个活生生的信息图,用动画制作。使用滑块从任意点访问帧。

demo

Rain-Bros don’t like JS by cihadturhan

一个独特有趣的循环动画描绘了角色的行走。在这个演示中,对象的移动是SVG和CSS3动画的结合。腿部使用SVG动画,其他部分使用CSS3动画。

demo

Clock by Mohamad Mohebifar

在这个显示当前时间的时钟中,观察秒针的平稳移动。动画完全是使用SVG动画功能制作的。

demo

Rainbow Rocket Man by Chris Gannon

一名宇航员用彩虹动力喷气发动机向太空射击。使用GSAP Tweenmax插件制作的动画不错。

Rainbow Rocket Man

Animated Icon by Luigi De Rosa

不过,在这些动画SVG图标上看看它们能做些什么。创建者使用GSAP创建了这个。

Animated Icon

Flat Workspace by Hoàng Nhật

动画演示了平面样式设计中的工作空间。创作者使用GSAP 制作了一个工作站形成的令人敬畏的动画。

Flat Workspace

The clickable animated icon by Hamish Williams

这是一个很酷的动画利用快照.svg图书馆。点击查看“已发送”邮件。

The clickable animated icon

Diving by Chris Gannon

你有没有跳过湖面上的石头?下面是一个简单的SVG路径动画演示,但是没有石头,也没有湖。

Diving

Motion for the web by LegoMushroom

它有动画,优美的曲调,超级酷的文字入口,有什么不喜欢的?基于mo.js,一个运动图形JavaScript库。

Motion for the web

Animated writing font by Lee Porter

除了使用SVG来绘制一个形状的路径动画之外,您还可以在排版上使用它,就像这个创建者所做的一样。模糊效果使它更棒。

Animated writing font

Gooey menu by Lucas Bebber

在这个设计中,你可以尽情享受gooey效果,这是使用SVG过滤器和添加CSS动画制作的。结果是现实的,非常酷,你可以玩四个不同的版本。

Gooey menu

New Cake by Marco Barría

如何用SVG和CSS动画制作一个分层的生日蛋糕。

New Cake

Thank you by Rachel Smith

只要看看这个简单的感谢信的精彩动画。它是使用SVG和GSAP TweenMax库创建的。

Thank you

CSS vs SVG by Mario Sanchez Maselli

现在让我们看一下CSS和SVG动画的比较,你看到区别了吗?

CSS vs SVG

Walking Dog by Mark Nelson

另一种使SVG动画化的方法是使用精灵图像,就像这个创建者所做的那样。

Walking Dog

Hourglass loader by Leela

使用纯SVG动画(SMIL)制作的创意作品;这里没有CSS或JS来制作动画。

Hourglass loader

Logo Animation by Adem ilter

这是一个很好的动画logo介绍使用内联SVG动画。没有CSS或JS可以让一切正常工作。

Logo Animation

Stats animation by Jonas Badalic

一个漂亮的统计图形与SVG动画支持快照.SVG图书馆。

Stats animation

Ouroboros by Noel Delgado

一个惊人的SVG动画路径。在使用之前,创建者首先在SVG上绘制了一条路径使用tween.js 添加动画。

Ouroboros

Creative Gooey Effects by Lucas Bebber

下面是七种SVG过滤器的创造性应用,可以产生一种粘粘的效果。音乐可视化是我的最爱,动画看起来很不错。

Creative Gooey Effects

Throw the cow by Sarah Drasner

这是一个由TweenMax提供支持的SVG动画,只是为了好玩。牵着牛绕着地球转。它将在“轨道”中旋转。

Throw the cow

Animated Logo by Ali

动画可以是一个很好的小补充起泡啤酒标志。漂亮的小浮动气泡完全是用SVG原生动画语法构建的。

Animated Logo

查看原文

张怼怼 回答了问题 · 3月22日

为什么动态创建<script>标签加载外链JS文件时是异步加载?

关注 4 回答 2

张怼怼 提出了问题 · 3月22日

怎么在vue组件中通过创建script标签引入js并监听都成功加载执行回调函数?

需求如下:
在vue组件中需要动态的创建script标签引入多个js文件,但是window.onload方法并不能监听到js文件加载完毕

const oScript = document.createElement('script');
oScript.type = 'text/javascript';
oScript.src = `${BASE_URL}changedNodeModules/js1`;
document.body.appendChild(oScript);
const oScript2 = document.createElement('script');
oScript2.type = 'text/javascript';
oScript2.src = `${BASE_URL}changedNodeModules/js2`;
document.body.appendChild(oScript2);
window.onload = function() {
  console.log('加载完毕');
};

组件中 onload 方法都没有调用!!!
请问怎么能动态加载多个js,并监听都成功加载执行回调函数???

关注 3 回答 3

张怼怼 提出了问题 · 3月22日

怎么在vue组件中通过创建script标签引入js并监听都成功加载执行回调函数?

需求如下:
在vue组件中需要动态的创建script标签引入多个js文件,但是window.onload方法并不能监听到js文件加载完毕

const oScript = document.createElement('script');
oScript.type = 'text/javascript';
oScript.src = `${BASE_URL}changedNodeModules/js1`;
document.body.appendChild(oScript);
const oScript2 = document.createElement('script');
oScript2.type = 'text/javascript';
oScript2.src = `${BASE_URL}changedNodeModules/js2`;
document.body.appendChild(oScript2);
window.onload = function() {
  console.log('加载完毕');
};

组件中 onload 方法都没有调用!!!
请问怎么能动态加载多个js,并监听都成功加载执行回调函数???

关注 3 回答 3

张怼怼 发布了文章 · 2月19日

vue-json-pretty中自定义key的扩展

背景

  • 在使用vue-json-pretty展示json数据时,有时候我们需要给特定的 key 加一些标注,对其进行一些扩展。
  • 如下面的需求:查询出来的json数据,对部分的key标注等级,并且点击标注会打开对应的一个页面

image

修改方案

  • 对vue-json-pretty源码进行修改,采用的1.7.1版本
  • 在src ---> components ---> app.vue中

    1. 第39到44行

      <span
            v-if="currentDeep > 1 && !Array.isArray(parentData)"
            class="vjs-key"
            >
          {{ prettyKey }}:
      </span>

      改为

      <span
            v-if="currentDeep > 1 && !Array.isArray(parentData)"
            class="vjs-key"
            v-html="keyFormatter(prettyKey)"
      />
    2. 第99到104行

       <span
             v-if="parentData && currentKey && !Array.isArray(parentData)"
             class="vjs-key"
             >
           {{ prettyKey }}:
      </span>

      改为

      <span
            v-if="parentData && currentKey && !Array.isArray(parentData)"
            class="vjs-key"
            v-html="keyFormatter(prettyKey)"
      />
    3. 在57到78行的 vue-json-pretty中添加一个方法

      :custom-key-formatter="customKeyFormatter"
    4. 在methods方法中添加keyFormatter

      keyFormatter (key) {
          return this.customKeyFormatter
              ? this.customKeyFormatter(key, this.path)
          : `${key}:`
      },
    5. 在props中添加customKeyFormatter

      customKeyFormatter: {
          type: Function,
            default: null
      },
  • 以上改完后就可以通过 npm run build方法打包资源,打包资源前得先 npm i 安装对应的依赖

image

使用方式

// 引入组件
import VueJsonPretty from '@/../public/changedNodeModules/vue-json-pretty';
import 'vue-json-pretty/lib/styles.css';
// 注册组件
components: {
    VueJsonPretty,
}
<!-- 使用组件 -->
<VueJsonPretty :path="'res'" :data="executeResult" :custom-key-formatter="customKeyFormatter" />
  • executeResult 是 json数据 ;customKeyFormatter是对key自定的函数

    customKeyFormatter(key, path) {
        // key 是需要自定义的 key;path是 key 对应的路径,到时打印出来就知道了
        // 有时候需要对path根据后台给定的数据进行处理
        const np = path.replace(/\[.*?]/g, '').replace(/^(res.)(hits.)+(_source.)+/g, '');
        const l = this.leave[np];
        if (l) {
            const ll = l.split('@');
            let color;
            switch (ll[0]) {
                case 'S1':
                    color = '#409eff';
                    break;
                case 'S2':
                    color = '#e6a23c';
                    break;
                case 'S3':
                case 'S4':
                case 'S5':
                    color = '#FF4949';
                    break;
            }
            // 根据路径自定义 key 
            return `${key}<a target="_blank" href="${ll[1]}" style="user-select:none;background: ${color};color: #fff; padding: 0 4px; font-weight: bolder">${ll[0]}</a> :`;
        } else {
            return key + ':';
        }
    },
  • 具体使用文档请参考 vue-json-pretty
查看原文

赞 0 收藏 0 评论 0

张怼怼 回答了问题 · 2月3日

解决node中怎么删除一个文件夹下面所有包含某个字符的文件?

const path = require('path');
const fs = require('fs');
// 文件所在目录
fs.readdir(path.join(__dirname) ,function(err,files){
      if (err) {
        return;
      }
      files.forEach(item => {
      //匹配后缀为 txt 名字包含 a 的文件
        if (item.indexOf('txt') > -1 && item.indexOf('a') > -1) {
          fs.rmSync(path.join(__dirname, item))
        }
      })
    })

关注 3 回答 3

认证与成就

  • 获得 28 次点赞
  • 获得 140 枚徽章 获得 3 枚金徽章, 获得 39 枚银徽章, 获得 98 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2017-09-22
个人主页被 2.5k 人浏览