关注
分享
用户体验官大龙
一枚不太安分的前端攻城狮
展开
-
基于Vue和Vant-ui开发的移动端周历日期选择器
该周历日期选择器是在基于Vue的小日历（支持按周切换）的基础上改造而来，对其代码进行优化，并引入了Vant-ui新增了年份和月份的选择、一键返回今日的快捷键功能，以及支持4种常用日期格式的选择。总体来说，该日期选择器适用于中小型移动端web项目，非常好用，现在我把它封装成了一个组件，有需求的同学就拿去用吧，别忘了点赞哦！动图演示：详细介绍和源码，请戳此链接：https://gi...原创 2020-01-07 15:46:08 · 4421 阅读 · 3 评论 -
基于Element-UI的组件改造的树形选择器（树形下拉框）
前言：由于做项目需要一个树形选择器，项目用的也是element-ui框架，然而它自带的选择器组件没有树形选项，又不想引入其他的框架组件，于是自己利用el-select和el-tree改造了一个，感觉还挺好用的，就封装成了一个组件，如下图：element-ui的el-select组件的选项只能是列表形式：改造后的树形选择器：简介：此树形选择器组件是基于elment-ui框架的e...原创 2019-03-18 13:46:16 · 68175 阅读 · 146 评论 -
vue项目引入vux-ui框架详解（快速入门）
一、新建自带vux框架的vue项目（免配置）1、安装vue环境 （已安装，跳过这一步）2、新建基于vux的vue项目;vue init airyland/vux2 projectName //（新建项目配置已省略） cd projectName //（新建成功后切换到项目根目录下）npm install --registry=https://re...原创 2018-11-04 13:32:02 · 4955 阅读 · 2 评论 -
基于Element-UI可以动态生成表单项的form表单
由于做项目的需要做一个不定项的form表单，即可以动态生成表单项的form表单，自己利用element-ui的el-form表单制作了一个，如下动图：此动态form表单是基于element-ui里的el-form表单基础上进行修改而来，它实现了新增表单项、删除表单项、表单验证和重置表单、表单提交等form表单所拥有的基本功能。详细介绍，请查看源代码应用场景：表单项不确定的form表单...原创 2018-10-14 20:08:38 · 16785 阅读 · 7 评论 -
js实现无限层级树形数据结构（创新算法）
由于做项目的需要，把一个线性数组转成树形数组，在网上查了很多文章，觉得他们写的太复杂了，于是自己写了一个，在折腾了一下午终于把它写出来啦（激动.gif），用两个filter过滤器就搞定了，代码简洁明了，数据结构小白都能看懂。js代码：把扁平数据转成树形数据function setTreeData(source){ let cloneData = JSON.parse(JSON.s...原创 2018-09-22 20:19:32 · 41092 阅读 · 100 评论 -
Vue简单的实现五星级评分
效果：原理：类似于四舍五入的方法，不同点在于四舍五入是把数字转成整数，而这个方法是把分数转成整数或（整数+0.5），有点抽象，举个例子就明白了，例如 把4.7转成4.5（即四个半星），4.3转成4.0（即四个星），4.0就是四个星。需要准备三张星星图片，即全星，半星，空星。代码：<template> <div class="score"> ...转载 2018-08-16 13:23:46 · 3309 阅读 · 0 评论 -
vue组件间传值的方法汇总（父子间、兄弟间）
1、组件间的传值1.1 父组件向子组件传值子组件自定义一个属性父组件通过自定义属性绑定值子组件调用自定义属性来拿到值（1.1 完）1.2 子组件向父组件传值子组件自定义一个事件父组件通过自定义事件绑定一个方法来接收值（1.2 完）1.3 兄弟组件间传值（或者夸组件传值）新建一个js文件作为兄弟组件间传值的中转站（new 一个vue）...原创 2018-08-07 14:22:04 · 5912 阅读 · 0 评论 -
一个基于Vue和Element-ui的个人博客系统（附完整代码）
简介 这是一个偏前端的博客项目，其前端是基于Element-UI和Vue2.0开发实现的，后端的实现使用了Google的Firebase作为实时数据库，直接调用它提供的接口来实现数据的读取和存储。（由于项目使用了国外的firebase，所以需要连接VPN才能正常工作。） 此博客系统实现了基本的博客发布，修改，删除和查询；应用到的vue技术主要有axios请求、父...原创 2018-07-04 13:49:39 · 15707 阅读 · 11 评论 -
element-ui框架的el-dialog弹出框被遮罩层挡住了
如图：解决办法在el-dialog标签里添加 :modal-append-to-body='false'实现效果：问题解析先来看看element-ui官网提供的属性说明文档文档解释：翻译成大白话就是，若el-dialog弹出框设置了modal-append-to-body='true'（默认）属性，它的遮罩层就会被插入到body标签下（即与组件所在的最外层d...原创 2018-07-02 19:24:30 · 79383 阅读 · 41 评论 -
vue实现路由跳转和嵌套（快速入门）
vue-router路由的原理是通过改变网址，来实现页面的局部刷新，相比a标签跳转的不同之处在于，路由跳转不需要刷新整个页面。一、路由跳转1、安装路由vue-router:npm install vue-router2、vue项目引入vue-ruoter：3、配置路由（页面跳转）：可以建一个专门用于路由的js文件，里面配置路径。1）rout...原创 2018-06-20 12:39:26 · 75163 阅读 · 26 评论 -
vue项目引入element-ui的方法
安装element-ui：npm i element-ui -S查看是否安装成功：vue项目的依赖文件node_modules里存在element-ui依赖vue项目中引入element-ui：在main.js文件里引入，方法如下（完）...原创 2018-06-20 10:06:15 · 2692 阅读 · 0 评论 -
vue项目引入element-ui后报错的解决方案
错误：vue2.0引入element-ui后报错如下图原因：后来从依赖文件里找到了问题，vue无法识别.ttf和.woff文件解决办法：修改vue配置文件“webpack.config.js”如下：（重启vue项目，完美解决） 参考：https://segmentfault.com/q/1010000011762672?sort=created...转载 2018-06-19 16:08:43 · 9909 阅读 · 3 评论 -
vue制作一个无限层级伸缩树形菜单栏
使用v-for循环生成一个多级嵌套菜单栏，只要你学会了这个方法，几乎所有的菜单栏都可以实现了。实例1：不能伸缩的多级菜单栏现在以一个三级菜单栏为例：<div class="level-one" v-if="obj.level == 1" v-for="obj in bar1"><a>{{obj.title}}</a> &原创 2018-06-25 14:02:31 · 7846 阅读 · 4 评论 -
vue使用vue-resource实现简单的post和get（实例详解）
本文只展示vue-resource实现的相关代码，对于页面的实现和数据渲染就不多加解释了。一、安装1、下载并安装vue-resourcenpm install vue-resource --save查看依赖文件存在vue-resource说明安装成功2、vue项目中引入vue-resource在main.js函数中引入，如下图二、应用我使用了“JSONP...原创 2018-06-21 19:25:50 · 8792 阅读 · 0 评论