随笔分类 - web前端
摘要：一、新域名 官方地址 : https://npmmirror.com 镜像地址 : https://registry.npmmirror.com 老域名：http://npm.taobao.org 和 http://registry.npm.taobao.org 将在 2022.06.30 号正式下
阅读全文
摘要：当涉及到导入（import）和导出（export）的概念时，有两种常见的模块系统：ES6模块 和 CommonJS 模块。它们在语法和使用方式上有一些区别： 一、ES6模块 导出：使用`export`关键字将一个或多个函数、变量或对象导出为命名导出（named exports）或默认导出（defau
阅读全文
摘要：1.简单的线性渐变 .layout{ width: 100%; min-height: 100vh; background: linear-gradient(#FFE8E9,rgba(0,0,0,0) 200px); } 2.层叠多层的渐变（左右+上下+背景图） .layout{ width: 10
阅读全文
摘要：1、aspect-ratio宽高比例属性 aspect-ratio: 1 / 1; aspect-ratio: 16 / 9; aspect-ratio: 0.5; //等同于 1/2 如下效果将为每个box子元素设置aspect-ratio:3 / 2，如下图所示： 2、object-fit图片裁
阅读全文
摘要：1、grid布局两端对齐,最后一行左对齐。 display: grid; // grid-template-columns: 1fr 1fr 1fr 1fr; // 简写： grid-template-columns: repeat(4, 1fr); gap: 30px; 2、响应式布局：auto-
阅读全文
摘要：|| 逻辑或运算符 在处理空值或者默认值时会遵循 JavaScript 的类型转换规则。如果左侧的表达式结果为假值（如false、0、空字符串""、null、undefined、NaN），则返回右侧的值。 const x = null; const y = x || "default"; conso
阅读全文
摘要：props: { value: { // type设置多个类型 type: Number | null, required: true } }
阅读全文
摘要：1、设置开始时间不能大于结束时间 <el-date-picker type="date" placeholder="开始时间" v-model="startTime" :picker-options="pickerOptionsStart"></el-date-picker> <el-date-pi
阅读全文
摘要：codepen体验地址 github地址 安装、引入 npm install vue-input-directive --save import Vue from 'vue' import inputValidate from 'vue-input-directive' Vue.use(inputV
阅读全文
摘要：关键字的取值: to right （表示从左往右渐变） to left (表示从右往左渐变) to top (表示从下往上渐变) to bottom (表示从上往下渐变) 角度的取值： 0deg （从下到上 to top） 180deg（从上到下 to bottom） 90deg (从左到右 to
阅读全文
摘要：如果 H5 页面能够直接嵌入到小程序那是再好不过了，而 web-view 组件正好就提供了这么个功能（个人类型与海外类型的小程序暂不支持使用）。简单来说它是一个可以用来承载网页的容器，会自动铺满整个小程序页面。 虽然这带来了很大的便利，但是也还是有很多需要注意的地方。 web-view 1、承载网页
阅读全文
摘要：在vue中，我们为了避免父组件的样式影响到子组件的样式，会在 <style> 标签上设置scoped属性，这样它的 CSS 只会应用到当前组件的元素上，即使父组件中有跟子组件相同的class名称或者选择器的时候，也不会影响到子组件的样式。 但是有的时候我们需要在一个组件中改变被引入组件的样式（即父组
阅读全文
摘要：1、版本： vue：2.6.14 @vue/cli：5.0.8 2、全局变量文件： // variables.less @themeColor: #00978D; @pageBgColor: #f2f8f7; // CSS Module 有一个:export关键字，它在功能上等同于 ES6 的关键字
阅读全文
摘要：使用 flex 布局， 当子元素超过一屏时，子元素会去挤压别的兄弟元素。 解决方案： flex-shrink: 0; 解释： flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。 flex-shrink 属性定义了项目的缩小比例，默认为 1 ，
阅读全文
摘要：一、安装 npm install vee-validate@"<3.0.0" --save 二、引用 import Vue from 'vue'; import VeeValidate from 'vee-validate'; Vue.use(VeeValidate); 三、config配置信息 插
阅读全文
摘要：一、把需要缓存和不需要缓存的视图组件区分开 Include·字符串或正则表达式。只有名称匹配的组件会被缓存。 exclude-字符串或正则表达式。任何名称匹配的组件都不会被缓存。 max·数字。最多可以缓存多少组件实例。 1、写2个 router-view 出口 <div class="conten
阅读全文
摘要：一、表单绑定 1.1、v-model基本使用 Vue中使用v-model指令来实现表单元素和数据的双向绑定 <template> <section> <input type="text" v-model="message"> {{message}} </section> </template> <s
阅读全文
摘要：一、基本类型和引用类型 基本数据类型（值类型）：String 字符串、Number 数值、Boolean 布尔值、Null 空值、Undefined 未定义。 引用数据类型（引用类型）：Object 对象。 注意：内置对象 Function、Array、Date、RegExp、Error等都是属于
阅读全文
摘要：Viewport 是 HTML5 针对移动端开发新增的一个 meta 属性, 它的作用是为同一网页在不同设备的呈现，提供响应式解决方案=>移动端适配 一、问题 在PC时代，用 css 设置 1px 边框，显示器会用1个物理像素进行渲染。而进入移动应用时代后，我们原来设置1px边框，在手机上可能需要用
阅读全文
摘要：1、width 不设置默认宽度铺满全屏，如果要实现宽度随着文字长度自适应，css width:fit-content; 2、如果要实现文字自动换行，最多显示三行，超出显示省略号 overflow: hidden; text-overflow: ellipsis; display: -webkit-b
阅读全文
