WEB菜鸟

WEB菜鸟 查看完整档案

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

个人动态

WEB菜鸟 提出了问题 · 4月8日

解决求Postman 8.1.0 MAC 最新版的使用教程,新版都不知道怎么用了...

image

关注 2 回答 1

WEB菜鸟 回答了问题 · 3月24日

Vscode更新以后一键生成HTML代码失效,求助。

解决了是更新后的问题,设置中添加以下代码,附带链接https://www.php.cn/tool/vscod...
"emmet.triggerExpansionOnTab": true,

"emmet.includeLanguages": {
    "vue-html": "html",
    "vue": "html"
}

关注 2 回答 2

WEB菜鸟 提出了问题 · 3月24日

Vscode更新以后一键生成HTML代码失效,求助。

  1. 原先譬如我想生成3个带class的div,直接快捷键 div.*3 + Tab就OK了,
  2. 目前问题是div.+Tab生成单独的没问题但是后面加上*3就失效了按了没反应。
  3. 这是在vue环境中。

关注 2 回答 2

WEB菜鸟 收藏了文章 · 2020-05-28

一行js代码实现时间戳转时间格式

一行代码实现时间戳转时间格式

前端开发过程中,常常需要将时间戳转化为标准时间格式供用户浏览。不借助方法库的情况下,如何又快又好的实现呢?下面介绍两种方法。

老方法

平常用的基本是这个方法,用Date方法依次将年月日时分秒一个个算出来,然后拼接成需要的时间格式字符串。

function transformTime(timestamp = +new Date()) {
    if (timestamp) {
        var time = new Date(timestamp);
        var y = time.getFullYear(); //getFullYear方法以四位数字返回年份
        var M = time.getMonth() + 1; // getMonth方法从 Date 对象返回月份 (0 ~ 11),返回结果需要手动加一
        var d = time.getDate(); // getDate方法从 Date 对象返回一个月中的某一天 (1 ~ 31)
        var h = time.getHours(); // getHours方法返回 Date 对象的小时 (0 ~ 23)
        var m = time.getMinutes(); // getMinutes方法返回 Date 对象的分钟 (0 ~ 59)
        var s = time.getSeconds(); // getSeconds方法返回 Date 对象的秒数 (0 ~ 59)
        return y + '-' + M + '-' + d + ' ' + h + ':' + m + ':' + s;
      } else {
          return '';
      }
}
transformTime(); // "2018-8-8 12:9:12"

老方法改进版

上面的转换方法,通过将时间戳转换为Date实例,利用Date对应的方法获取对应的年月日时分秒,获取的时间格式是‘2018-8-8 12:9:12’,看着有点别扭。为了转化为我们常用的时间格式,还需要注意对小于10的值,在前面添加字符串‘0’,转换为‘2018-08-08 12:09:12’这种时间格式。

function transformTime(timestamp = +new Date()) {
    if (timestamp) {
        var time = new Date(timestamp);
        var y = time.getFullYear();
        var M = time.getMonth() + 1;
        var d = time.getDate();
        var h = time.getHours();
        var m = time.getMinutes();
        var s = time.getSeconds();
        return y + '-' + addZero(M) + '-' + addZero(d) + ' ' + addZero(h) + ':' + addZero(m) + ':' + addZero(s);
      } else {
          return '';
      }
}
function addZero(m) {
    return m < 10 ? '0' + m : m;
}
transformTime(); // "2018-08-08 12:09:12"

对返回小于10的时间数值进行处理,用‘addZero’方法为字符串添加‘0’,这样格式就对称了。

新思路

为了将时间戳转换为我们需要的时间格式,我们写了两个函数,加起来十几行。前段时间,部门大佬告知了另外一种方式,一行代码完成时间戳转换为‘YYYY-MM-DD HH:mm:ss’形式的时间格式,顿时代码精简了很多,话不多说,亮出代码

function time(time = +new Date()) {
    var date = new Date(time + 8 * 3600 * 1000); // 增加8小时
    return date.toJSON().substr(0, 19).replace('T', ' ');
}
time(); // "2018-08-09 18:25:54"

Date的‘toJSON’方法返回格林威治时间的JSON格式字符串,实际是使用‘toISOString’方法的结果。字符串形如‘2018-08-09T10:20:54.396Z’,转化为北京时间需要额外增加八个时区,我们需要取字符串前19位,然后把‘T’替换为空格,即是我们需要的时间格式。

