2019年12月_asteriaV

原创 css使用outline快速查看整个项目布局

在我们开发过程中，老是需要查看布局来修改，使用一个 CSS 技巧给所有元素加上outline，这样就能迅速了解自己所需的元素位置信息。css代码：body * { outline: 1px solid red}需要注意的是这里我没有使用border的原因是border会增加元素的大小但是outline不会。如下，当加上上述css样式后，便会把整个项目里...

2019-12-30 16:52:51 423

原创使用 css 画一个三角形

所需效果如下：代码： //三角形图案 .target { width: 0; height: 0; border: .625rem solid; border-color: transparent transparent #fff transparent; posit...

2019-12-27 17:00:57 187

原创 Vue 带你了解生命周期钩子函数

下图展示了实例的生命周期。beforeCreate（创建前）在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。created（创建后）在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开...

2019-12-27 15:27:20 97

原创 css 鼠标悬浮时变成小手指

只需要在需要的地方添加以下css样式即可： .buttons { cursor: pointer;//悬浮时变手指 }

2019-12-25 10:50:08 8555 1

原创 vue使用vant框架的toast 轻提示框功能

脚手架推荐使用 Vue 官方提供的脚手架Vue Cli 3创建项目# 安装 Vue Cli npm install -g @vue/cli# 创建一个项目 vue create hello-world安装# 通过 npm 安装npm i vant -S一. 自动按需引入组件 (推荐)babel-plugin-import是一款 babel 插件，它会在编译过程...

2019-12-20 11:00:43 7271 1

原创 v-if和v-show的区别，详解！

1.v-if，v-eles-if，v-else的使用1）v-if，v-else//html<div v-if="isActive"> 今天星期三 </div> <div v-else> 今天星期四 </div>//jsisActive:true如上，isActive为true会显示"今天星期三"，为fa...

2019-12-19 11:34:04 249

原创 vue写短信验证时实现60s倒计时功能

vue写短信验证时实现60s倒计时功能已进入该页面就发送了验证码，同时实现倒计时功能：60s后效果：<template> <div id="stepsTwo" class="clearfix"> <div class="steps-main clearfix"> <el...

2019-12-19 11:01:54 1205

原创 css去掉原生input框的border属性

原生input框是自带border属性的，但有时候得去掉的话怎么办呢？这个时候可以把border设置为none如果也要去掉点击时的光标效果则设置input:focus{ outline:none; }或者input{outline:medium;}直接添加以下代码即可：input{outline:medium;border:no...

2019-12-18 10:26:16 1254

原创 vue中 Error in mounted hook: "TypeError: handler.call is not a function" 报错问题解决方案

进入组件页面时，vue报错：Error in mounted hook: "TypeError: handler.call is not a function"，主要原因是里面的钩子函数mounted {}是否有声明了未定义方法或是只声名了钩子函数解决该问题的方法：1.把mounted: {}删除掉。2.把mounted: {}改为mounted(){}。...

2019-12-17 14:15:11 19050 5

原创 vue页面跳转的同时把$message消息语句删除

一，创建一个message.js文件import { Message } from 'element-ui';export const warningOpen=(msg)=>{ Message({ showClose: true, message:msg, type: "warning", center: t...

2019-12-10 10:35:40 1881

原创 vue组件化引入message.js文件实现$message消息语句按需引入

最近用vue写项目时有用到$message消息提示语句，又觉得每次添加都要几行代码过于累赘，如下所示 this.$message({ showClose: true, message: "没有找到记录！", type: "warning", center: true ...

2019-12-10 10:19:55 4377

原创 vue获取当地日期和天气数据

效果如下，需要获取到当地实时日期和天气数据调用天气API接口，官网地址：https://www.tianqiapi.com/?action=v1//html <a class="weeks">{{week}}</a> <a class="weather">{{weather}}</a> <a class=...

2019-12-07 18:01:40 3071 2

原创 uni-app底部导航栏tabBar的显示和使用步骤

一，看官网，了解tabBartabBar如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。Tips当设置 position 为 top 时，将不会显示 icon tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。 tabbar 切换第一次加载时可能渲染不及...

2019-12-06 16:18:47 20812 1

原创 vue使用rem来实现移动端自适应布局

现在手机屏幕分辨率越来越多，为了适应屏幕不同大小，我们首先要做到的便是页面布局自适应。当然解决方案很多，比如：百分比布局，弹性布局flex，也都能获得不错的效果，这里主要介绍的是本人在实践中用的最高效的布局方案——rem布局一，设置初始的rem值用js计算来实现rem，只需要全局引入下面这段原生js代码即可 <script> (function (d...

2019-12-04 15:33:46 1134 2

asteriaV的博客