751 字 1 分钟

使用 el-input 的时候，光标聚焦在输入框，按下回车，会刷新页面。这是因为当 el-form 表单中只有一个 input 时，按下回车建会自动触发页面的提交功能， 产生刷新页面的行为。

# 解决办法:

# 方法一：

  • 取消 form 、 el-form 元素，非必要 form ，换成 div

1.8k 字 2 分钟

# 媒体查询两种方法:

# css 方式

@media screen and (max-width: 600px) { 
/* 当屏幕尺寸小于 600px 时，应用下面的 CSS 样式 */
  .class {
    background: #ccc;
  }
}
/* 当屏幕尺寸大于 900px 时，应用下面的 CSS 样式 */
@media screen and (min-width: 900px) {
  .class {
    background: #fff;
  }
}

3.6k 字 3 分钟

常用属性：

  1. name: string，用于自动生成 CSS 过渡类名。例如：name: 'fade' 将自动拓展为 .fade-enter，.fade-enter-active 等。默认类名为 "v"
  2. appear: boolean，是否在初始渲染时使用过渡。默认为 false。
  3. css: boolean，是否使用 CSS 过渡类。默认为 true。如果设置为 false，将只通过组件事件触发注册的 JavaScript 钩子。
  4. type: string，指定过渡事件类型，侦听过渡何时结束。有效值为 "transition" 和 "animation"。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。
  5. mode: string，控制离开 / 进入过渡的时间序列。有效的模式有 "out-in" 和 "in-out"；默认同时进行。
  6. duration: number | {enter: number, leave: number} 指定过渡的持续时间。默认情况下，Vue 会等待过渡所在根元素的第一个 transitionend 或 animationend 事件。

自定义过渡类名属性：

  1. enter-class: string
  2. leave-class: string
  3. appear-class: string
  4. enter-to-class: string
  5. leave-to-class: string
  6. appear-to-class: string
  7. enter-active-class: string
  8. leave-active-class: string
  9. appear-active-class: string

2.1k 字 2 分钟

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转 rotate、扭曲 skew、缩放 scale 和移动 translate 以及矩阵变形 matrix。

语法:

transform: none|transform-functions;
/* 即：*/
transform: rotate | scale | skew | translate |matrix;

606 字 1 分钟

CSS 有以下几个函数： 函数 描述 CSS 版本 attr() 返回选择元素的属性值。 2 calc() 允许计算 CSS 的属性值，比如动态计算长度值。 3 cubic-bezier() 定义了一个贝塞尔曲线 (Cubic...
678 字 1 分钟

# 自动填充高度.html

<div class="box">
  <div class="header">头部</div>
  <div class="auto-fill">自动填充</div>
</div>

# 使用 flex（推荐）

  • 兼容性好；
  • 只需关注自动填充的 div，无需考虑其他 div 的高度
.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}
.header {
  background: dodgerblue;
  height: 30px;
}
.auto-fill {
  background: wheat;
  flex: 1
}
   1.1k 字  1 分钟
可以在 main.js 全局引入，下面是使用方法。 1： 安装 node-sass 、 sass-loader 、 style-loader npm install node-sass --save-devnpm install sass-loader --save-devnpm install style-loader --save-dev2： 安装 sass-resources-loader （如果不安装的话变量会报错） npm install sass-resources-loader --save-dev3：vue-cli4.0 配置方法 //...