随笔分类 - web前端
摘要：1、width 不设置默认宽度铺满全屏，如果要实现宽度随着文字长度自适应，css width:fit-content; 2、如果要实现文字自动换行，最多显示三行，超出显示省略号 overflow: hidden; text-overflow: ellipsis; display: -webkit-b
阅读全文
摘要：一、方式一: 1、html <div class="img-wrap"> <img :src="./img.jpg"> </div> 2、css .img-wrap { position: relative; width: 100%; height: 0px; padding-top: 100%;
阅读全文
摘要：一、容器属性 1、display: grid; 块级的网格布局。 2、display: inline-grid; 行内的网格布局。 3、grid-template-columns 指定列的宽度。 ① grid-template-columns：10px 20px 30%; 设置列，有几个值就代表有几
阅读全文
摘要：js中逻辑运算符在开发中可以算是比较常见的运算符了，主要有三种：逻辑与&&、逻辑或|| 和 逻辑非！ 1.&& 逻辑与 两边条件都为true时，结果才为true； 如果有一个为false，结果就为false； 当第一个条件为false时，就不再判断后面的条件。 注意：当数值参与逻辑与运算时，结果为t
阅读全文
摘要：// 可以输入小数 <el-form-item label="粉丝数量"> <el-input v-model="formInfo.FansNumber" @keyup.native="formInfo.FansNumber = formInfo.FansNumber.replace(/[^\.\d
阅读全文
摘要：分享接口 请注意，原有的 wx.onMenuShareTimeline、wx.onMenuShareAppMessage、wx.onMenuShareQQ、wx.onMenuShareQZone 接口，即将废弃。 请尽快迁移使用客户端6.7.2及JSSDK 1.4.0以上版本支持的 wx.updat
阅读全文
摘要：什么是插槽？ 插槽就是子组件中提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。 插槽又分为匿名插槽、具名插槽以及作用域插槽。 1、匿名插槽 匿名插槽，又可以叫它单
阅读全文
摘要：使用 position:sticky 实现粘性布局 标签（空格分隔）： css position取值 属性 作用 position: static; 默认值。没有定位，元素出现在正常的流中 position: relative; 生成相对定位的元素，相对于其正常位置进行定位。 position: a
阅读全文
摘要：Git常用命令及方法大全 几个专用名词的译名如下。 Workspace：工作区 Index / Stage：暂存区 Repository：仓库区（或本地仓库） Remote：远程仓库 1.新建代码库 git命令 作用 git init 在当前目录新建一个git仓库 git init [project
阅读全文
摘要：问题描述： 通常我们的需求是改变 select 的选项才会触发 change 事件，但是意料之外，页面初始化的时候也会触发 change 事件。 应用场景： 编辑时原本选择框初始化值为空，将数据赋值后触发change事件。 解决方案： data() { return { changeFlag: fa
阅读全文
摘要：问题描述： 在hash模式下，点击返回按钮（通过router）或者通过浏览器的返回按钮（histroy.go(-1)）页面的地址发生了变化，但是页面并没有变化。 问题处理： 在app.vue中添加 // 通过监听hashchange事件 判断当前页面的路由与实际的路由是否一致 window.addE
阅读全文
摘要：父元素设置了 flex 布局 display: flex; align-items: center; 如何让某个子元素靠右呢？ 方法一： flex: 1; text-align: right; 方法二： margin-left: auto;
阅读全文
摘要：将isShowProgressTips 设置为 0，加上 isShowProgressTips:0 这个属性后，不再弹出“上传中”这个提示框modal了。 之后再自己配置个loading。
阅读全文
摘要：1、同时满足多个类名 // 需要同时拥有类名a 和 类名b 才会起作用 .a.b *{ background-color:red; } 注：这里两个类名之间一定不能有空格,如果有空格则会失效！ 2、多元素选择器 3 属性选择器 4 动态伪类选择器 5 目标伪类选择器 6 UI元素状态伪类选择器 7
阅读全文
摘要：前言 方法一：JS-SDK 核心原理: 在微信的JS-API 中 play 一下 audio 即可达到自动播放的目的(应该是微信自己做了处理) 引入文件后，首先通过wx.config接口注入权限验证配置，然后在ready中play一下audio。 <!-- 当使用方法1时必须加载 JS-SDK 的
阅读全文
摘要：目前 css 布局方案中，网格布局可以算得上是最强大的布局方案了。它可以将网页分为一个个网格，然后利用这些网格组合做出各种各样的布局。 一、基本概念 1.1什么是grid布局 Flex布局时轴线布局，只能指定“项目”针对轴线的位置，可以看作是一维布局，Grid 1.2 容器和项目 采用网格布局的区域
阅读全文
摘要：一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。 model 选项可以用来避免这样的冲突： // 子组件 <template> <input type="
阅读全文
摘要：介绍 VeeValidate 是专用于 Vue.js 的验证库。它有很多开箱即用的验证规则，也支持自定义验证规则。 安装 可以通过 npm 或 CDN 来安装该插件 npm: npm install vee-validate --save CDN: 2 个国外的 CDN，国内估计危险 <script
阅读全文
摘要：1、安装 vue-cli-plugin-style-resources-loader 该加载器将 less 资源自动导入每个所需的 less 模块。 因此，可以在所有 less 样式中使用共享变量和mixin，而无需在每个文件中手动导入它们。 注意，此loader不限于less，并适用于 sass，
阅读全文
摘要：1、Mutations mutations 必须是同步函数,为什么? 举个例子: 官方案例 mutations: { someMutation (state) { api.callAsyncMethod(() => { state.count++ }) } } 每一条 mutation 被记录，de
阅读全文
