- 博客(45)
- 收藏
- 关注
原创 echarts map地图默认显示高亮和tooltip
// 基于准备好的dom,初始化echarts实例 let myChart = echarts.init(document.getElementById('mapEcharts')) // 绘制图表 myChart.setOption(this.getOptions) // 默认高亮 myChart.dispatchAction({ type: 'geoSelect', name:'山西'...
2021-04-12 10:33:27
3256
原创 前端电子时钟字体引入
第一步:下载字体包;https://www.dafont.com/theme.php?cat=302&psize=s&text=12.56%25在这个网站里可以选择符合你要求的字体包第二步:引入;@font-face{ font-family: '随便起一个喜欢的字体名称'; src:url('~@/style/font/字体名称.TTF');}第三步:使用;.orderDataNum{ font-size: 27px; font-family:
2021-02-18 17:52:22
1185
2
原创 echarts报错 TypeError: Cannot read property ‘linearGradient‘ of undefined
如果在5.0版本报以上错误,原因是因为graphic对象下没有LinearGradient方法,可以通过降低版本解决npm install echarts@4.8.0 --save
2021-01-13 17:06:35
2076
原创 vue px转化vw的方法
第一步:安装(autoprefixer要指定版本,不然会报错)npm i postcss-loader autoprefixer@8.0.0 第二步:在根目录下建js文件 postcss.config.jsconst autoprefixer = require('autoprefixer')const pxtoviewport = require('postcss-px-to-viewport')module.exports = { plugins: [ autop
2021-01-11 08:41:57
1707
3
原创 uniapp的progress进度条组件添加文字
<template> <view class="touristPage"> <!-- 来源区域统计 --> <view class="content"> <view class="progressBox" ref="progressBox"> <view class="progressItem" v-for="(item,index) in progressBox" :key="index">.
2020-12-05 17:43:28
2791
2
原创 uniapp中引入组件onload不执行
引入组件之后发现onload函数不执行,查了好久才发现组件里面并没有onlaod函数,所以替代为mounted就可以顺利执行了
2020-11-20 16:33:20
3322
1
原创 文字颜色渐变效果
css部分.newsTitle>.hotText{ font-size: 30upx; color: #0E0E0F; font-weight: bold; background: linear-gradient(9deg, #FA1C24 0%, #FFCC33 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}效果图
2020-10-27 11:36:49
182
1
原创 简单选项卡
<template> <view class="complaintList"> <!-- 选项卡标题 --> <view class="handleTitle"> <view v-for="(item,index) in handleTitle" :key="index" @click="choiceTit(index)"> <view class="titletext">{{item}}</v
2020-10-02 11:01:46
179
原创 uniapp获取手机屏幕高度
一、方法//获取屏幕可视区域高度 onReady() { uni.getSystemInfo({ success: function (res) { console.log(res.windowHeight) } }) },二、res中的数据
2020-08-10 11:33:45
4094
1
原创 element-ui的table中点击选中符合条件的checkbox
// 标记未读事件 unread() { // arr中的数据是未读消息 let arr = [] for (let i = 0; i < this.tableData.length; i++) { if (this.tableData[i].infosattus === '1') { arr.push(thi...
2019-10-30 19:47:38
1098
原创 element-ui的级联选择器根据后台给的value值给定默认值
一.页面代码 <el-cascader :options="item.dataValue.data" :props="{checkStrictly: true}" :show-all-levels="false" :value="getCascaderList(item.dataValue.data , ...
2019-10-30 19:14:10
1320
转载 js获取当前url路径
原博文链接:https://www.cnblogs.com/cang12138/p/7677239.html假设当前页完整地址是:http://localhost:61768/Home/Index?id=2&age=18//获取当前窗口的Urlvar url = window.location.href;//结果:http://localhost:61768/Home/Index?...
2019-10-30 16:33:34
1035
原创 vue登录界面获取input框焦点以及回车响应逻辑
// 回车键自动登录 created: function() { const that = this document.onkeypress = function(e) { var keycode = document.all ? event.keyCode : e.which if (keycode === 13) { ...
2019-10-30 16:17:47
856
原创 js字符串截取前几位或者后几位的方法
1.截取前五位var string=‘除了春天爱情和樱花’;var newstring= string.substring(0,5);console.log(newstring); // 除了春天爱2.截取后五位var string=‘除了春天爱情和樱花’;var stringlength = string.lengthvar newstring= string.substrin...
2019-10-30 16:05:36
59239
原创 三目运算符进行多个条件判断的写法
第一层判断完成后,不符合条件继续第二层判断,以此类推。 <div class="ticket" :class="item.id==1?'id1':(item.id==2?'id2':(item.id==3?'id3':''))"></div>
2019-08-24 20:20:32
9854
1
原创 微信小程序中view绑定点击事件跳转页面传值,但是点击view中的子元素触发了事件却不传值
出现这个问题很有可能是你没有将e.target 和 e.currentTarget 区分开来;问题原理:(主要用于页面传值)1、如果绑定的事件所在元素没有子元素,用e.target和e.currentTarget的结果是一样的;2、如果事件绑定在父元素中,而且这个父元素有子元素,用e.target时,点击父元素所在区域没有错误,但是点击子元素区域,事件触发了,但是你会发现值并没有传过去,原...
2019-08-21 15:21:06
6702
5
原创 子盒子设置margin值时影响父盒子的解决方法
方法一:为父元素设置border方法二:为父元素添加overflow:hidden;样式方法三:为父元素或者子元素声明浮动方法四:为父元素或者子元素声明绝对定位...
2019-08-17 21:00:39
1094
2
原创 微信小程序返回上一页并且传值
通过wx.navigateBack返回,但这个方法不能直接传递参数,通过直接修改上一页data中的某一个值来达到传递参数的效果 let pages = getCurrentPages(); //获取所有页面 let currentPage = null; //当前页面 let prevPage = null; /上一个页面 if (pages.le...
2019-08-16 14:53:42
2710
3
原创 微信小程序获取Input框内的值,将多条数据存储在json中
一.wxml<view class="content"> <view class="adresss"> <view class="row"> <view class="sign">姓名</view> <input placeholder="收货人姓名" bindinput=...
2019-08-15 15:19:14
2566
1
原创 微信小程序实现省市区三级地址选择 picker
一.wxml <view class="section"> <picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}"> <view class="picker"&...
2019-08-15 11:29:23
3269
原创 vue引入Swiper,背景颜色与轮播图片一致,更改前进后退按钮以及分页器样式,
一. 安装swiper(我的swiper版本是"^4.5.0",)npm install swiper --save二.局部引入import Swiper from “swiper”;import ‘swiper/dist/css/swiper.min.css’;三.具体代码如下<template> <div class="content" ref="bgColo...
2019-08-12 21:44:34
2263
原创 vue中利用星星表示电影评分
我主要是动态绑定星星的宽度来进行操作,<template> <div class="rank"> <div class="star"> <div class="greyStar" :style="{width:width + 'px'}"></div> <div class="lightStar...
2019-08-11 22:07:33
430
原创 vue中引入城市选择器三级联动
安装 v-distpicker<template> <VDistpicker @selected="proviceAddress"></VDistpicker></template><script> import VDistpicker from 'v-distpicker' export def...
2019-08-11 21:52:43
1025
原创 vue登录具体实例的正则验证
引入了jquery和elementUi<template> <div class="mask"> <div class="register"> <div class="back" @click="back"> </div> <div class...
2019-08-11 20:45:46
2212
原创 vue竖向轮播评论语句
需要安装 “vue-awesome-swiper”<template> <swiper :options="swiperOption" ref="mySwiper"> <!-- 这部分放你要渲染的那些内容 --> <swiper-slide > <div class="swiperCon"&g...
2019-08-11 20:22:45
660
原创 将导航栏的一整张背景图片用css分成不同部分
<template> <div class="content" ref="bgColor"> <div class="box"> <div class="list"> <div class="List" v-for="(item,index) in list"><div class="lis...
2019-08-11 19:42:41
612
转载 微信小程序实现滑动选项卡
一wxml<view class="swiper-tab"> <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">一</view> <view class="swiper-tab-item {{current...
2019-08-10 22:57:05
697
原创 微信小程序选项卡的实现方法
一 wxml<view class="content"> <view class="menu"> <text class='menuTitle {{ind=="0"?"borders":""}}' data-index="0" catchtap="title">第一项</text> <text cl...
2019-08-10 22:18:47
749
原创 vue移动端导航栏滑块字体点击变色
<template> <div class="NAV"> <div id="NavSlide"> <div class="nav"> <p v-for="(item,index) in List" :key="index" :class="num==index?'changeColor':...
2019-07-20 13:13:57
1670
原创 vue中tabbar导航栏如何去掉
在vue项目中,不管我们跳到哪个页面,tabbar导航一直都在,但是有些时候我们的子页面是不需要tabbar导航的,所以这个时候我们就需要去掉这个tabbar导航了。在router的index.js中使用路由的钩子函数来解决。router.beforeEach((to, from, next)=>{ if(to.path.startsWith('/sosuo')||to.path.s...
2019-07-20 12:00:59
1447
原创 在vue中利用mint-ui实现tabbar的切换,点击切换颜色
一:安装mint-ui,并且在main.js中引入minu-ui以及样式import Mint from 'mint-ui'import 'mint-ui/lib/style.css'Vue.use(Mint);二:在components中新建tabbar页面,需要几个新建几个;并且设置好路由;import Vue from 'vue'import Router from 'vue-...
2019-07-20 11:50:52
1520
原创 vue中动态绑定背景图片图片,背景颜色
:style="{'background-image' : 'url(' + item.img + ')'}"
2019-07-20 11:17:43
7047
原创 简易竖向滑块,隐藏滚动条
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>简易竖向滑块,隐藏滚动条</title></head><style type="text/css"> .container { width:60p...
2019-07-20 11:11:09
424
原创 vue中实时获取滚动条距上高度
export default { name: 'App', data(){ return { scroll:'' } }, mounted(){ window.addEventListener('scroll', this.scrollTop) }, methods:{ scrollTop(){ this.scroll...
2019-07-19 21:18:31
3586
1
原创 文本溢出后隐藏转成省略号
1.文本在一行内显示,溢出后自动转成省略号。white-space:nowrap ; (文本在一行内显示)overflow:hidden ; (溢出部分隐藏)text-overflow:ellipsis; (溢出部分转成省略号)2.文本在多行内显示,溢出后隐藏自动转为省略号。overflow:hidden ; (溢出部分隐藏)text-overflow:ellipsis; ...
2019-06-06 15:52:37
213
原创 常用正则表达式
1.验证用户名 /^[a-zA-Z0-9_-]{4,16}$/ 4到16位(字母,数字,下划线,减号)2.验证真实姓名/^[\u4e00-\u9fa5]{2,4}$/;3.验证密码/^(\w){6,20}$/ 密码可以输入6-20个字母、数字、下划线,不区分大小写。4.验证手机号码 /^1[34578][0-9]{9}$/ 手机号码以1开头,第...
2019-06-06 15:07:57
303
原创 原生js拖拽事件
实现思路:拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素。鼠标的移动也就是x、y坐标的变化;元素的移动就是style.position的 top和left的改变。这时需要三个事件。1.onmousedown 鼠标按下事件;2,onmousemove 鼠标移动事件;3.onmouseup 鼠标抬起事件;具体代码<!DOCTYPE html><html lang=...
2019-04-29 19:21:55
661
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人