jxjianghailan的博客

原创 父子组件通信，父组件访问子组件详解

父子组件间通信通过props向子组件传递数据通过事件向父组件发送消息props基本用法：在组件中，使用选项props来声明需要从父级接收到的数据props的值有两种方式：字符串数组，数组中的字符串就是传递时的名称 对象，对象可以设置传递时的类型，也可以设置默认值等用一种方式接受数据：建两个页面，app.vue作为父页面，child.vue作为子页面，v-on绑定的属性名称childmovies与data中定义的movies名称可以不一样，也可以定义成一样的,属性chi

原创 利用echats饼图的各种样式

效果图：为 ECharts 准备一个具备大小（宽高）的 容器<div class="problem-span-echats"></div>.problem-span-echats { width: 100%; height: 100%; }初始化echats实例： var dom = document.getElementsByClassName("problem-span-echats")[0]; var...

原创 ::before (:before)在div上面加自定义图片

要求：利用::before (:before)展示自动以图片理解::before (:before)，并使用。参考文章（介绍很全）：https://developer.mozilla.org/zh-CN/docs/Web/CSS/::beforeCSS中，::before创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过content属性来为一个元素添加修饰性的内容。此元素默认为行内元素。注意:由::before和::after生成的伪元素包含在元素格式框内，因此不...

原创 u-view实现背景图片上面显示文字

