就像风1样-CSDN博客

原创前端软件,模版,工具,插件,素材,资源,面试题搜集记录(实用干货不定期更新)

以下为搜集的资源包含ps软件，前端开发软件，资源下载软件，工具类软件等(@炬)*专业的前端面试题库，包含了：Html、Css、JavaScript、jQuery、ECMAScript、Vue、Angular、React、http协议、ajax、正则表达式、node.js、移动端开发等诸多web前端开发方面的面试真题 https://www.html5iq.com/*web前端.........

2018-08-23 15:32:13 1784 1

原创简单音乐播放器，可拖动进度条。完整代码demo

效果图：可播放暂停继续播放，进度条可拖动，时间展示，声音调节完整代码（直接拿来用）<!DOCTYPE html><html><head><meta charset="utf-8"><title>audio功能开发</title> <style> * { margin:0; padding:0 } .music-range { width:350px;

2020-05-22 19:06:27 3297

原创景区自定义手绘地图叠加

地图上嵌套手绘地图--实现效果：这里用到了地图的图层简单一个完整Demo代码<!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-Com.

2020-05-09 11:06:38 2594 4

原创 vue中引用echarts设置渐变色new echarts不能用

需求需要设置透明渐变区域，在https://gallery.echartsjs.com中找到如下图其中渐变透明色代码中的color: new echarts 设置完报错color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, ...

2020-03-03 11:45:59 5597 5

原创点击图片下载保存（完整demo代码全）

需求：点击图片下载，看了好多都没实现，加 download测试也没成功原因：浏览器已经限制死跨域下载多媒体文件的各种方式。最正规的办法还是让后端做一次转发。请求后端，后端向第三方请求文件，返回给前端，前端保存文件。不过在网上找了下用canvas的方式前端实现点击图片另存完整代码：<!DOCTYPE html><html> <head&...

2019-09-07 15:28:16 1346

原创 vue上传OSS前端实现直传阿里云

看了好多例子终于走通了，下面例子为前端暴漏了信息的简单实现过程，实际上需后端配合返回需要的信息参考了这些文章https://www.cnblogs.com/ldlx-mars/p/7985758.html OSS存储https://www.cnblogs.com/yw-elm/p/VUEli-yongOSS-BrowserJSSDK-shi-xian-a-liOSS-qian-d.ht...

2019-09-03 17:59:41 14918 8

原创 vue技巧

方法绑定 {{ name() }} 返回展示：<template> <div>{{name()}}</div></template><script> export default { data{ return { text："是？" } ...

2019-08-29 14:41:49 427

原创随鼠标拖拽demo（完整代码）

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body{ margin:0; ...

2019-08-28 11:11:27 842

原创 vue实现循环滚动列表vue-seamless-scroll

1.安装vue-seamless-scroll 实例文档链接cnpm install vue-seamless-scroll --save2.文件中引入，组件配置import vueSeamlessScroll from 'vue-seamless-scroll'3.使用<template> <vue-seamless-scro...

2019-08-24 17:33:16 35627 16

原创 vue中v-html渲染出来的元素添加样式

<span v-html="ExhibitionData.content" id="Content"></span></li>不能直接在 <style></style> 中修改css样式这应该是vue中虚拟dom渲染的元素无法修改样式；方法1：在updated生命周期函数中，js动态配置样式（这里引入了jQ，可以用原生...

2019-08-19 14:59:29 3930

原创 vue导出excel(简单方法完整介绍)

1.安装插件cnpm install vue-json-excel2.min.js中引入使用import JsonExcel from 'vue-json-excel'Vue.component('downloadExcel', JsonExcel)3.直接在页面中使用<download-excel class = "export-excel-...

2019-08-14 14:40:33 48822 26

原创 vue实现按字母选择城市，点击字母跳转对应项目demo(含修改滚动条样式)代码全

先上图如下：按字母获取城市 json ：链接：https://pan.baidu.com/s/1FgkftNLfFLvx9_xNdFU6RQ提取码：mwqd需求：顶部接口获取热门城市及城市Id，中部通过点击哪个字母底部自动跳转到哪个字母那一项获取城市id！只能点击二级城市！上代码↓↓↓↓ 请自动略过多余代码<template> <div clas...

2019-08-12 14:04:13 999

原创 vue基于elementUI代码部署后图标不显示

问题原因：查看/build/webpack.base.conf.js文件可以发现，woff或ttf这些字体会经由url-loader处理后在static/fonts目录下生成相应的文件。也就是说实际应该通过/static/fonts/**路径来获取字体图标，而实际却是请求/static/css/static/fonts/**，自然报错误。解决办法：在build/...

2019-08-09 16:41:01 4141 1

原创网页中添加QQ链接，别人一点就能和我进行QQ聊天

最简单的一句代码也能实现中间的 QQ号可更改<a href="tencent://message/?uin=974260693&Site=&Menu=yes">点我和好友聊天</a> 这个直接在腾讯QQ推广里用自己帐号注册一下，然后会生成一段代码，包含唤起QQ的链接；直接拿来用就行！传送门 QQ推广https://shang.q...

2019-08-09 11:40:28 29566

原创 css3实现动画效果完整代码demo

过渡渐隐适合两张图片调整其中一个透明度，完整代码：<!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />...

2019-08-06 11:02:35 5711

原创拖动进度条效果完整demo代码全（jq百分比）

完整代码：<!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <script type="tex...

2019-08-06 10:16:56 1333

原创 vue基于elementUI下拉Select同时获取value和label的值

碰到脑残架构师系列——Select通过接口获取列表tableData，选择onSelectedDrug 后获取参数：id直接获取但 name 需要多加个匹配<el-form-item label="控制系统" :label-width="formAddLabelWidth" prop="controlSystemName "> <el...

2019-07-30 16:30:55 19488 3

原创 vue添加动态粒子背景，可设置形状，大小，速度，数量...

截取了一部分的效果图vue项目中安装vue-particles插件1.安装npm install vue-particles --save-dev2.main.js引入import VueParticles from 'vue-particles'Vue.use(VueParticles)3.引入代码<vue-particles co...

2019-07-29 16:13:19 1704 1

原创 vue基于elementUI选择表格数据

.代码：<template> <div class="table_wrap"> <el-table :data="tableData" size="mini" stripe style="width: 100%" border ref="multipleTable" @selection-change="handleSel...

2019-07-26 17:42:56 1986

原创 vue基于elementUI表格状态判断展示

判断一条数据的状态展示相应的内容方法如：status(状态(-1:待处理,0:关闭,1:已反馈,2:未解决,3:已解决)), 通过 v-if 判断显示对应的状态代码：<div style="padding:15px 20px;"> <el-table size="mini" stripe :...

2019-07-25 15:16:26 15950 4

原创 vue项目打包成安卓app步骤（Hbuilder打包）

1.首先保证vue项目正常的，再用自带的打包程序运行npm run build打包完成后代码在根目录dist 文件夹内，2.然后在Hbuilder中打开这个dist文件夹，这时，这个项目是web应用的项目需要把它转成app应用的项目，鼠标右键转换成移动app，dist的图标会由 W 变成 A3.打开dist目录下的index.html，格式化一下代码在每个有...

2019-07-18 18:13:16 2512

原创 vue引用echarts折线平滑面积图

vue中安装 echarts 不会用的有入门篇介绍文章：https://blog.csdn.net/qq_42221334/article/details/95354424主要代码：<template> <div> <div class="cardList_title">用户活跃度</div> <d...

2019-07-17 15:44:55 2633

原创 vue引用echarts柱形堆叠图

vue中安装 echarts 不会用的有入门篇介绍文章：https://blog.csdn.net/qq_42221334/article/details/95354424（周，月，年动态切换数据功能）请参考文章https://blog.csdn.net/qq_42221334/article/details/96307823主要代码：<template> ...

2019-07-17 15:20:13 1631

原创 vue引用echarts柱形加折线统计图（周月年动态切换数据）

vue中安装 echarts 不会用的有入门篇介绍文章：https://blog.csdn.net/qq_42221334/article/details/95354424思路：通过引用echarts图表实现固定数据展示，添加定位周，月，年通过点击动态切换数据即可主要代码：<template> <div> <div class=...

2019-07-17 14:55:07 7026 3

原创 js实现鼠标点击跟随CSS3动画demo（代码全）

效果：完整代码：<!DOCTYPE html><html><head> <title>鼠标跟随</title> <meta charset="utf-8"> <style type="text/css"> body{ heigh...

2019-07-16 13:15:33 1980

原创 vue引入echarts中国地图

需求：显示各省名字，滑过标记地显示接入数量，点击标记地显示系统数量已接入及能跳转对应页面信息的入口；配置：1.安装依赖npm install echarts -S2.全局引入main.js// 引入echartsimport echarts from 'echarts' Vue.prototype.$echarts = echarts3.在需要地图的...

2019-07-11 17:15:20 16596 7

原创 vue引入echarts圆环图等各种图表方法-----入门

1.安装依赖npm install echarts -S2.全局引入main.js// 引入echartsimport echarts from 'echarts' Vue.prototype.$echarts = echarts3.模版引入柱形图（此处为模版演示）圆环在下面介绍怎么更改export default { name: 'hello', data...

2019-07-10 17:23:37 4499 1

原创 vue打包放服务器不显示图片

1.在config（文件夹）—>index.js中，添加（如图的红色标记区域）2.在build（文件夹）—>utils.js添加3.配置完成后，在工程里静态文件存储又分为两种（1）img css 正常引入： img标签引入图片 <img’ src="…/…/static/img/moon.png" class=“test-img”...

2019-07-02 15:26:23 1116

原创 vue开发h5简单的微信支付

在微信内H5调起微信支付，主要依赖于一个微信的内置对象WeixinJSBridge，这个对象在其他浏览器中无效。需要有通过后台返回的信息如下：methods: {//支付 payl(){ var that = this; axios .post(baseUrl + "/apiyd/pay/doPayInfo/", formData) ...

2019-07-01 16:50:21 5035

原创 vue简单上传图片，压缩图片功能实现（js原生通用）

可以先看只有上传图片的js完整demohttps://blog.csdn.net/qq_42221334/article/details/84827369vue 完整demohttps://blog.csdn.net/qq_42221334/article/details/93198417参考上传图片添加了canvas 方法压缩图片，判断图片宽度大于1000时进行压缩...

2019-06-29 10:23:39 4732

原创 vue实现评价星星功能（代码全）

代码：<template> <ul class="StarsWrap"> <li v-for="(i,index) in list" :key="index" @click="clickStars(index)"> <img :src="xing>index?stara:starb"/&...

2019-06-26 11:40:04 5428 5

原创 html中input禁止输入(禁止获得焦点)多种方法及input限制数字和长度

input禁止输入(禁止获得焦点)1： readonly规定输入字段为只读可复制，但是，用户可以使用Tab键切换到该字段，可选择,可以接收焦点，还可以选中或拷贝其文本。<input type="text" value="禁止输入，可以使用Tab键切换到该字段" readonly="readonly">2：disabled 被禁用的 input 元素可复制，不能接收焦点...

2019-06-24 14:33:46 19383 1

原创 vue开发for循环判断表单列表空值技巧

上传表单时经常判空，一个一个判断麻烦！这里提示个技巧：首先要有表单的集合，和提示内容的集合，表单输入内容时通过vue的v-model更改表单内容集合，通过循环param表单内容，对应的提示paramTips内容this.Tips为自己写的提示方法<script>export default { name: "feedShopping", data() { r...

2019-06-22 17:36:58 7477

原创 vue开发简单上传图片功能

vue简单的上传个图片的功能，主要代码：<template><div class="plan_list"> <div class="plan_name Upload_name">企业logo</div> <div class='Upload'> <input type=...

2019-06-21 15:45:16 3257

原创 vue开发实现单选多选功能

单选：只能选择一个代码：：（循环集合cities，点击哪个传值索引index，给对应的索引加上类名，初始化默认n为0）<ul class="box"> <li v-for="c,index of cities" :class="{checked:index==n}" @click="changeList(index)">{{c}}</li>&l...

2019-06-21 09:54:19 5242

原创 vue开发H5城市三级联动（代码全）

看图说话：1.安装组件：npm install v-distpicker --save2.调用代码（全）：<template> <div> <div class="head_top"> <div class="right r"> <div class="Cit...

2019-06-17 14:09:13 2632 1

原创 vue开发H5简单上拉加载功能代码全vue监听滚动底部

没用ui框架写简单的实现了下功能思路:上拉加载肯定要滚动到底部，所以就先监听滚动条滚动到底部然后执行分页+1请求数据push到渲染列表中即可；同时判断最后一页时不请求，展示无数据状态主要代码：1：监听滚动底部<script>export default { name: "index_SearchPage", data() { return...

2019-06-15 11:32:12 2287

原创 vue底部导航切换（原生切换图片）功能实现

需求：底部导航切换页面，同时切换图片。底部为公共组件组件代码：<div class="weui-tabbar"> <a href="javascript:;" class="weui-tabbar__item " v-for="(i,index) in tabs" :key="index" :class="{active:index == that...

2019-06-14 11:40:16 3677 2

原创 vue父组件向子组件传参

需求：头部为一个公用组件，跳转页面标题切换，同时控制返回键显示隐藏父组件代码(引用子组件) 同时子组件上传递参数textTitle和ifReturn：<template> <div> <headAssembly textTitle="消息" ifReturn="0"/> <div><template>...

2019-06-13 16:37:31 1934

原创 vue开发H5步骤详解（环境搭建+rem布局+域名配置+请求）

环境搭建01. 安装Node.js Node.js安装包及源码下载地址为：https://nodejs.org/en/download/、64 位安装包下载地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x64.msi02. 检测一下node版本，在cmd命令框框内输入命令 node --version 查看node是...

2019-06-11 10:02:45 20119

空空如也

空空如也