一个电商城的项目,场景是:在未登录的情况下点击收藏或者加入购物车等操作,执行一个方法如this.$login()来动态插入登录组件. 第一步:写好关于这个登录弹窗的单文件组件 loginBox.vue 第二部:编写loginBox.js文件,输出一个函数方法,如下图 关于$mount()需要注意 第三步:在Vue的prototype下全局赋值 这样,在点击加入到购物车的时候,判断localstroage里有无用户信息.未登录则执行this.$login()方法,生成弹窗. 当时在写的时候一个劲报…

…

vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: 1.首先建一个自定义组件的文件夹,比如叫loading,里面有一个index.js,还有一个自定义组件loading.vue,在这个loading.vue里面就是这个组件的具体的内容,比如: <template> <div> loading.............. </div…

目录 VUE中登录密码显示与隐藏的最简设计--基于iview 1.背景 2.实现最终效果 2.1 隐藏密码 2.2 显示密码 3.实现思路 3.1 v-if判断当前密码显示状态 3.2 密码隐藏状态 3.3 密码显示状态 3.4 两种眼睛图标(睁眼,闭眼)的监听切换密码显示状态事件 4.小结 VUE中登录密码显示与隐藏的最简设计--基于iview 1.背景 近期,在使用abp开发项目过程中,前端vue输入登录密码时默认隐藏,但是如果用户输错密码需要切换显示跟隐藏.故有此文. 2.实现最终效果 2…

分享下我自己的axios封装axios是个很好用的插件,都是一些params对象,所以很方便做一些统一处理 当然首先是npm安装axios 很简单$ npm install axios --save在src下新建文件夹 service / index.js接着上代码 1 import axios from 'axios'; 2 import { Toast} from 'mint-ui';// 我用的mint的框架来弹出我的错误返回 大家可以用别的提示 3 import router from…

应用场景: overflow: hidden会让超出的部分隐藏,并且无法拖拽,所以可使用插件让长列表限定的区域滚动拖拽. 参考:https://zhuanlan.zhihu.com/p/27407024 1.去github搜素better-scroll,在终端安装: npm install better-scroll --save 2.html结构 <template> <div class="wrapper" ref="wrapper">…

vue中使用剪切板需要借助一个插件,clipboard,使用方法还是很简单的,先下载,然后引入: npm i clipboard -S //引入 import Clipboard from 'clipboard'; 下面就是使用了,比如说,比较常见的是,上面一行文字,下面有一个复制的按钮, <p id="share-code">{{init.code}}</p> <button class="copy-btn" data-clipboa…

我们做项目时,虽然axios也可以直接拿来用,但是对接口比较零散,不太好进行维护,也会产生大量的重复代码,所以我在这对axios进行了统一接口处理 第一步,先在src中的公共文件夹中如utils里新建request.js文件 import axios from 'axios' import router from '@/router/routers' import { Notification, MessageBox } from 'element-ui' import store from '…

介绍一下,已经有很多的vue分页的组件了,大家都是大同小易,那么我就结合自身的使用,写出了一片文章 首先在新建一个分页模块 在模块中引入相应的代码,(内有详细的注释) template中 <div class="page-bar"> <ul> <li class="first"> <span>共{{dataNum}}条记录 第 {{cur}} / {{all}} 页</span> </li> &…

插件资源及api:树官网 本事例是在vue3.0+中演示,事例是实际项目中正在用的组件所以部分打了马赛克. 1.插件准备(提前准备好插件文件) 可以直接在官网下载,搭建好脚手架后将准备好的文件放在libs文件夹(也可以放在自己资源的文件夹) 2.下载jQuery依赖 npm install jquery --save-dev 3.在组件中引入相关依赖和文件 4.开始,先写标签部分 <template> <div> <ul id="treeDemo" cla…