自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(358)
  • 资源 (1)
  • 论坛 (2)
  • 收藏
  • 关注

原创 vue项目单位适配

main.js中引入rem.jsimport '/src/rem.js'rem.js// 设置 rem 函数const setRem = () => { // 获取html的Dom元素 let htmlDom = document.getElementsByTagName('html')[0] let designWidth = 750 // 默认设计稿尺寸为750px,如果设计师提供设计稿为别的尺寸,则替换相应尺寸 htmlDom.style.fontSize =

2021-09-09 11:48:48 14

原创 vue项目搜索组件

所有的搜索条件,以数据的形式传入组件,最终返回需要的数据。代码<template> <div> <div @click="searchClick">展示搜索组件</div> <Filtrate :isShowFilter="showPopup" :isShowOverlay="isShowOverlay" :list="searchCondition" @confirmFn="confirmFilter" @ov..

2021-09-09 11:43:09 18

原创 vue项目中Echarts两个图表之间连接两条线

效果图 完整代码在最下面基本效果是,左侧默认显示最大占比的区域,旋转到右侧,同时两条线的起点是左侧扇形区域上下两点,两条线的终点是右侧扇形的上下两点。实现思路,两条线是div定位实现的,这里利用了css的属性transform-origin 设置基准点两条线都是设置右侧为基准点,同时设置了旋转transform: rotate(0deg);最终只需要更改偏移角度,就可以实现线条的移动。这里需要注意因为线条是根据左侧扇形区域的占比大小不同而移动,所以线条的宽度...

2021-08-05 15:35:26 121

原创 JS中字符串每隔5个添加一个字符

最终效果var txtString = "111112222233333444445555566666";var result = "";for(var i=0,len=txtString.length;i<len;i++){ if(i % 5 === 0) result += '/n'; result += txtString[i];}console.log("结果", result)i % 5 指的是i除以5之后的余数,比如i=3,i%5=3; i=10, ..

2021-08-04 10:00:07 16

原创 vue中Echarts地图组件+城市json文件

效果图完整代码<template> <div id="app"> <div class="chart_content"> <tab1 ref="tab1"></tab1> </div> </div></template><script> import tab1 from './components/chart/tab1.vue' export defaul.

2021-08-03 16:15:13 119

原创 Echarts扇形图点击切换角度+右侧阴影区域和角度对齐

