Bright2017的博客

【代码】正则判断Emoji表情和符号表情。

之前一直习惯使用templete、render渲染函数使用很少、这次算是简单的认识下、代码写的不好大佬们不要见怪！iView版本3.0、因为展开的样式不太符合预期、只能自定义。

visibilitychange事件是浏览器新添加的一个事件，当浏览器的某个标签页切换到后台，或从后台切换到前台时就会触发该消息，现在主流的浏览器都支持该消息了

需求：页面有一堆图表、需要滚动到图表时、再加载出来这个图表、思路：没找到合适的插件、只能自己手撸一个、直接放到混入里就行、主要就是判断元素距离底部的距离和可视区域内容的高度进行对比即可

场景：暂无数据组件中使用插槽接收、暂无数据这个组件在图表组件中应用、由最外层图表组件自定义插槽内容、最终传入暂无数据组件中。最外层图表组件使用：ComPie是图表组件 <ComPie :series="chart3.series"> <template slot="icon"> <div>自定义</div> &lt

效果描述：列表查询页、每页10条数据、滚动至底部加载更多数据、点击进入详情。再次返回列表查询页不希望从第一页重新查找、而是直接滚动到上次浏览的位置。实现思路：点击列表进入详情页时、记录当前点击的位置、将参数传入详情页、返回列表页时将参数再传递回来。列表页初次加载时判断是否存在上次记录的位置参数、存在表示有历史记录、直接请求数据、找到位置、然后调用 scrollIntoView() 方法滚动到指定位置。举例：我上一次点击了第180条数据、记录索引108、每页10条数据、所以当时记录的页码pag

一、预备知识Math.ceil(n); //向上取整。返回大于等于n的最小整数。Math.floor(n); //向下取整。返回为n的整数部分。Math.round(n); //四舍五入。返回为n四舍五入后的整数。Math.random(n); //0.0 ~ 1.0 之间的一个伪随机数。【包含0，不包含1】 //比如0.8647578968666494Math.ceil(Math.random()*10); //获取从1到10的随机整数，取0的概率极小。Ma...

可用于图片轮播、文字无缝滚动。官网地址：https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-default1、安装npm install vue-seamless-scroll --save2、用法<template> <vue-seamless-scroll :data="listData" class="se

开发文档：https://dafrok.github.io/vue-baidu-map/#/zh/start/installation效果图<template> <div class="mapCent"> <baidu-map class="map" :center="center" :zoom="zoom"> <bm-driving start="天安门" end="百度大厦" @searchcomplete="handleS..

效果图：Demo演示地址：https://www.makeapie.com/editor.html?c=xptea0dZY5完整代码：<template> <div> <polycyclicChart :series="polycyclicSeries"></polycyclicChart> </div></template>import polycyclicChart ..

先上效果图和链接演示Dome：https://www.makeapie.com/editor.html?c=xM-u9DKgR8<div class="dashboard"> <gaugeChart :data="dashValue"></gaugeChart> <div class="gaugeNum"> <div> <div>0</div> <div.

效果图柱状图和折线图，主要是以柱状图为底，在柱状图的基础上加入了折线图可自定义的参数：series：数据的数量 type 图表的类型 bar柱状图 line折线 数据有几个，界面展示几个xAxis：X轴数据unit：顶部单位barWidth：柱子的宽度colorLine：柱子和折线的颜色backLine：Y轴背景线条颜色dataZoomNum：大于这个数量，横向滚动条出现legendBottom：legend距离底部的位置完整代码...

效果如下：小汽车跟随路径移动svg在线编辑器，可以拿到svg图片中的path，替换代码中的path即可http://www.zuohaotu.com/svg/完整代码<template> <div class="demo"> <img src="../assets/car2.png" alt="..." class="box"> <svg width="1200" height="650" xmlns="h

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

最终效果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, ..

效果图完整代码<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.

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

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

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

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

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

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.

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

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

主要用到官网的方法：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..

<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...

<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...

<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...

之前在网上看到一个很不错的vue上传图片组件,下面是完整代码。插件链接：http://www.jq22.com/jquery-info15578 或者将文件拖到此处 选中{{imgList.le

最终效果这里有个问题需要提示下，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...

主要用到了小程序的可移动的视图容器，在页面中可以拖拽滑动标签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"> ...

<!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" /...

<!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" /...

<!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...

<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:.

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

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

效果是这样的、点击菜单后当前页面的菜单更换样式。因为菜单部分是公共引用部分，所以只能通过当前页面路径判断菜单的样式更换。思路是这样的、因为菜单栏部分是公共引入部分，所以新建一个Base.php、所有的控制器继承这个Base.php、然后再Base.php中的控制器初始化时、确认当前是哪一个页面。Base.php<?phpnamespace app\index\controller;use think\Controller;class Base extends

<div class="notice-container"> <div class="header-notice-marquee" id="notice-marquee"> <div class="header-marquee-item1 flex"> <div>111111111111111111111111111</div> <div>222222222222222222222222222<.

swiper一直都是比较喜欢的一个插件，不管是设计还是我自己，都习惯了默认的向左滑动。今天客户要求必须向右，找了半天，终于找到了相应的参数。direction只能设置Swiper的整体滑动方向，可设置为水平方向切换(horizontal)或垂直方向切换(vertical)。reverseDirection开启反向自动轮播。var mySwiper = new Swiper('.swiper-container',{ autoplay: { reverseDirectio