连风都不记得我
码龄6年
关注
提问 私信
  • 博客:40,079
    40,079
    总访问量
  • 19
    原创
  • 890,770
    排名
  • 12
    粉丝
  • 0
    铁粉

个人简介:一个前端弟弟

IP属地以运营商信息为准,境内显示到省(区、市),境外显示到国家(地区)
IP 属地:湖北省
  • 加入CSDN时间: 2019-07-17
博客简介:

weixin_45419441的博客

查看详细资料
个人成就
  • 获得23次点赞
  • 内容获得53次评论
  • 获得102次收藏
  • 代码片获得167次分享
创作历程
  • 3篇
    2021年
  • 14篇
    2020年
  • 2篇
    2019年
成就勋章
TA的专栏
  • vue
    3篇
  • echarts
    2篇
  • 阿里图标icon
    1篇
  • angular
    2篇
兴趣领域 设置
  • 前端
    javascriptcssvue.jsreact.jses6webpackxhtml前端框架
  • 后端
    node.js
  • 移动开发
    flutter
  • 网络与通信
    https
  • 微软技术
    typescript
  • 学习和成长
    面试
创作活动更多

2024 博客之星年度评选报名已开启

博主的专属年度盛宴,一年仅有一次!MAC mini、大疆无人机、华为手表等精美奖品等你来拿!

去参加
  • 最近
  • 文章
  • 代码仓
  • 资源
  • 问答
  • 帖子
  • 视频
  • 课程
  • 关注/订阅/互动
  • 收藏
搜TA的内容
搜索 取消

Vue扭蛋机营销小游戏

最近有一个需求做一个营销类型小游戏所以做了一个扭蛋机类型的小游戏出来大体逻辑:点击按钮=》播放音乐、扭蛋机内部球滚动=》弹出球=》音乐停止、显示中奖信息如图所示h5或小程序主要是通过后台页面进行配置游戏规则以及背景图片、扭蛋图片、按钮、出口图片、顶部标题图片,以及可以配置按钮和出口以及顶部标题位置,更大的进行可配置,满足更多节日场景的使用,只需要上传自己想要的样式进行搭配即可图示该功能主要的逻辑就是后台通过配置对应的按钮显示的位置 前台显示对应的位置当前后台使用的是元素的拖拽获取当前元素
原创
发布博客 2021.09.06 ·
2199 阅读 ·
0 点赞 ·
1 评论 ·
6 收藏

Vue封装input公共组件

Vue封装input公共组件最近呢有一个需求是很多个表单添加 编辑等操作 会用到很多input输入框所以就想把input进行简单封装 提高一些复用率减少一些代码量因封装没什么难度性 故直接贴上代码 做一些简单的注释<template> <div > <el-form :label-position="labelPosition" label-width="90px" style="margin-left:10%"> <el-form
原创
发布博客 2021.09.06 ·
677 阅读 ·
0 点赞 ·
0 评论 ·
3 收藏

vue封装组件完整示例(涉及父子传值等操作)

例子 封装一个公共组件 dialog 在两个页面调用dialog子组件<template> <el-dialog style="margin-top: 28vh" title="提示" :visible.sync="dialogVisible" width="20%" :before-close="handleClose" > 使用插槽,两个不同的页面显示各自不同的内容 <slot name="lice"
原创
发布博客 2021.03.03 ·
656 阅读 ·
0 点赞 ·
1 评论 ·
6 收藏

vue项目中 使用swiper轮播图

首先 安装 依赖 npm install swiper --save-dev使用的vue文件中 导入import { Swiper, SwiperSlide } from "vue-awesome-swiper";import "swiper/swiper-bundle.css";挂载 调用 components: { Swiper, SwiperSlide, },书写 元素 <swiper ref="swiper1"
原创
发布博客 2020.11.12 ·
722 阅读 ·
0 点赞 ·
5 评论 ·
1 收藏

在Vue中使用Echarts饼状图 内外圈数据联动 具体实现方式分享

echarts图表的具体使用方法就不介绍了 可以去看以前的博客1 创建html <div ref="userData" :style="{width: '100%', height: '450px'}"></div>2.对饼状图表进行配置 // 累计用户数图表配置 getUserData() { //首先获取到元素 this.userDataChart = this.$echarts.init(this.$refs.us...
原创
发布博客 2020.09.08 ·
1415 阅读 ·
1 点赞 ·
0 评论 ·
3 收藏

详解vue中使用echarts地图实现上钻下钻的可视化 三级下钻 省>市>县

