第一步: 在config中引入 // 全局引入vant的提示框 import { Toast } from "vant"; Vue.use(Toast); 第二步: 在组要的.vue文件中引入 this.$toast('受不了了,宝贝不能再少了哦')

有时候我们需要使用一些类似toast,messge.loading这些跟js交互很频繁的插件,vue3.x这类插件的定义跟vue2.x插件稍大,而且相对变得复杂了一点点. 第一种.需要时创建,用完移除 这种做法相对损耗性能,当一些显示隐藏频率不是特别高的插件可以如此封装. 1.新建loading.vue文件 <template> <div class="loading"> 加载中... </div> </template> <scr

如果我们的Vue项目中没有用到任何UI框架的话,为了更好的用户体验,肯定会用到loading和toast.那么我们就自定义这两个组件吧. 1.Toast组件 首先,在common下新建global文件夹,存放我们的toast.vue和toast.js两个文件(当然文件的具体位置你可以自行安排). (1). toast.vue <template lang="html"> <div v-if="isShowToast" class="toa

1.ActionSheet 官方文档:https://ionicframework.com/docs/api/action-sheet <ion-header> <ion-toolbar> <ion-buttons slot="start"> <ion-back-button defaultHref="/tabs/tab1"></ion-back-button> </ion-buttons> &

目录 1,前言 2,第一种方式 3,第二种方式 1,前言 在Vue项目开发中,肯定会有这样一个场景:在不同的组件页面用到同样的方法,比如格式化时间,文件下载,对象深拷贝,返回数据类型,复制文本等等.这时候我们就需要把常用函数抽离出来,提供给全局使用.那如何才能定义一个工具函数类,让我们在全局环境中都可以使用呢?请看下文分解. PS:本文vue为2.6.12 2,第一种方式 直接添加到Vue实例原型上 首先打开main.js,通过import引入定义的通用方法utils.js文件,然后使用Vue.

函数调用 Dialog 是一个函数而不是组件,因此可以直接调用,展示对应的提示弹窗 import { Dialog } from 'vant'; Dialog({ message: '提示' }); 组件调用 通过组件调用 Dialog 时,可以通过下面的方式进行注册 import Vue from 'vue'; import { Dialog } from 'vant'; // 全局注册 Vue.use(Dialog); // 局部注册 export default { components:

前端小白的声明: 这篇文章为转载:主要是为了方便自己查阅学习.如果对原博主造成侵犯,我会立即删除. 转载地址:点击查看 如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题,我们所要的说的axios查看更多关于 axios 的文章 的封装和api接口的统一管理,其实主要目的就是在帮助我们简化代码和利于后期的更新维护. 一.axios的封装 在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和nod

大佬链接: https://juejin.im/post/5b55c118f265da0f6f1aa354 一.axios的封装 在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中.他有很多优秀的特性,例如拦截请求和响应.取消请求.转换json.客户端防御XSRF等.所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护,直接推荐我们使用axios库.如果还对axios不了解的,可以移步ax

已经很久没有学习新的相关知识,对于今后的学习方向可能会集中在vue的源码,render,jsx语法,服务端渲染来学习,巩固好vue的基础和高级的知识,现阶段vue的api和基本用法已经全部掌握,但是还是要深入学习,不能只知道api而已! 最近的项目中使用了vant的toast提示框,后来ui出图需要使用自己定义的样式,故看了下插件的写法,写了一次toast插件,鉴于需求比较少可能比较简单 首先需要写好页面的模板,布局 <template> <transition name="f

本文总结了vue2升级vue3可能会遇到的语法警告和错误,如果想知道怎样升级,可以查看我的上一篇文章:vue2升级vue3指南(一)-- 环境准备和构建篇 Warning 1.deep /deep/和::v-deep的写法都被vue3弃用,需要改为:deep(). 升级前: /deep/.xxxxx {} 升级后: :deep(.xxxxx) {} 2..sync .sync modifier for v-bind has been removed. Use v-model with argum

