一、基于vue的国家区号列表 vue-flag-list包含了大部分国家的区号，点击右边的三角形展开列表可以选择国家区号，若列表中没有区号，也可以自己输入区号。全球区号列表1.1 初始化组件 用的是vue-cli来初始化组件，虽然有很多东西不需要，因为对这个比较熟悉，所以还是按照这个步骤来。 vue init webpack vue-flag-list cd vue-flag-list cnpm install npm run dev1.2 根据自己的需求，实现具体功能，我的主要功能写在vue-flag-list...
Vue中封装input组件 最近有点忙不过来 脱了很久，没有更新 抱歉。今天要将的时如何自定义封装input组件 ，博主知识发个简单的模板 码友们可以更具自己的实际项目添加需要的参数我的项目中的UI图是这样的 代码如下 子组件的模板设置<template><div class="completion-input-box"><span class="input-box-name">{{text}}</span><input type="text" ref="input":value="value" @input="$emit(input, $event.target.value)"></div> </...
本文介绍了vue2.x select2 指令封装，分享给大家，具体如下： 其他的就不说了，说说封装过程的问题吧 1、vue不同版本指令接受参数不一样 2、酱油君对于vue2.x双向绑定的机制不了解（有大神路过望在评论中不吝赐教）上代码：<!DOCTYPE html> <html> <head><title>vue select2 封装</title><link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="external nofollow" rel="stylesheet" /><scr...
前言 本文主要给大家介绍了关于vue.js将echarts封装为组件一键使用的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。 说明做项目的时候为了让数据展示的更加直观，总会用到图表相关的控件，而说到图表控件第一时间当然想到ECharts这个开源项目，而它不像iview、element-ui这些组件使用起来那么便捷，需要绕一个小弯，为了图方便于是对ECharts进行了一层封装 控件演示控件使用概要 基于echarts的二次封...
1. js 文件： /* * ajax封装: * 1. 引入文件 * 2. new Vue().ajax.get(url,data,fn,ojson), 或 new Vue().ajax.post(url,data,fn,ojson) * url: 需要获取数据的文件地址 (string) * data: 需要发送的信息 (可省略) (obj) * fn: 获取信息后的回调函数,接收到的返回值为data (function) * ojson: 是否需要转换为json格式 (可省略) (设置为 "json") * * 3. new Vue().ajax.get().cancel(): 取消异步请求 * 4. new Vue().ajax.json(str...
组件的好处 当我用vue写页面的时候，大量的数据页面渲染，引入组件简化主页面的代码量，当代码区域块代码差不多相同时，组件封装会更加简化代码。组件是Vue.js最强大的功能之一。 组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义的元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展。 我用一个读书软件的图书列表例子： 图书展示页 大家可以想想用vue如何实...
vue 封装自定义组件 tabal列表编辑单元格组件 <template><div class="editable-cell"><div class="editable-cell-input-wrapper" v-if=editable><el-input class="editInput" v-model="cellValue" placeholder="请输入内容" v-loading="editLoading" size="small"></el-input><el-button type="text"><i class="el-icon-check" @click=check></i></el-button></div><div class="editable-cell-text-wrapper" v-else>{{cellValue ||...
本文介绍了vue 2.0封装model组件的方法，分享给大家，希望对大家有所帮助 单文件组件 使用单文件组件封装model的模板、逻辑和样式，之后就可以在页面中调用此通用组件。需求 model有两个使用场景： 1、备注/修改密码(简易)：在屏幕中垂直居中 2、添加/修改/展示信息(复杂)：距离屏幕顶部200px，内容过长时可滚动。3、常规要求(共同点)：标题，关闭icon点击确定/关闭/遮罩，隐藏model组件分析上述需求点，得到如下图：wrapper：负责...
Vue2.0 多 Tab切换组件简单封装，满足自己简单的功能，可以直接拿去使用！ 首先上效果图：功能简单介绍： 1、支持tab切换 2、支持tab定位 3、支持tab自动化 仿React多Tab实现，总之可以正常使用满足日常需求， 1、使用方法： ==index.vue文件== <TabItems><div name="买入" class="first"><Content :isContTab = "0" /></div><div name="自动再平衡" class="second"><Content :isContTab = "1" /></div><div name="一键卖出" class...
有几天没更新了，这几天上海天气比较热，天气一热就懒得写了。今天感觉还好，就写下导航部分的封装吧。关于环境搭建和底部tabbar的封装请参考前面的两篇文章web app和移动端原生app的构架方式不一样的，页面的切换是对整个页面的重新渲染。所以我们每个页面都有自己的导航条。下面简单封装下导航条html部分此处写的导航的三个部分，分别是左边div、中间的title部分div、右边div。代码如下 <template><header class="m-header" :cla...
?这是vue.js系列文章第二遍，第一篇讲述的是如何搭建vue.js的开发环境，计划按进度做成一款完整的app，当然前提是时间允许的话。本文用到了stylus语法，至于为什么使用stylus而不去用sass，主要是因为stylus来自于Node.js社区。总之stylus是一款高效的CSS预处理器，具体使用不在本文讨论范围。好了，废话不说了，下面讲述怎么封装tababr的切换。 底部tab进行页面切换，会用到vue里面的路由，也就是vue-router我们在安装vue-cli时选...
前言 单页面应用大多采用前后端分离开发思路，我们知道，前端和后端交互有多中方式(服务器端渲染、Ajax、websocket等)，今天我们主要讲解Ajax部分。 最近团队讨论了一下，Ajax 本身跟 Vue 并没有什么需要特别整合的地方，使用 fetch polyfill 或是 axios、superagent 等等都可以起到同等的效果，vue-resource 提供的价值和其维护成本相比并不划算，所以决定在不久以后取消对 vue-resource 的官方推荐。已有的用户可以继续使用，但以...
因为bootstrap-select功能比较强大，而且样式还不错，所以在项目使用了vue，所以，觉得对bootstrap-select进行封装。 html代码如下:<my-select :options="input.options" v-model="input.value" ref="typeSelect" :index="index" :childidx="childIdx" :load="load" :multiple="input.multiple" :method="change"></my-select> js// select 插件 Vue.component(vm-select, {props : [options, value, multiple, method, load, inde...
使用Vue做双向绑定的时候，可能经常会用到分页功能 接下来我们来封装一个分页组件 先定义样式文件 pagination.css ul, li {margin: 0px;padding: 0px; } .page-bar {-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none; } .page-button-disabled {color:#ddd !important; } .page-bar li {list-style: none;display: inline-block;...
我们知道有很多系统都要求表格中添加各种各样的tag，来标记一些属性。在element-ui中添加tag很简单，最重要的就是用到了vue的插槽slot这个特性。首先了解什么是插槽。插槽省去官方的复杂讲解和代码，插槽的意思简单来说，就是在子组件的某个地方留一个占位符，当父组件使用这个子组件的时候，可以自定义这个占位符所占地方呈现的样子，可能是一个标题，一个按钮，甚至一个表格，一个表单。为什么要插槽呢？我们抽离组件的原因就是因...