经典的三栏布局效果图如下：三栏布局 ?将布局的各个区块定义成组件 <template id="header"><div class="header bg-primary text-center"><h3>头部区域</h3></div> </template> <template id="left"><div class="left bg-danger col-lg-2"><h3>侧边栏区域</h3></div> </template> <template id="main"><div class="main bg-info col-lg-10"><h3>主体区域</h3></div> </template>?用router-view显示相应的组件 <div id="app"><router...
需要对预约单进行超时计算，但是后台和客户端时间不能保证一定一直，所以后台返回客户提交时间和请求结束时间的时间差进行计算。 效果如下(此处只是demo效果，所以有点丑。)父页面 <template><div><div class="dateDiv" :key="index" v-for="(item,index) in TimeArray"><p>{{item.name}}</p><dateComponent :index="index" :key="item.timeDif" ref="dateComponent" :dateTimeStamp="item.timeDif"></dateComponent><el-button @...
项目中需要做数字滚动增加的效果，一开始很懵，研究了一下原理，发现很简单，贴出来分享一下 ^_^ 数字滚动组件： <template> <div class="number-grow-warp"><span ref="numberGrow" :data-time="time" class="number-grow" :data-value="value">0</span></div> </template> <script> export default {props: {time: {type: Number,default: 2},value: {type: Number,default: 720000}},methods: {numberGrow (ele) {let _this = t...
子组件： <template> <span :endTime="endTime" :callback="callback" :endText="endText"> <slot> {{content}} </slot> </span> </template> <script> export default { data(){ return { content: , } }, props:{ endTime:{ type: String, default : }, endText:{ type : String, default:已结束 }, callback : { type : Function, default : } }, mounted () { this.countdowm(this.endTime) }, methods: { countdowm(timesta...
element-ui 中验证 一、简单逻辑验证（直接使用rules） 实现思路 ?html中给el-form增加 :rules="rules" ?html中在el-form-item 中增加属性 prop="名称" ?js中直接在data中定义rules:{} ?html部分 <el-form ref="form" :rules="rules" :model="form" label-width="300px"><el-form-item label="发货地址：" prop="fAdderss"><el-input class="inp" v-model="form.fAdderss" auto-complete="true"></el-input><el-button type="prima...
要实现的效果如下：<template><div class="newsList"><div v-for="(items, index) in newsList"><div class="date">{{showDay(index)}}</div><div class="list" ><ul><li class="list-item" v-for="item in items"><span class="text">{{item.title}}</span><img :src="attachImageUrl(item.images[0])" class="image"/></li></ul></div></div><div class="infinite-scroll" v-show="loading"><svg class="loader-circular" viewBo...
template <template><div class=login><div class="loginHeader"><input type="tel" class="loginBtn border-bottom" placeholder="请输入手机号" /><input type="tel" class="codeBtn" placeholder="请输入验证码" /><input type="button" class="getNumber" v-model="codeMsg" @click="getCode" :disabled="codeDisabled" /></div></div> </template>script <script>export default {data() {return {// 是否禁用按钮codeDisable...
element-ui界面非常简洁和美观，提供的组件可以满足绝大多数的应用场景，当表格中显示了图片的缩略图时，想要鼠标浮动在缩略图上时放大图片的效果，该如何实现呢？element-ui虽然没有直接提供图片悬浮放大的组件，但是可以使用Popover弹出框组件，一样实现效果，如下：具体的代码（此处只是图片单元格的代码，其它代码省略）： <el-table-columnprop="picture"header-align="center"align="center"width="150px"label="图片"><temp...
效果图如下所示：<template> <div class="asideBox"> <aside> <ul class="asideMenu"> <li v-for="(item,index) in menuList"> <div class="oneMenu" @click="showToggle(item,index)"> <img v-bind:src="item.imgUrl" /> <span>{{item.name}}</span> </div> <ul v-show="item.isSubShow"> <li v-for="subItem in item.subItems"> <div class="oneMenuChild">{{subItem.name}}</div> </li> </ul> </li> </ul> </aside> </div> </t...
Vue2原生始轮播图组件，支持宽度自适应、高度设置、轮播时间设置、左右箭头按钮控制，圆点按钮切换，以及箭头、圆点按钮是否显示。 <v-carousel :slideData="slideData" :height="450" :begin="0" :interval="3000" :dot="true" :arrow="true"></v-carousel> 话不多说直接上源码 轮播图应用页面 \components\public\home.vue <template><div id="home"><v-carousel :slideData="slideData" :height="450" :begin="0" :interval="30...
之前写一个 Demo里面 有些东西要使用d3实现一些效果 但是在很多论坛找资源都找不到可以在Vue里面使用D3.js的方法,npm 上面的D3相对来说 可以说是很不人性化了 完全没有说 在webpack上怎么使用D3.js 最后折腾很久 看到某位外国大佬 看他的案例 成功的实现了在Vue项目里面实现D3的使用 首先安装npm install d3 --save-dev以防万一,然后看package.json安装完成 在我们开始之前，让我们渲染一个Vue组件，它使用常规的D3 DOM操作呈现一个...
具有数据收集、校验和提交功能的表单生成器，包含复选框、单选框、输入框、下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传功能，支持事件扩展。欢迎大家star学习交流：github地址 示例https://raw.githubusercontent.com/xaboy/form-create/dev/images/sample110.jpg 安装 npm install form-create OR git clone https://github.com/xaboy/form-create.git cd form-create npm install引入 <!-- i...
这里讲解一下子组件向父组件传递值的常用方式。 这里通过一个加减法的实例向大家说明一下，这个的原理。 如下图所示： 当没有任何操作的时候父组件的值是 0当点击加号以后父组件的值是 1当点击减号以后父组件的值是减一变成 0具体代码我直接贴出来，刚出炉的代码。 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-...
Vuex是什么？ VueX 是一个专门为 Vue.js 应用设计的状态管理架构，统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data )。 Vue有五个核心概念，state, getters, mutations, actions, modules。 总结 state => 基本数据 getters => 从基本数据派生的数据 mutations => 提交更改数据的方法，同步！ actions => 像一个装饰器，包裹mutations，使之可以异步。 modules => 模块化Vuex State state即Vuex中的...
axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征： 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSRF下面代码给大家介绍vue axios 请求拦截，具体代码如下所示： import axios from axios;//引入axios依赖 import { Message } from element-ui; import Cookies fro...