function time(time = +new Date()) {
    var date = new Date(time + 8 * 3600 * 1000);
    return date.toJSON().substr(0, 19).replace('T', ' ').replace(/-/g, '.');
}
time(); // "2018.08.09 18:25:54"

把时间格式中的‘-’修改为‘.’或者其他符号都是可以的。对比老方法,这种方法代码量比以前省了不止一星半点的,读起来也简洁多了。如果时间格式需要毫秒数,只需要获取前23位字符串,和上面一样用replace方法替换。

查看原文

WEB菜鸟 赞了文章 · 2019-08-20

CSS3常见问题:100vh在移动浏览器中不是固定的,恒定的

站长博客:https://www.pipipi.net/

前言
加载页面时所有浏览器都有一个顶级菜单(例如显示地址栏),当您开始滚动页面时,该菜单会向上滑动。这个时候该菜单会变小,由于100vh仅在视口的可见部分计算,因此会导致所有布局都重新绘制并重新调整,对用户体验的糟糕跳跃效果。

参见图如下,明显可见第二个菜单栏变小了。
图1
图2

正文
不幸的是这个问题是一直有意存在的.....
这是一个众所周知的问题(至少在safari mobile中是存在的),这是有意的,因为它可以防止其他问题。 参见Benjamin Poulain回复webkit bug:

这完全是故意的。我们需要花费大量的工作才能达到这个效果。 CSS3常见问题:100vh在移动浏览器中不是固定的,恒定的-创客青年博客

基本问题是:滚动时可见区域会动态变化。如果我们相应地更新CSS视口高度,我们需要在滚动期间更新布局。不仅如此看起来像狗屎,但在大多数页面中以60
FPS执行此操作几乎是不可能的(60 FPS是iOS上的基线帧速率)。

动态更新高度不起作用,我们有几个选择:在iOS上删除视口单元,匹配iOS 8之前的文档大小,使用小视图大小,使用大视图大小。

根据我们的数据,使用更大的视图大小是最好的折衷方案。大多数使用视口单元的网站在大多数时候看起来很棒。
可以看考Nicolas Hoizey大神对这个问题的研究: https://nicolas-hoizey.com/20...

不打算修复

