言归正传 我们老样子直接先上效果图再开始今天的分享 这个项目的github可以看一看组件分析 界面组成逻辑分析最终实现界面组成 从上图中，我们可以看出界面主要分为menu和item2块，其中menu的动画是自传，item的动画是位移，然后这里我们通过绝对布局的方式将整个控件定位在四个角落 .menu_container {position: absolute;z-index: 100;border-radius: 50%;transition-duration: 400ms;text-align: center;border: #efefef 3px soli...
由于自身的项目比较简单，只有几个H5页面，用来嵌入app中，所有没有引入移动端的UI框架，但是介于能让用户在浏览H5页面时有下拉刷新和上拉加载，有更好的用户体验，自己写组件实现。1、下拉刷新DropDownRefresh.vue<template lang="html"><div class="refreshMoudle" @touchstart="touchStart($event)" @touchmove="touchMove($event)" @touchend="touchEnd($event)" :style="{transform: translate3d(0, + top + px, 0)}"><header...
MVVM (ModelView ViewModel)是一种基于MVC的设计，开发人员在HTML上写一些Bindings,利用一些指令绑定，就能在Model和ViewModel保持不变的情况下，很方便的将UI设计与业务逻辑分离，从而大大的减少繁琐的DOM操作。 关于实现MVVM，网上实在是太多了，本文为个人总结，结合源码以及一些别人的实现 关于双向绑定 ?vue 数据劫持 + 订阅 - 发布 ?ng 脏值检查 ?backbone.js 订阅-发布(这个没有使用过，并不是主流的用法) 双向绑定，从最基...
如图所示，要完成类似的一个底部导航切换。 首先。我们需要分为5个大的VUE文件。可以根据自己的习惯来放在不同的位置。我将5个主要的vue文件放在了5个不同的文件夹 然后,在components文件夹里新建Tabbar.vue/以及Item.vue文件 Item.vue文件如下 <template><div class="itemWarp flex_mid" @click=changePage><span v-show=!bol><slot name=normalImg></slot></span><span v-show=bol><slot name=activeImg></slot></span><span v-t...
环境：vue、webpack、constone 资料来源及文件：https://github.com/GleasonBian/CornerstoneVueWADO 需要下载的模块：cornerstone-core、dicom-parser 需要下载的js文件：压缩文件可以忽略显示组件：showDicom.vue <template><div class="dicom" ref="dicomImage"></div> </template> <script> import * as cornerstone from "cornerstone-core"; import * as dicomParser from "dicom-parser"; // 不建议 npm 安装 cornerstoneWA...
这里讲解是图片上传和图片预览。主要是围绕我们常用功能的列子做讲解 ,并且没有格外引入其他js 所以你复制过去做简单修改便可以看到效果 效果图：样式以及效果图一并展示 1.HTML <div class="rz-picter"><img :src="avatar" class="img-avatar"><input type="file" name="avatar" id="uppic" accept="image/gif,image/jpeg,image/jpg,image/png" @change="changeImage($event)" ref="avatarInput" class="uppic"></div>2.js data()...
在没给大家讲解实现代码之前，先给大家分享效果图：之前别人都是用jq写的，自己整理了一下开始使用 <el-form-item label="验证"> <div class="form-inline-input"> <div class="code-box" id="code-box"> <input type="text" name="code" class="code-input" /> <p></p> <span>>>></span> </div> </div> </el-form-item>vue代码 //获取元素距离页面边缘的距离 getOffset(box,direction){ var setDirection = (direction == top) ? ...
学习vue有一段时间了，最近使用vue做了一套后台管理系统，左侧菜单需求是这样的，可以多层，数据由后台传递。也因为自己对官方文档的不熟悉使得自己踩了不少坑，今天写出来和大家一起分享。 效果图如下所示：先说说遇到的坑，由于是子父组件，当时传递使用的是子父组件的传递，但是这时候只能获取到第一层的数据，第二层往后获取不到数据，踩了一下午坑以后才知道，子组件使用了递归组件，这时候他已经不能往父组件传递了，子传父，...
1.自定义 提示框 组件 src / components / Toast / index.js /*** 自定义 提示框( Toast )组件*/ var Toast = {}; var showToast = false, // 存储toast显示状态showLoad = false, // 存储loading显示状态toastVM = null, // 存储toast vmloadNode = null; // 存储loading节点元素Toast.install = function (Vue, options) {// 参数var opt = {defaultType: bottom,duration: 2500,wordWrap: false};for (var property in options)...
本文介绍了Vue实现左右菜单联动实现代码吗，分享给大家，也给自己留个笔记，具体如下： Github 源码传送门： Rain120/vue-study 之前在外卖软件上看到这个左右联动的效果，觉得很有意思，所以就尝试使用 Vue 来实现，将这个联动抽离成为一个单独的组件，废话少说，先来一张效果图。这个组件分为两个部分，1、左菜单；2、右菜单。 左菜单的 DOM 结构 <scrollclass="left-menu":data="leftMenu"ref="leftMenu"><div class="left-me...
目标 使用vue2.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-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> </head> <body><div id="app"><button id=...
需求一个监控控制台界面，有成千上万条表格数据，需要做一个全局分页组件，支持调整每页显示数目、总页数、当前页数、前进后退、自由跳转页数。 字段参数名数据类型说明totalNumber总条数pageNoNumber总页数limitNumber每页展示条数 原型预期长酱紫（不要嫌丑！毕竟是后台控制台！）代码html <template><div class="paging-content clearfix"><div class="fl">总共<b> {{total}} </b>条 <select v-model="limit"><option>10</optio...
将之前的用css3+jq实现的横向树样式简单封装成组件使用到vue项目中，文件名为transverseTree.vue 代码：<template><div class="tree"><ul v-if="treeData && treeData.length"><li v-for="(column,index) in treeData"><span class="root">{{column.name}}</span><ul v-if="column.children && column.children.length"><li v-for="(childrenColumn,index) in column.children"><span>{{childrenColumn.name}}</span><ul v-if="chi...
导出的页面组件如下： <template><div id="resumeId"><resumeHtml ref="resume" @on-download="download"/></div> </template>1、导出html 方法： 1）获取要导出的组件页面的css把它设置成js变量一文本并通过export导出 2）获取要导出组件页面的html的dom标签代码，通过this.$refs.resume.$el.innerHTML获取，也可以通过document.getElementById('resumeId')获得 3）构造html页面，并使用createObjectURL构造一个文件流并下载，如下...
具体代码如下所示： export default new Router({routes: [{path: /live,name: live,component: () => import(@/view/live/live.vue)}] })上面的代码是很常见的router代码分割,只在代码路由为live才会去加载live.vue 但这样在live.vue获取的过程将是一片空白,什么也没有,体验不好, 利用vue提供的异步组建可以解决 新建一个 loadable.vue <template><index></index> </template> <script>import LoadingComponent from ./load.vue /...