- 博客(19)
- 收藏
- 关注
RSS订阅原创 Vue扭蛋机营销小游戏
最近有一个需求做一个营销类型小游戏所以做了一个扭蛋机类型的小游戏出来大体逻辑：点击按钮=》播放音乐、扭蛋机内部球滚动=》弹出球=》音乐停止、显示中奖信息如图所示h5或小程序主要是通过后台页面进行配置游戏规则以及背景图片、扭蛋图片、按钮、出口图片、顶部标题图片，以及可以配置按钮和出口以及顶部标题位置，更大的进行可配置，满足更多节日场景的使用，只需要上传自己想要的样式进行搭配即可图示该功能主要的逻辑就是后台通过配置对应的按钮显示的位置 前台显示对应的位置当前后台使用的是元素的拖拽获取当前元素
2021-09-06 16:53:37
1938
1
原创 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 15:32:43
644
原创 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 14:51:14
630
1
原创 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 12:02:50
696
5
原创 在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 17:00:55
1337
原创 详解vue中使用echarts地图实现上钻下钻的可视化 三级下钻 省＞市＞县
简述功能概要最近有需求做一个数据可视化的功能 会具体显示全国各地区的买家分布情况鼠标放置在地图上会显示当前城市的分布人数 点击当前省份会下钻到城市地图 会显示当前省市下各个城市的买家数和分布情况如果遇到没有下一级再次点击会进行返回到国家地图(目前该示例图是两级下钻 省>区市 )(还可以实现点击按钮返回到上一级)右侧数据表会跟随城市的切换而进行动态切换(无视数据的准确性)准备工作首先需要所有城市地图的json文件和一个城市行政区域划代码的js文件(本文件请求使用)(如有需...
2020-09-03 16:39:50
5092
40
原创 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 15:09:11
4287
1
原创 阿里图标 矢量图 iconfont 如何在vue中使用
首先进入阿里图标库https://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.4选择需要的图表 点击红色购物车按钮添加到自己的项目中 如没有 可以创建查看自己的图标库把当前的项目下载到本地电脑中获取到当前文件列表 把当前的文件电脑存储在 当前项目的文件中新建icon文件 把下载的项目内容存储进来在main.js中引入import'./assets/...
2020-08-12 16:01:32
585
原创 vue中 element 单选多选功能的实现
单选html因为当前的选项数据是通过for循环遍历出来的 所以当前的每一个checkbox也是通过循环遍历得出所以当双向绑定数据的时候就会遇到问题发起请求获取到当前选项的json数据对数据进行map遍历添加新的属性 isSelected 并且为 false(map为对数组进行遍历 并改变原数组)对单选按钮双向绑定的时候就可以绑定到 当前item下的isSelected多选按钮 定义一个变量双向绑定到多选按钮 通过change事件...
2020-08-12 15:45:21
1591
原创 vue中使用Echarts自定义折线图+粒度选项+自定义legend
大家好,今天所分享的案例是在vue中使用echarts自定义折线图(复杂点是通过点击勾选单个选项卡显示对应的折线图,通过切换粒度,可以拆分为日粒度,周粒度,月粒度,x轴时间轴也做对应的变化)本案例主要涉及到通过日期选择器选择对应的时间段 通过选项卡点击单选显示对应的x轴 通过粒度 可以切换不同的x轴 自定义legend 点击重置 重置选项卡以及图表 实现双y轴(一般数值和百分比轴) 本案例是一个完成的图表功能(附带代码)第一步使用echarts图表安装依赖...
2020-08-12 15:17:20
5156
2
原创 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 17:41:07
342
原创 使用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 10:01:04
1007
原创 在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 17:24:07
2605
1
原创 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 18:28:12
2299
2
原创 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 17:40:25
2231
原创 js 点击事件修饰符 阻止向下向上冒泡
1.阻止向下冒泡<div class="content" @click.self="cancelFunc"></div>2.阻止向上冒泡<div class="item" @click.stop="function">
2020-08-07 11:38:37
2244
原创 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 11:36:47
231
原创 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 14:03:51
1081
原创 angular+NG-ZORRO中Upload上传控件的爬坑使用
想要了解Upload更多请看这里 >https://ng.ant.design/components/upload/zh本文为angular小白的爬坑日记今天要实现upload上传图片的功能 然鹅 一个一个坑首先先贴上ng-zorro官方文档的实例一级代码实例首先实现的功能为上图下为官方实例代码import { Component } from '@angular/core';...
2019-11-13 23:38:19
4305
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人