简述功能概要最近有需求做一个数据可视化的功能 会具体显示全国各地区的买家分布情况鼠标放置在地图上会显示当前城市的分布人数 点击当前省份会下钻到城市地图 会显示当前省市下各个城市的买家数和分布情况如果遇到没有下一级再次点击会进行返回到国家地图(目前该示例图是两级下钻 省>区市 )(还可以实现点击按钮返回到上一级)右侧数据表会跟随城市的切换而进行动态切换(无视数据的准确性)准备工作首先需要所有城市地图的json文件和一个城市行政区域划代码的js文件(本文件请求使用)(如有需...
原创
发布博客 2020.09.03 ·
5303 阅读 ·
5 点赞 ·
40 评论 ·
23 收藏

Vue中 鼠标移入div和移出div 改变样式

<div style="border-radius:10px" @mouseover="mouseOver" :style="active" @mouseleave="mouseLeave"> </div>data(){ return{ active:""}}methods(){ mouseOver(){ //改变样式 this.active = 'background-color: rg.
原创
发布博客 2020.08.13 ·
4452 阅读 ·
1 点赞 ·
1 评论 ·
6 收藏

阿里图标 矢量图 iconfont 如何在vue中使用

首先进入阿里图标库https://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.4选择需要的图表 点击红色购物车按钮添加到自己的项目中 如没有 可以创建查看自己的图标库把当前的项目下载到本地电脑中获取到当前文件列表 把当前的文件电脑存储在 当前项目的文件中新建icon文件 把下载的项目内容存储进来在main.js中引入import'./assets/...
原创
发布博客 2020.08.12 ·
661 阅读 ·
0 点赞 ·
0 评论 ·
1 收藏

vue中 element 单选多选功能的实现

单选html因为当前的选项数据是通过for循环遍历出来的 所以当前的每一个checkbox也是通过循环遍历得出所以当双向绑定数据的时候就会遇到问题发起请求获取到当前选项的json数据对数据进行map遍历添加新的属性 isSelected 并且为 false(map为对数组进行遍历 并改变原数组)对单选按钮双向绑定的时候就可以绑定到 当前item下的isSelected多选按钮 定义一个变量双向绑定到多选按钮 通过change事件...
原创
发布博客 2020.08.12 ·
1636 阅读 ·
1 点赞 ·
0 评论 ·
1 收藏

vue中使用Echarts自定义折线图+粒度选项+自定义legend

大家好,今天所分享的案例是在vue中使用echarts自定义折线图(复杂点是通过点击勾选单个选项卡显示对应的折线图,通过切换粒度,可以拆分为日粒度,周粒度,月粒度,x轴时间轴也做对应的变化)本案例主要涉及到通过日期选择器选择对应的时间段 通过选项卡点击单选显示对应的x轴 通过粒度 可以切换不同的x轴 自定义legend 点击重置 重置选项卡以及图表 实现双y轴(一般数值和百分比轴) 本案例是一个完成的图表功能(附带代码)第一步使用echarts图表安装依赖...
原创
发布博客 2020.08.12 ·
5341 阅读 ·
12 点赞 ·
2 评论 ·
36 收藏

echarts图表自适应页面宽度

mounted() { this.getCharts(); this.conversionOption; // echarts的初始化进入页面 渲染图表 this.oderFormChart = this.$echarts.init(this.$refs.main); this.oderFormChart.setOption(this.oderFormOption, true); //自适应页面宽度 window.onresize = () =&g..
原创
发布博客 2020.08.11 ·
359 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

使用element table表格 表头如何添加icon和tootip hover提示框

<el-table-column prop="refundment" label="退款金额" show-overflow-tooltip :render-header="icons" align="center"></el-table-column>methods:{icons(h,{column}){ const inReview = '销售额占比=(成功销售积分根据设置比例换算相应的金额+成功销售金额)/所有商品总成功销售额' //.
原创
发布博客 2020.08.11 ·
1054 阅读 ·
0 点赞 ·
0 评论 ·
1 收藏

在vue中使用echarts图表 散点图

getCharts(){ var dataBJ = [ [1,55,9,56,0.46,18,6,"良"], [2,25,11,21,0.65,34,9,"优"], [3,56,7,63,0.3,14,5,"良"], [4,33,7,29,0.33,16,6,"优"], [5,42,24,44,0.76,40,16,"优"], [6,82,58,90,1.77,68,33,"良"], [7,74,49,77,1.46,48,27,"良"],.
原创
发布博客 2020.08.10 ·
2782 阅读 ·
0 点赞 ·
1 评论 ·
6 收藏

vue 获取url动态地址生成二维码

首先 安装npm install qrcode2 --save在当页面引入 mportQRCodefrom"qrcode2";在组件中定义 components:{QRCode,}, <div id="qrcode" ref="qrcode"></div><el-input @blur="showQrcode" v-model="configForm.qrcodeUrl" style=" width:200px"><...
原创
发布博客 2020.08.09 ·
2342 阅读 ·
0 点赞 ·
2 评论 ·
0 收藏

el-upload 上传图片限制图片尺寸效验

beforeThumbnailsUpload(file) { const isSize = new Promise(function(resolve, reject) { let width = 658; let height = 1050; let _URL = window.URL || window.webkitURL; let img = new Image(); img.onload = ..
原创
发布博客 2020.08.09 ·
2288 阅读 ·
0 点赞 ·
0 评论 ·
7 收藏

js 点击事件修饰符 阻止向下向上冒泡

1.阻止向下冒泡<div class="content" @click.self="cancelFunc"></div>2.阻止向上冒泡<div class="item" @click.stop="function">
原创
发布博客 2020.08.07 ·
2319 阅读 ·
2 点赞 ·
0 评论 ·
0 收藏

js 限制input输入框只能输入数字

限制input只能输入数字 输入其他内容会被退格<el-input v-model="formData.mobilephone" style="width: 265px;" @keyup.native="number" maxlength="11" show-word-limit></el-input>number(){      this.formData.mobilephone=this.formData.mobilephone.replace(/[^\.\d]/
原创
发布博客 2020.08.07 ·
263 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

Angular — AppModule 模块具体介绍

具体 app.module.ts中到底有什么呢?import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';​import { AppRoutingModule } from './app-routing.module';import { AppCom...
原创
发布博客 2019.12.26 ·
1129 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

angular+NG-ZORRO中Upload上传控件的爬坑使用

想要了解Upload更多请看这里 >https://ng.ant.design/components/upload/zh本文为angular小白的爬坑日记今天要实现upload上传图片的功能 然鹅 一个一个坑首先先贴上ng-zorro官方文档的实例一级代码实例首先实现的功能为上图下为官方实例代码import { Component } from '@angular/core';...
原创
发布博客 2019.11.13 ·
4456 阅读 ·
1 点赞 ·
0 评论 ·
2 收藏
加载更多