document_write的博客

原创 echarts map地图默认显示高亮和tooltip

// 基于准备好的dom，初始化echarts实例 let myChart = echarts.init(document.getElementById('mapEcharts')) // 绘制图表 myChart.setOption(this.getOptions) // 默认高亮 myChart.dispatchAction({ type: 'geoSelect', name:'山西'...

原创 前端电子时钟字体引入

第一步：下载字体包；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:

原创 echarts报错 TypeError: Cannot read property ‘linearGradient‘ of undefined

如果在5.0版本报以上错误，原因是因为graphic对象下没有LinearGradient方法，可以通过降低版本解决npm install echarts@4.8.0 --save

原创 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

原创 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">.

原创 uniapp中引入组件onload不执行

引入组件之后发现onload函数不执行，查了好久才发现组件里面并没有onlaod函数，所以替代为mounted就可以顺利执行了

原创 文字颜色渐变效果

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;}效果图

原创 简单选项卡

<template> <view class="complaintList"> <!-- 选项卡标题 --> <view class="handleTitle"> <view v-for="(item,index) in handleTitle" :key="index" @click="choiceTit(index)"> <view class="titletext">{{item}}</v

原创 uniapp的switch更改大小以及颜色

原创 uniapp获取手机屏幕高度

一、方法//获取屏幕可视区域高度 onReady() { uni.getSystemInfo({ success: function (res) { console.log(res.windowHeight) } }) },二、res中的数据

原创 uniapp获取元素滚动到指定位置

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

原创 element-ui的级联选择器根据后台给的value值给定默认值

一.页面代码 <el-cascader :options="item.dataValue.data" :props="{checkStrictly: true}" :show-all-levels="false" :value="getCascaderList(item.dataValue.data , ...

转载 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?...

原创 vue登录界面获取input框焦点以及回车响应逻辑

// 回车键自动登录 created: function() { const that = this document.onkeypress = function(e) { var keycode = document.all ? event.keyCode : e.which if (keycode === 13) { ...

原创 js字符串截取前几位或者后几位的方法

1.截取前五位var string=‘除了春天爱情和樱花’;var newstring= string.substring(0,5);console.log(newstring); // 除了春天爱2.截取后五位var string=‘除了春天爱情和樱花’;var stringlength = string.lengthvar newstring= string.substrin...

原创 三目运算符进行多个条件判断的写法

第一层判断完成后，不符合条件继续第二层判断，以此类推。 <div class="ticket" :class="item.id==1?'id1':(item.id==2?'id2':(item.id==3?'id3':''))"></div>

原创 vue中的事件加判断条件进行选择性点击

@click="(items.length>1)?choose(items):''"

原创 微信小程序中view绑定点击事件跳转页面传值，但是点击view中的子元素触发了事件却不传值

出现这个问题很有可能是你没有将e.target 和 e.currentTarget 区分开来；问题原理：（主要用于页面传值）1、如果绑定的事件所在元素没有子元素，用e.target和e.currentTarget的结果是一样的；2、如果事件绑定在父元素中，而且这个父元素有子元素，用e.target时，点击父元素所在区域没有错误，但是点击子元素区域，事件触发了，但是你会发现值并没有传过去，原...

原创 子盒子设置margin值时影响父盒子的解决方法

方法一：为父元素设置border方法二：为父元素添加overflow：hidden；样式方法三：为父元素或者子元素声明浮动方法四：为父元素或者子元素声明绝对定位...

原创 微信小程序返回上一页并且传值

通过wx.navigateBack返回，但这个方法不能直接传递参数，通过直接修改上一页data中的某一个值来达到传递参数的效果 let pages = getCurrentPages(); //获取所有页面 let currentPage = null; //当前页面 let prevPage = null; /上一个页面 if (pages.le...

原创 微信小程序获取Input框内的值，将多条数据存储在json中

一.wxml<view class="content"> <view class="adresss"> <view class="row"> <view class="sign">姓名</view> <input placeholder="收货人姓名" bindinput=...

原创 微信小程序实现省市区三级地址选择 picker

一.wxml <view class="section"> <picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}"> <view class="picker"&...

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

原创 vue中利用星星表示电影评分

我主要是动态绑定星星的宽度来进行操作，<template> <div class="rank"> <div class="star"> <div class="greyStar" :style="{width:width + 'px'}"></div> <div class="lightStar...

原创 vue中引入城市选择器三级联动

安装 v-distpicker<template> <VDistpicker @selected="proviceAddress"></VDistpicker></template><script> import VDistpicker from 'v-distpicker' export def...

原创 vue登录具体实例的正则验证

引入了jquery和elementUi<template> <div class="mask"> <div class="register"> <div class="back" @click="back"> </div> <div class...

原创 vue竖向轮播评论语句

需要安装 “vue-awesome-swiper”<template> <swiper :options="swiperOption" ref="mySwiper"> <!-- 这部分放你要渲染的那些内容 --> <swiper-slide > <div class="swiperCon"&g...

原创 将导航栏的一整张背景图片用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...

转载 微信小程序实现滑动选项卡

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

原创 微信小程序选项卡的实现方法

一 wxml<view class="content"> <view class="menu"> <text class='menuTitle {{ind=="0"?"borders":""}}' data-index="0" catchtap="title">第一项</text> <text cl...

原创 vue移动端导航栏滑块字体点击变色

<template> <div class="NAV"> <div id="NavSlide"> <div class="nav"> <p v-for="(item,index) in List" :key="index" :class="num==index?'changeColor':...

原创 vue中tabbar导航栏如何去掉

在vue项目中，不管我们跳到哪个页面，tabbar导航一直都在，但是有些时候我们的子页面是不需要tabbar导航的，所以这个时候我们就需要去掉这个tabbar导航了。在router的index.js中使用路由的钩子函数来解决。router.beforeEach((to, from, next)=>{ if(to.path.startsWith('/sosuo')||to.path.s...

原创 在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-...

原创 vue中动态绑定背景图片图片，背景颜色

:style="{'background-image' : 'url(' + item.img + ')'}"

原创 简易竖向滑块，隐藏滚动条

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>简易竖向滑块，隐藏滚动条</title></head><style type="text/css"> .container { width:60p...

原创 vue中实时获取滚动条距上高度

export default { name: 'App', data(){ return { scroll:'' } }, mounted(){ window.addEventListener('scroll', this.scrollTop) }, methods:{ scrollTop(){ this.scroll...

原创 文本溢出后隐藏转成省略号

1.文本在一行内显示，溢出后自动转成省略号。white-space:nowrap ; (文本在一行内显示)overflow:hidden ; (溢出部分隐藏)text-overflow:ellipsis; (溢出部分转成省略号)2.文本在多行内显示，溢出后隐藏自动转为省略号。overflow:hidden ; (溢出部分隐藏)text-overflow:ellipsis; ...

原创 常用正则表达式

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开头，第...

原创 原生js拖拽事件

实现思路：拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素。鼠标的移动也就是x、y坐标的变化;元素的移动就是style.position的 top和left的改变。这时需要三个事件。1.onmousedown 鼠标按下事件；2,onmousemove 鼠标移动事件；3.onmouseup 鼠标抬起事件；具体代码<!DOCTYPE html><html lang=...