架构图: 架构原则:易读性.易维护性.易扩展性. 一.思考 做好一件事,花在思考上的时间应该多于执行. 首先根据产品需求和设计图,脑中先建立一个产品架构: 1. 产品的定位是什么. 社交?媒体?游戏?运动?音视频?电商……要搞清楚你要做一个什么类型的App,不同类型的产品,技术选型也有所不同,在这我是搭建一个基础App架构,可以在此基础上拓展社交.电商.音视频等! 2. 技术选型 根据当前产品的需求以及未来可能有的需求(我怎么知道未来会有什么需求?可以参照竞品,可以发挥想象,如果产品说:“我们要

iOS 从0到1搭建高可用App框架 最近在搭建新项目的iOS框架,一直在思考如何才能搭建出高可用App框架,能否避免后期因为代码质量问题的重构.以前接手过许多“烂代码”,架构松散,底层混乱,缺少规范,导致团队开发时代码风格迥异,清晰的项目结构和良好的代码规范是保证产品质量的关键,下面分享一下我的架构思路. 架构图: 架构图 架构原则:易读性.易维护性.易扩展性. 一.思考 做好一件事,花在思考上的时间应该多于执行. 首先根据产品需求和设计图,脑中先建立一个产品架构: 1. 产品的定位是什么.

使用微信小程序云开发制作自己的个人简历,简单高效. 首先需要了解小程序的基本结构以及云开发模式,及一些css样式基础. 使用小程序云数据库.vant组件库实现简历内容. 最终效果如下: 首先申请个人微信小程序,具体流程参照官方. 代码如下: index.json { "usingComponents": {//引入vant组件 "van-progress": "@vant/weapp/progress/index", "van-divi

<template> <div class="main"> <div :class="show==true ? 'block':'blocks'"></div> </div> </template> <script> import Vue from "vue"; import { Popup } from "vant"; import { Ce

请点赞关注,你的支持对我意义重大. Hi,我是小彭.本文已收录到 GitHub · AndroidFamily 中.这里有 Android 进阶成长知识体系,有志同道合的朋友,关注公众号 [彭旭锐] 带你建立核心竞争力. 前言 LeakCanary 是我们非常熟悉内存泄漏检测工具,它能够帮助开发者非常高效便捷地检测 Android 中常见的内存泄漏.在各大厂自研的内存泄漏检测框架(如腾讯 Matrix 和快手 Koom)的帮助文档中,也会引述 LeakCanary 原理分析. 不吹不黑,Leak

1.入口文件 main.js import { LoadingPlugin, ToastPlugin, AlertPlugin } from 'vux' Vue.use(LoadingPlugin); Vue.use(ToastPlugin,{position: 'top'}); Vue.use(AlertPlugin); 2.使用 // LoadingPlugin // 显示 this.$vux.loading.show({ text: '加载中...' }) // 隐藏 this.$vux.

axios使用说明文档 axios 全局配置: //axios-init.js import axios from 'axios': let loadingInstance; //创建Loading 的实例 axios.defaults.baseURL = appConfig.xhr.baseURL; // 配置axios请求的地址 axios.defaults.headers.post['Content-Type'] = 'application/json; charset=utf-8'; a

全局引入 import Vant from 'vant'; //嫌麻烦就全部一次导出,虽然包会稍微有点大 import 'vant/lib/index.css'; //注意导入全局的这个css,否则布局组件无法正确使用 Vue.use(Vant) 下拉选框 只能单选,不支持多选 返回obj对象,填充picker, 并取选择对象的ID <div> <van-field readonly clickable name="picker" :value="selec

1. vant 官网 https://youzan.github.io/vant/#/zh-CN/quickstart 2. 通 npm 安装 npm i vant -S 3.安装 babel-plugin-import 插件 babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式npm i babel-plugin-import -D 4.在 babel.config.js 中配置 plugins: [ ['impor

一.前言 android中如果出现了未处理的异常,程序会闪退,这是非常不好的用户体验,很多用户会因此卸载APP,因此未处理的异常是应该尽力避免的. 有些很难避免的异常(如:IO.网络等),应在代码中进行捕捉并做相应的处理,以阻止程序崩溃闪退. 但是“没有任何程序是完美的”,况且各式各样的android终端也大大增加了异常的出现概率,就连强大的QQ.微信等不也会闪退嘛! 这时就需要全局捕获未处理的异常,并进行处理.(注意:本文中的处理方式并不能阻止APP闪退) 处理方式:收集异常信息.当前场景[时