最终效果图 完整代码在最下面主要效果实现是中间阴影区域,随着左侧扇形图当前选中区域的角度变化随之变化。这里简单说下思路,主要是计算扇形区域两点之间的高度,因为右侧的地区高度是固定的,就是秦皇岛,张家界那一列高度,中间阴影部分的实现,是定位了一个长方形,上下有两个直角三角形,背景是白色,为了画出最终的两个三角形,所以要计算两个三角形的高。因为这里牵扯到定位,所以左侧的扇形图和长方形都是固定宽高,扇形图是固定宽高,所以半径也可以直接拿到,这里计算时需要用到两个公式,sinA(...

2021-08-02 17:22:47 42

原创 echarts图表legend整齐排列

效果图完整代码<template> <div id="app"> <div class="chart_content"> <chartEight :legendAll="legendAll" :xAxis="four_xAxis_data" :series="seven_series_data"></chartEight> </div> </div>&l.

2021-07-30 16:59:21 79

原创 Vue项目中折线图圆滑显示,X轴加滚动条dataZoom

效果图这里需要注意的是,我的项目中Echarts版本是4.6。5.0的版本这里X轴滚动条样式会有所不同"echarts": "^4.6.0",完整代码<template> <div id="app"> <div class="chart_content"> <div>折线图--圆滑--X轴加滚动条</div> <chartSeven :legendone="four_legend_data_one" .

2021-07-29 17:23:29 56

原创 Vue中Echarts扇形图legend实现文字百分比整齐排列

效果图主要实现两个功能,左侧文字后增加百分比,环形图中间,默认显示文字及百分比,鼠标滑过切换。完整代码<template> <div id="app"> <div class="chart_content"> <div>环形图</div> <chartThree :data="chart_two_data" :legend="legendData" @loadedChar

2021-07-29 15:29:29 207

原创 Echarts中legend翻页自定义箭头

官网示例中的效果是最终需要的效果是legend:{ type: "scroll", orient: "vertical", pageIcons: { vertical: [ "path://M472.064 272.448l-399.232 399.232c-22.08 22.08-22....

2021-07-29 09:59:48 53

原创 iView-Table合并,防止串行

串行的效果合并后的效果<template> <Table :columns="columns14" :data="data5" border :span-method="handleSpan" class="tableclass"></Table></template><script> export default { name: "tableone"..

2021-07-12 17:26:11 14

原创 Vue中echarts扇形图默认高亮并显示提示框

效果图代码<template> <div class="chart" v-resize="resizeCharts" ref="barChart"></div></template><script> import * as echarts from "echarts"; export default { name: "barChart", props: { data: {

2021-07-12 15:50:18 73

原创 vue-countup-v2(npm)数字滚动插件

vue-countup-v2:https://github.com/xlsdg/vue-countup-v2安装npm install --save countup.js vue-countup-v2<ICountUp :start="0" :endVal="value" :delay="delay" :options="countUpOption" />data() { return { countUpOption: { useEasing: tr.

2021-07-09 13:40:30 88

原创 Vue中封装的echarts组件

先上效果图最近做的项目中图表用到很多,所以简单记录下,目录结构很简单这里的resize.js是大佬写的一个监听窗口缩放的的事件,index.js是全局注册的v-resize 自定义指令,在每个组件中都使用到了。resize.js// 按钮权限判断指令const resize = { inserted: (el, binding, vNode) => { // 指令的绑定值,是一个function函数 .

2021-07-09 09:50:43 92 1

转载 Vue中引入echarts

第一步:通过npm安装echarts依赖包npm install echarts --save第二步:在js中引用import * as echarts from 'echarts';

2021-07-09 09:21:29 24

原创 vue promise封装axios

requseimport Axios from 'axios'// 创建一个axios对象const instance = Axios.create({ baseURL: ' https://xxx.xxx.com', timeout: 5000})// 请求拦截// 所有的网络请求先走这个方法 网络请求发起之前 instance.interceptors.request.use( function(config) { // config.headers.tok...

2021-06-19 15:39:04 22

原创 element ui Cascader联级选择器 获取label的值

主要用到官网的方法:getCheckedNodes<div class="address_management_two_two flex"> <span class="demonstration name_wid_left">省市区:</span> <el-cascader v-model="value" :options="options" ref="cascaderAddr" :props="{value:'v',label:'n',chi..

2021-05-27 13:31:08 51

转载 html引入element ui 后,element-icons.woff 和 element-icons.ttf文件找不到

html文件引入element ui后,报错 element.js:1 GET file:///D:/llz/test-8-17/css/fonts/element-icons.woff net::ERR_FILE_NOT_FOUND element-icons.woff 和 element-icons.ttf文件找不到只要在对应文件夹里引入这两个文件即可:点击下载引入:转载地址:https://blog.csdn.net/bigbigpigsobig/article/details/

2021-05-26 09:29:47 378

转载 axios请求中添加token,Authorization中添加token

axios({ method: 'get', url: url, responseType: 'blob', headers: { 'Authorization': 'Bearer ' + getToken() } }).then(res => { console.log(res) })转载地址:https://blog.csdn.net/weixin_44994731/article/details/104472894

2021-05-26 09:26:11 127

转载 vue项目中原生input上传图片

<input type="file" class="upload" @change="addImg" ref="inputer" accept="image/png,image/jpeg,image/gif,image/jpg" />addImg(e){ console.log(e) let file = e.target.files[0]; console.log(file) this.uploadImg(file)},//上传图片uploadImg(img) { v...

2021-05-26 09:23:36 24

转载 elementUI table多选 设置默认勾选

<el-table ref="multipleTableClinicRoom" :data="tableData" stripe border v-loading="tableLoading" highlight-current-row @row-click="handleCurrentChange" :cell-class-name="getCellIndex" class="clinic-area-table-are...

2021-05-26 09:21:43 385

转载 vue绑定数据,渲染页面时会出现变量闪烁

在使用vue绑定数据的时候,渲染页面时会出现变量闪烁,例如<div class="#app"> <p>{{value.name}}</p></div>在加载的时候会看到{{value.name}}原因:由于JavaScript去操作DOM,都会等待DOM加载完成(DOM ready)。对于vuejs、angularjs这些会在DOM ready完会才回去解析html view Template,所以对于Chrome这类快速的浏

2021-05-24 17:58:20 30

原创 vue.js 模拟input滑块验证效果

<div class="range_type_class"> <div class="range_type_class_txt">向右拖动滑块填充拼图</div> <input type="range" max="86" value="{{slider_value}}" v-model="slider_value" @input="slider_change" /> <div class="range_type_class_one" :st...

2021-05-22 17:40:20 43

原创 vue 配合mintUi实现省市区三级联动

最终效果这里有个问题需要提示下,MintUi的版本问题,我用的https://unpkg.com/mint-ui@2.2.13/lib/index.js 2.2.13版本滚动时有问题,而且重复打印,于是切换了版本,最后发现 2.2.9版本滚动正常,但是不知道为什么,页面其他picker受到了影响,所以最终只有地址这个界面使用了2.2.9版本,其他界面依旧使用2.2.13版本!文档地址:http://mint-ui.github.io/docs/#/zh-cn2/picker&l...

2021-05-08 16:55:16 57

原创 小程序左滑删除

主要用到了小程序的可移动的视图容器,在页面中可以拖拽滑动标签movable-view小程序文档:https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html <view class="course_cent"> <movable-area class="course_data" wx:for="{{dance_ary}}" wx:key="index"> ...

2021-04-27 16:44:45 15

原创 vue动画 右侧滑出层

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <meta name="flexible" content="initial-dpr=2" /...

2021-04-25 10:35:55 121

原创 jquery模拟时间选择器

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <meta name="flexible" content="initial-dpr=2" /...

2021-04-23 10:40:16 22

原创 jquery模拟picker滑动选择效果

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <style type...

2021-04-19 14:33:41 69 1

转载 thinkphp5.0安装composer安装topthink/think-captcha

cmd命令行窗口长时间没反应使用国内镜像打开命令行窗口(windows用户)或控制台(Linux、Mac 用户)并执行如下命令: composer config -g repo.packagist composer https://packagist.phpcomposer.com安装前请先安装composer,我的php是5.4,所以使用 composer require topthink/think-captcha=1.*重点!!!默认是3.0的,thinkphp6版本的

2021-04-15 10:02:05 68

转载 HTML5 video在安卓的微信上面播放时自动会全屏的问题

<video x5-playsinline="true" playsinline="true" webkit-playsinline="true" :poster="option.cover_pic_url ? option.cover_pic_url : $bigDefaultImg" v-if="option.content_file_url" controls="controls"> <source :src="option.content_file_url" .

2021-04-13 11:34:23 51

转载 手持弹幕(全屏文字滚动)

<!--pages/02-23/demo1/newDanMu.wxml--><view class="textBox" style="background-color:{{backgroundColor}}"> <view class='text' style="font-size: {{fontSize}}rpx; animation: animateText {{animateTime}}s infinite linear; color:{{fontColor}}".

2021-03-29 17:30:46 101

转载 微信小程序图片抖动

<view class='game_point_me {{isDoudong?"doudong":""}}' bindtap='pointMe'></view>@keyframes seconddiv{0% {transform: scale(1.4,1.4);}10% {transform: scale(1,1);}25% {transform: scale(1.2,1.2);}50% {transform: scale(1,1);}70% {transform:.

2021-03-29 10:05:53 180

转载 Meta标签:让360浏览器默认使用极速模式打开网页

使用wordpress的模板默认是不支持低版本IE的。现在360浏览器的装机量又那么大,,独独只有ie浏览器的访客越来越少,,为了让网站页面不那么臃肿,也懒的理IE了,同时兼顾更多的国内双核浏览器,在网页页头中添加了下面两行Meta控制标签。1,网页头部加入<meta name=”renderer” content=”webkit”>360浏览器就会在读取到这个标签后,立即切换对应的极速核。2,另外为了保险起见再加入<meta http-equiv=”X-UA-

2021-03-29 10:03:57 32

转载 微信小程序 switchTab跳转后新页面 onload 不触发的问题

wx.switchTab({ url: '../index/index', success: function (e) { var page = getCurrentPages().pop(); if (page == undefined || page == null) return; page.onLoad(); } })

2021-03-23 18:55:25 71

原创 vue项目使用electron打包桌面应用程序 exe

客户需求,要求vue做一个桌面应用,很久没碰vue了,这里简单记录下。我是用Hbulider X 创建的vue项目,electron打包vue项目为桌面应用。目录结构:打包之前需要简单创建几个vue界面,同时安装axios和router,让页面可以正常跑起来。main.jsimport Vue from 'vue';import App from './App.vue';import VueRouter from 'vue-router';import axios fro

2021-03-19 11:58:13 114

转载 php 平均/拆分数组array_chunk() 函数

<?php$cars=array("Volvo","BMW","Toyota","Honda","Mercedes","Opel");print_r(array_chunk($cars,2));?>定义和用法array_chunk() 函数把一个数组分割为新的数组块。语法array_chunk(array,size,preserve_keys);参数 描述 array 必需。规定要使用的数组。 size 必需。一个整数,规定每个新数..

2021-03-17 11:40:31 35

原创 thibkPhp5.0 volist渲染界面分类以及分类切换后的数据

分类渲染: {volist name="val4" id="vo"}<!-- 判断条件 git_id是当前页面的参数id 判断有没有id,没有id说明是第一次进来这个界面 用索引判断,索引0的标签默认选中--><!-- 如果有id 则判断当前页面的参数id和标签的id是否相同,相同的就显示选中状态--> <a {if condition="empty($get_id) & $k...

2021-03-16 16:44:36 21

转载 js复制文本内容到剪切板

<script type="text/javascript">function copyUrl2() { var Url2=document.getElementById("biao1").innerText; var oInput = document.createElement('input'); oInput.value = Url2; document.body.appendChild(oInput); .

2021-03-16 15:22:39 38

转载 js 数组、对象转json 以及json转 数组、对象

1、JS对象转JSON方式:JSON.stringify(obj)var json = {"name":"iphone","price":666}; //创建对象;var jsonStr = JSON.stringify(json); //转为JSON字符串console.log(jsonStr);2、JS数组转JSON//数组转json串var arr = [1,2,3, { a : 1 } ];JSON.stringify( arr );3、JS对象数组转

2021-03-15 13:27:22 232

转载 富文本编辑器ueditor——找不到ueditor.all.js以及ueditor.all.min.js文件

首先,下载ueditor官方下载地址:ueditor下载地址由于github下载速度太慢,我就选择clone到gitee上进行下载,速度M级,下载地址:ueditor下载地址注意:下载的ueditor源码并没有ueditor.all.js文件安装依赖在下载好的项目目录下执行 npm install 安装依赖,或者使用淘宝源 cnpm install 安装依赖,速度快很多(不过需要事先安装淘宝cnpm)执行 grunt default需要事先安装好 grunt,如果没有,可以执行以下命令

2021-03-12 14:04:01 701

省市区的模拟数据 city.js

后台返回的省市区数据,方便测试

2021-05-08

大神求助:CDN切换节点问题!!!

发表于 2017-04-14 最后回复 2017-07-11

未来点击事件代码重复执行

发表于 2017-03-29 最后回复 2017-03-30

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除