实现如图功能：背景是张图片，文字在上面显示。.app_content_top { z-index: -1; position: absolute; top: 0; left: 0; width: 100%; height: 500rpx; }z-index=-1将图片放到最后面，文字就可以显示到图片上面。将文字的最外层view居中.app_content_medium { padding-top: 160rpx; text-align: ce

原创 微信公众号唤起微信支付

参考文档：https://blog.csdn.net/hahahhahahahha123456/article/details/82724549微信官方文档：使用uniapp写微信公众号，付款时唤起微信支付：如下：在data中注册：data() { return { can_pay: false } },onLoad: function(option) { // option为object类型，会序列化上个页面传递的参数

原创 使用u-view组件实现上拉加载

要求：用uniapp和u-view做一个上拉加载如图：u-view的官方文档：https://www.uviewui.com/components/loadMore.html我用到的有这些属性：在data中定义的数据： status: 'loadmore', iconType: 'flower', loadText: { loadmore: '轻轻上拉', loading: '努力加载中', nomor

原创 Uncaught TypeError: Cannot read property ‘length‘ of undefined at eval 报错解决

在用uniaapp写公众号页面上拉加载的时候遇到这个问题，如下图:会一直这样加载中，解决办法：在后面加一个.catch((e) => {})来接收错误信息就不再报了

原创 使用element-ui使用表格展示微信头像

要求：使用element-ui使用表格展示微信头像借鉴的原博：https://blog.csdn.net/qq_41588568/article/details/100196905效果图： <el-table-column label="微信头像" align="center" prop="avaterUrl"> <template slot-scope="scope"> <img :src="scope.row.avat

原创 uni-app实现手机号绑定

要求： 实现手机号绑定图形验证码和发送验证码。用了u-view的控件。<view class="app_container"> <u-form :model="form" ref="uForm" :rules="rules"> <view class="login-list flex border-all"> <view class="login-input"> <u-form-item label="手机号" la

原创 element-ui上传图片的详解

需求：element-ui实现上传头像。效果图：先查看element-ui上传图片的示例：https://element.eleme.cn/#/zh-CN/component/upload<el-form :model="form" :rules="rules" ref="form" label-width="100px"> <div class="deviceinfo-box"> <div class="devicein

原创 element-ui表格选中行高亮的效果

子页面操作对父页面有影响时，操作完子页面，父页面定位到选中行的状态效果图：使用到了官方的方法：在子页面点击“保存”或者“确定”按钮之后刷新父页面，传递参数：this.$parent.getList(true);在父页面方法中添加函数：stCurrentRow(row) { this.$nextTick(function() { this.$refs.monthlyPlanTable.setCurrentRow(row); }) },.

原创 elementui点击确认之后添加确认框

要求：新增数据点击确认之后需要做一个确认框，点击确认以后才能提交数据。用到了element-ui的控件：地址https://element.eleme.cn/#/zh-CN/component/message-box效果图：// 确定按钮操作 submitForm() { this.$refs['form'].validate(valid => { if (this.wrnId) { this.form.wrnId = this.wrnId;.

原创 element-ui表格的基本操作详解记录1

<template> <div class="train-box"> <div class="left-box"> <div class="left-box-btn"> <el-date-picker type="date" clearable v-model="startTime" value-format="yyyy-MM-dd" style="width: 250px" class="left-box-btn-data" .

原创 js之定时器

setInterval()-定时调用-可以将一个函数，每隔一段时间执行一次-参数： 1.回调函数，该函数会每隔一段时间被调用一次 2.每次调用间隔的时间，单位是毫秒-返回值： 返回一个Number类型的数据，这个数字用来作为定时器的唯一标识clearInterval()可以用来关闭一个定时器，方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器.可以接收任意参数，如果参数是一个有效的定时器标识，则停止对应的定时器，如果参数不是一个...

原创 折线统计图实现渐变色

使用了echats插件官网：https://echarts.apache.org/zh/index.html渐变色官网实例：https://echarts.apache.org/examples/zh/editor.html?c=line-tooltip-touch其他官网实例：https://echarts.apache.org/examples/zh/index.html我做的实现效果图：引入echats和上手绘制，请先移步这里，（我也是刚学）https://echarts.a.

原创 自定义滚动条

效果图：时间这一列进行上下滚动循环。<div id="map-container"></div>是用来加载地图的。此图片悬浮在地图右上角。 <div id="map-container"> <div class="wrn">告警列表</div> <div id="list" class="marquee_list" :class="{marquee_top:animate}"> .

原创 上传图片

要求，点击【新增】按钮，出现弹框，点击【上传图片】实现上传，使用了element-ui为【新增】按钮添加响应函数@click="handleAdd" <el-row :gutter="10" class="mb8"> <el-col :span="1.5"> <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增</e.

原创 高德地图自定义marker样式

要求：在高德地图上，自定义点标记marker，判断设备是否在线，如果在线在点标记上显示某种数值，效果图如下：地图加载就不做介绍了，下方高德地图的api：https://lbs.amap.com/api/jsapi-v2/summary仿照高德地图的纯文本标记做：https://lbs.amap.com/api/javascript-api/example/marker/text这一段是自定义的方法：var markerContent = '' + `<...

原创 vue和高德地图结合引入图片问题

要求：marker要自定义的背景图片，高德提供了api，下面是链接：https://lbs.amap.com/api/javascript-api/example/marker/custom-icon定义一个底层容器，一定要记得给这个div长和宽，要不然无法显示<div id="map-container" />style：<style lang="scss" scoped> #map-container { width: 100%; h.

原创 js之正则表达式

语法var 变量 = new RegExp("正则表达式","匹配模式")；使用typeof检查正则对象，会返回objectvar reg = new RegExp("a");这个正则表达式可以用来检查一个字符串是否含有a在构造函数中可以传递一个匹配模式作为第二个参数，i 忽略大小写 ； g 全局匹配模式var reg = new RegExp("a","i")使用字面量来创建正则表达式语法：var 变量 = /正则表达式/匹配模式reg = /a/i 和va...

原创 js之call、apply、arguments、test

call() 和apply()这两个方法都是函数对象的方法，需要通过函数对象来调用。在调用call() 和apply()可以将一个对象指定为第一个参数，此时这个对象将会成为函数执行的this，call()方法可以将实参在对象之后依次传递fun.call(obj,2,3)apply()方法需要将实参封装到一个数组中统一传递fun.apply(obj,[2,3])this的情况1.以函数形式调用时，this永远都是window2.以方法的形式调用时，this是调用方法的对象

原创 vue基于uni-app的传参

点击按钮跳转页面时无形参的传参过程总结：<template> <view class="uni-padding-wrap uni-common-mt content"> <view class="uni-flex uni-column"> <view class="video_btn"> <u-button type="warning" size="medium" class="btn_purchase" @click

原创 js基础-数组的四个方法

可以在下面的地址看到更详细的介绍https://www.w3school.com.cn/jsref/jsref_obj_array.asppush()-该方法可以向数组的末尾添加一个或多个元素，并返回数据的新的长度，可以将要添加的元素作为方法的参数传递。这些元素将会自动添加到数组的末尾。该方法会将数组新的长度作为返回值返回pop()-该方法可以删除数组的最后一个元素，调用一次删除一个，并将被删除的元素作为返回值返回unshift()-向数组开头添加一个或多个元素，并返回新的数..

原创 基于uni-app的沉浸式导航栏配置

本文是基于uni-app的沉浸式导航栏配置uni-app的官网：https://uniapp.dcloud.io/collocation/pages这些配置在pages.json中，如下：为了设置沉浸式导航栏：点击“pages”，跳进下图位置，再点击pageStyle可以看到style，用于设置每个页面的状态栏、导航条、标题、窗口背景色等。在代码中就是设置之后就可以达到如下效果：...

原创 JS基础--原型对象

原型 prototype:我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype，这个属性对应着一个对象，这个对象就是我们所谓的原型对象。如果函数作为普通函数调用prototype没有任何作用。当函数以构造函数的形式调用时，他所创建的对象中都会有一个隐含的属性，指向该构造函数的原型对象，我们可以通过_ _proto_ _来访问该属性。原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象。我们可以将对象中共有的内容，统一设置到原型对象中。当我们访问对象的一个属性

原创 css限制一行文字数量，超出部分用省略号显示

text-overflow: ellipsis; white-space: nowrap;

原创 vue错误

<template> <div class="detail-swiper"> <swiper class="swiper"> <swiper-item v-for="item in topImages"> <img :src="item" alt=""> <!-- src一定要加 ：--> </swiper-item> </swiper> </div&g...

原创 bilibili学习之axios

vuex以后再更新吧，今天有点困。装载axios，npm install axios --save在main.js导入引用import axios from 'axios'在main.js中使用axios({ url:'http://123.207.32.32:8000/home/multidata', method:'get'}).then(res =>{ console.log(res)})url:'http://123.207.32.32:8000/h

原创 bilibili学习之vuex 中的mutations

Vuex的官网链接https://vuex.vuejs.org/zh/vuex也是插件，需要安装npm install vuex --save创建store目录，下面建一个index.js。安装插件 创建对象 导出state、mutations、actions 、getters 、modules都是方法然后在main.js中导入：在APP.vue中写：<template> <div id="app"> <h2>{{ ..

原创 bilibili学习之样式

改变图标与顶部的距离：margin-top: 10px;改变文字与图标之间的距离：vertical-align:middle ;

原创 bilibili学习之keep-alive

<!--router-view也是一个组件，如果被包在keep-alive里面，所有路径匹配到的视图组件都会被缓存 --> <!-- keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染 -->keep-alive有两个重要的属性：include-字符串或正则表达式，只有匹配的组件会被缓存 exclude-字符串或正则表达式，任何匹配的组件都不会被缓存在app.vue中在home.vue中 //act...

原创 bilibili学习之改变跳转的title实现方式

利用生命周期函数created（）在每个VUE文件中添加以下代码created(){ console.log('created'); document.title = '用户' },可实现跳转之后的title的改变，效果图：方式2：在每个路由的配置中，添加meta（源数据），添加title，{ path:'/about', component:About, meta:{ title:'关于' } },然后调用：router..

原创 bilibili学习之参数传递的两种方式

在App.vue中的template填写以下代码，<router-link v-bind:to="{path:'/profile',query:{name:'why',age:18,height:1.88}}">档案</router-link>在profile.vue中通过$route.query调用<h2>{{ $route.query.name }}</h2><h2>{{ $route.query.age }}</h2.

原创 bilibili学习之嵌套路由

接前面实现嵌套路由的两个步骤：创建对应的子组件，并且在路由映射中配置对应的子路由在组件内部使用<router-view>标签创建两个vue，里面填写一些内容：在index.js中。配置相关消息，第一步：利用懒加载的方式配置路由相关信息第二步：创建VueRouter对象，传入路由映射配置由于需要在home中展现新闻和消息两个模块，所以路由的映射配置应该写在home的下面，然后在Home.vue中效果图...

原创 bilibili学习之路由懒加载

原创 bilibili学习之vue-router动态路由的使用

先创建一个 user.vue在index.js中配置路由需要注意：userId将会在user.vue中用到path:'/user/:userId',在App.vue中然后在user.vue中使用return this.$route.params.userId效果图：

原创 bilibili学习之小知识点

配置好路由之后，在地址栏会出现一个#，利用mode将#去掉在index.js中写：mode:'history',将默认的哈希模式改成HTML5的history形式<router-link>的补充：router-link是vue-router中已经内置的组件，最终会被渲染成a标签 router-link中的to属性，用于指定跳转的路径 router-link中的tag属性，可以指定router-link之后渲染成什么组件，<router-link t...

原创 bilibili学习之简单router使用

创建一个components目录，下面创建两个.vue，里面内容然后在index.js里面传入路由映射配置关系：component:后面的名字是import的名字，注意。在app.vue，使用路由最后效果：在路径一栏，配置完router应该出现#才对。...

原创 bilibili学习之安装router过程且使用

路由的官网链接：https://router.vuejs.org/zh/installation.html我听课处理的过程是：在控制终端输入：npm install vue-router --save完成后，在package.json里查看，如下图：然后创建一个router的文件夹，下面放一个index.js，如图所示：在index.js里面写：第一步：第二步：第三步：在main.js中写入：基本配置完成...

原创 bilibili学习之路由-vue-router的基本使用

https://router.vuejs.org/zh/installation.html下载vue-router的地址，下载之后放在项目下面的新建文件夹path里面，<html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8">&l..