目前,除了避免在移动设备上使用视口高度之外,没有更好的解决办法。移动Chrome似乎也想要适应这一点,尽管它不确定它们是否会贯彻执行。(参考链接

查看原文

赞 3 收藏 2 评论 0

WEB菜鸟 提出了问题 · 2019-08-14

解决CSS Flex 弹性盒子布局问题

问题描述

  1. 弹性盒子布局,子元素内容从左到右,超出换行,如果子元素内容不等,高度就不一致这种情况我希望换行的子元素能自动填充高度使排列更整齐,贴上图片;

相关代码

display: flex;
flex-flow: row wrap;

实现效果: 换行的子元素自动填充空白部分:

clipboard.png

关注 2 回答 1

WEB菜鸟 提出了问题 · 2019-08-05

解决element 表单例子报错

  1. element 表单例子报错 代码貌似没问题啊,都没找到fields这个属性;
<el-col :span="10" class="demoBox">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="活动名称">
        <el-input v-model="form.names"></el-input>
      </el-form-item>
      <el-form-item label="活动区域">
        <el-select v-model="form.regions" placeholder="请选择活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
</el-col>

form : {
    names: '',
    regions: '',
},
onSubmit() {
  console.log(this.form);
},
报错信息:

vue.runtime.esm.js?2b0e:619 [Vue warn]: The computed property "fields" is already defined in data.

found in

---> <ElForm> at packages/form/src/form.vue
       <Home> at src/views/Home.vue
         <ElMain> at packages/main/src/main.vue
           <ElContainer> at packages/container/src/main.vue
             <App> at src/App.vue
               <Root>

关注 1 回答 1

WEB菜鸟 回答了问题 · 2019-08-05

element-ui 自带表单组件一使用就报错

请问你这个问题解决了吗?

关注 4 回答 3

WEB菜鸟 赞了文章 · 2019-07-23

veeValidate实战

说在前面

vee-validate 版本2.0.4的学习github地址
我的项目地址
第一次认真的在git上写一个demo教程,喜欢的可以star一下~^o^~ (^-^) (^o^)
后续会有一个完整的vue商城项目教程,希望得到大家的鼓励

分支说明

一步一步学习veeValidate,虽然是个小的demo,但是希望能够跟大家分享
通过创建多个分支,表示项目的进度,每个分支的复杂程度递增。

初始化vue项目

网上很多教程,不再赘述

Lesson1 搭建静态样式

lesson1分支链接
clipboard.png

Lesson2 安装veeValidate初体验

Lesson2分支
安装

npm install vee-validate --save

main.js中引入

clipboard.png

home.vue使用

clipboard.png

效果图

clipboard.png

在想验证的input框添加v-validate指令。多个验证规则用|分隔。对于下面的示例,验证规则是直截了当的。这里使用了一个必填的验证。这里使用button的disabled属性来控制是否可以下一步在计算属性中返回this.$validator.errors.has('name')如果error存在则disabled为true

Lesson3 使用中文错误提示

为了更好的使用vee-validate在src下新建文件夹并且创建文件validator.js
在main.js中引用validator.js,之前引用的代码将移入validator.js

clipboard.png

clipboard.png

接下来安装vue国际化

npm install vue-i18n --save

引用

import Vue from "vue";
import VeeValidate from "vee-validate";
import VueI18n from "vue-i18n";
import zh_CN from "vee-validate/dist/locale/zh_CN";

Vue.use(VueI18n);
const i18n = new VueI18n({
  locale: "zh_CN"
});
Vue.use(VeeValidate, {
  i18n,
  i18nRootKey: "validation",
  dictionary: {
    zh_CN
  }
});

然后效果图就是这样的了,这里的name是必须的对于一个中国人来说就有点不舒服了。
下一步就是将修改默认显示的错误信息

clipboard.png

引入Validator

import  { Validator } from "vee-validate";

或者合并使用import VeeValidate, { Validator } from "vee-validate";

// 自定义validate
const Dictionary = {
  zh_CN: {
    messages: {
      required: field => "请输入" + field
    },
    attributes: {
      name: "账号"
    }
  }
};
// 自定义validate error 信息
Validator.localize(Dictionary);

效果
clipboard.png

Lesson4 点击完成下一步实现自定义验证规则

添加之前漏掉的一点,一开始进入的时候按钮是不可点的所有添加

clipboard.png

一进入就验证

接下来新增点击下一步点击页面
Step1.vue

<template>
  <div class="form-box">
    <p>自定义验证规则学习</span>
    <form class="sui-validate" method="" name="" @submit.prevent="submit">
      <div class="controls">
        <input name="mobile" type="text" v-model="name" placeholder="请输入电话" v-validate="'required|mobile'">
        <span v-show="errors.has('mobile')" class="help">{{ errors.first('mobile') }}</span>
      </div>
      <button class="button" type="submit" :disabled="disabledFlag">下一步</button>
    </form>
  </div>
</template>
<script>
  export default {
    name: 'Step1',
    data() {
      return {
        name: ''
      }
    },
    computed: {
      disabledFlag() {
        //验证不通过button disabled
        return this.$validator.errors.has('mobile')
      }
    },
    methods: {
      submit() {

      }
    }
  }

</script>

router.js

clipboard.png

Home.vue验证成功后点击下一步跳到Step1.vue

methods: {
      submit() {
          this.$router.push({name:'step1'})
      }
    }

validator.js添加自定义方法

/*自定义方法*/
Validator.extend("mobile", {
  getMessage: field => "手机格式不正确",
  validate: value =>
    value.length === 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
});

clipboard.png
新增手机属性
clipboard.png

clipboard.png

新增的自定义方法就可以用了
这里值得注意的是,自定义方法要放在自定义错误消息上面,要不错误信息会有问题

获取更多技术相关文章,关注公众号”前端女塾“。
回复加群,即可加入”前端仙女群“
qrcode_for_gh_9a5f66169516_258.jpg

查看原文

赞 12 收藏 6 评论 2

WEB菜鸟 赞了回答 · 2019-07-13

解决vue-cli3 sass配置全局变量报错

不都提示了嘛
Expected ";".
你漏了句尾分号

关注 2 回答 2

认证与成就

  • 获得 9 次点赞
  • 获得 80 枚徽章 获得 2 枚金徽章, 获得 13 枚银徽章, 获得 65 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2017-03-31
个人主页被 807 人浏览