前端
三宝鸭
我是辣鸡
展开
-
echart3 title配置参数
title 下的各个属性如下图:showtitle.show | boolean[ default: true ]是否显示标题组件。例子:option = { title : { show:true,//默认为true,可以省略 text: '某站点用户访问来源', subtext: '纯属虚构', x:'ce...转载 2019-11-21 20:41:31 · 814 阅读 · 0 评论 -
vue项目中的数据大屏 -- echarts迁徙图
效果图如下:可拖动,缩放,,数据动态流动等。1. 引入echarts方法:npm install echarts --save或者使用国内淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.orgcnpm install echarts -S2. main.js:在 main.js 中添加:import e...原创 2019-11-21 19:25:07 · 1113 阅读 · 1 评论 -
CSS实现图片淡入后淡出
html<img src="../../assets/zcjjkq.png" class="trans_fade_image">css@-webkit-keyframes fadeInOut { 0% { opacity:0; } 50% { opacity: 1; } 100% { opacity:0; }...原创 2019-11-14 00:47:18 · 1591 阅读 · 0 评论 -
npm与cnpm的区别
NPM介绍:说明:NPM(节点包管理器)是的NodeJS的包管理器,用于节点插件管理(包括安装,卸载,管理依赖等)使用NPM安装插件:命令提示符执行npm install <name> [-g] [--save-dev]<name>:节点插件名称。例:npm install gulp-less --save-dev-g:全局安装。 将会安装在C:\ Users ...转载 2019-10-19 21:54:19 · 124 阅读 · 0 评论 -
npm 安装过程
第一步:安装node.js https://nodejs.org/en/(官网可以下载,下载后安装即可,一般会默认添加到环境变量中去),可以再cmd中输入node -v来检查是否安装好。node会自带npm,但不是最新版本的npm。第二步:配置镜像站 npm config set registry=http://registry.npm.taobao.org 可用来提高下载安装速度。...原创 2019-10-19 21:15:28 · 307 阅读 · 0 评论 -
vant 时间格式化输出
作用:把vant库中 datetimePicker组件选出的时间格式化initData(){ var sessionid = getStore({name:'sessionid'}); console.log(sessionid) axios.get(Config.baseUrl+'/f/duty/dutySave/findByMD;JSESSIONID='+sessioni...原创 2019-09-04 15:37:19 · 9273 阅读 · 1 评论 -
一键报平安
效果如图:显示:<template> <div class="main"> <van-nav-bar title="一键报平安" left-text="返回" left-arrow @click-left="onClickLeft" right-text="记录" @click-right="reportSafeList"> ...原创 2019-09-04 15:45:26 · 691 阅读 · 0 评论 -
CSS3图片蒙版效果-webkit-mask
大家对-webkit-mask这一属性可能不太熟悉,或许有很多人都是第一次见到,没错,这一属性也是还未被众多浏览器所支持的CSS属性,目前支持这一属性的仅有 -webkit-前缀的谷歌 及 safari浏览器,但是相信在不久的未来这一属性将被其他主流浏览器所支持,下面我们来一睹为快。首先介绍一下它的属性值,可以有两种写法(图片蒙版、渐变蒙版):一、图片蒙版.demo1 { backg...转载 2019-09-07 21:08:54 · 2427 阅读 · 0 评论 -
ECMAScript6.0入门1--基本语法
基本语法1. let、const不可重复声明。只在语法块内起作用,块级作用域。2. let,是变量可以修改;const是常量,不可修改。3. 箭头函数:let show = (a,b) => { alert( a+b )};show();//-------作用:排序----------let arr = [12, 5, 9, 44, 66];arr.sort((n1,...原创 2019-09-28 10:55:48 · 126 阅读 · 0 评论 -
ECMAScript6.0入门2--数组
数组map( 映射 ):let arr = [12, 5, 8]; let result = arr.map(function (item){ return item*2;})// 或写为let result = arr.map( item=>item*2 )alert(result);//输出:24,10,16let score = [19, 85, 99, 25,...原创 2019-09-28 11:04:44 · 94 阅读 · 0 评论 -
ECMAScript6.0入门3--字符串
startsWith(‘以xx开头’):let str = ‘http://www.baidu.com’; if( str.startsWidth(‘http://’) ){ alert(‘普通网址’) }else if(str.startsWidh(‘https://’)){ alert(‘加密网址’) } else if(str.startsWidh(‘git://’)){...原创 2019-09-28 11:10:56 · 130 阅读 · 0 评论 -
ECMAScript6.0入门4--面对对象
面对对象原写法: 类与构造器混淆function User (name, pass){ this.name = name; this.pass = pass;}User.prototype.showName = function(){ alert(this.name);};User.prototype.showPass = function(){ alert(this...原创 2019-09-28 11:13:26 · 96 阅读 · 0 评论 -
ECMAScript6.0入门5--JSON & Promise & Generator
JSON let json = { a: 12, b: 5}; alert( JSON.stringify(json))//不加JSON.stringify,json就是个对象的拼接。加了之后就拼成了字符串JSON简写:Key和value一样时,留一个就行。例:{a, b, c: 13 }。方法:show: function(){…} == show(){…}pro...原创 2019-09-28 11:22:57 · 96 阅读 · 0 评论 -
ES6与JavaScript之间的关系
js与node.jsJS是由ES(ECMAScript)、DOM(浏览器文档对象)、BOM(浏览器对象模型)组成。其中Node.Js就只有ES,目前浏览器比较流行的版本就是ES6(ES2015),老浏览器的版本基本上都是ES5。所以alert和document不能在Node运行(因为Node没有dom和bom)。ECMAScript 6简介ECMAScript 6.0(以下简称ES6)是J...转载 2019-09-28 11:31:03 · 4706 阅读 · 1 评论 -
vue项目 退出登录
**退出登录怎么写?**如下,显示部分退出登录按钮(引用了svg格式的icon)<van-cell title="退出登录" @click="loginout"> <div slot="icon"> <svg class="iconLeft" aria-hidden="true"> <use ...原创 2019-09-04 14:21:03 · 10559 阅读 · 1 评论 -
vue项目登录页面
页面效果图如下:显示部分:<template><div class="main"> <van-nav-bar title="用户登录"/> <van-row type="flex" justify="center" class="img"> <van-col span="1"> </van-col&...原创 2019-09-04 14:11:33 · 5317 阅读 · 1 评论 -
vant库 van-image标签 引用本地图片
问题:vant中的van-image组件的src参数默认为图片的网络链接(如下所示)<van-image width="100" height="100" src="https://img.yzcdn.cn/vant/cat.jpeg"/>当要引用本地的图片时,直接写图片的路径在vue项目中会刷不出图片(但用 <img> 标签可以显示 )。解决方法:...原创 2019-09-04 13:52:02 · 38112 阅读 · 9 评论 -
vant轮播
<template> <div class="swiper"> <van-swipe :autoplay="5000" :loop="false" indicator-color="#fff"> <van-swipe-item v-for="(image, index) in SwiperImg" :key="inde...原创 2019-07-12 21:25:23 · 1049 阅读 · 1 评论 -
form表单+移动端自适应
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title> New Document </title> <meta name="Gen...原创 2019-07-07 13:37:34 · 5191 阅读 · 2 评论 -
vue.js入门一
<!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-U...原创 2019-07-25 17:23:43 · 66 阅读 · 0 评论 -
vue.js入门二
<!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-U...原创 2019-07-25 17:27:22 · 91 阅读 · 0 评论 -
vue.js入门三
<!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-U...原创 2019-07-26 16:32:29 · 109 阅读 · 0 评论 -
vue.js入门四
<!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-U...原创 2019-07-26 18:13:39 · 68 阅读 · 0 评论 -
vue.js入门五
半场动画<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv...原创 2019-07-26 18:43:27 · 78 阅读 · 0 评论 -
原生 JS 实现飞机大战小游戏
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title> 飞机大战 </title> <style type="text/css"&...原创 2019-07-26 18:48:40 · 672 阅读 · 1 评论 -
jquery 实现心漫天动画效果
代码如下<!doctype html><html onselectstart='return false'><head><meta charset="utf-8"><title>心漫天</title><style type="text/css">*{margin:0; padding:0;}htm...原创 2019-07-26 18:51:51 · 121 阅读 · 0 评论 -
原生 JS 写拖拽文件上传
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>拖拽</title> <style> *{margin:0;padding:0;box-sizing: border-box;} body{font-size: 1...原创 2019-07-26 18:53:58 · 448 阅读 · 1 评论 -
vue.js入门六
钩子函数实现列表动画<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta htt...原创 2019-07-26 19:53:54 · 101 阅读 · 0 评论 -
css使用display:inline-block垂直居中
使用 inline-block 水平垂直居中任意内容<!-- 注释用于去除 inline-block `间隙` --><div class="container"><!-- --><div class="center"> <h2>这个是居中标题</h2> <p>...原创 2019-08-01 16:16:48 · 11402 阅读 · 0 评论 -
vue修改UI框架样式 样式穿透
vue 修改ui框架样式 样式穿透组件内的结构如下:<template> <div class="box"> <Input class="input-test" type="text" /> <Input type="text" /> </div></template>...原创 2019-08-01 17:57:25 · 1812 阅读 · 0 评论 -
认识vue之MVVN框架
Vue学习笔记MVVM前端视图层的分层开发思想,VM是MVVM的核心。是V和M之间的调度者;使用MVVM的思想是为了让开发更方便,MVVM提供了数据的双向绑定。数据的双向绑定由VM提供。...原创 2019-07-08 09:19:46 · 865 阅读 · 0 评论