- 博客(40)
- 收藏
- 关注
RSS订阅原创 vue中后端返回图片流，前端渲染方法
前端登录经常用到图形验证码，后端接口返回的是图片数据流，如下图返回图片流这样。首先封装接口api和uuid[就是一个随机数，防止重复]
2022-11-29 22:21:39
5361
原创 vue中自定义指令的使用
vue中自定义指令的使用方法：全局自定义指令和局部自定义指令1、全局自定义指令Vue.directive(‘指令名’,{配置对象})局部自定义指令下面的例子是：定义一个v-find指令，让输入框的input默认获取焦点第一种写法： new Vue({ directives:{指令名:{配置对象}} })第二种写法： new Vue({ directives:{'指令名':function(){}} })可简写为： new Vue({ directives:{指令名(
2022-02-23 15:42:32
2399
原创 vue中的v-cloak指令的用法
当网速很慢的时候，v-cloak结合css样式，可以解决页面出现{{xxx}}的问题。Vue实例创建完毕并接管容器后，会删除v-cloak属性 <div id="root"> <h1 v-cloak>{{name}}</h1> </div> <script type="text/javascript"> new Vue({ el:'#root', d
2022-02-22 14:40:49
2435
原创 vue2创建项目步骤
1、电脑安装node.js下载地址：https://nodejs.org/en/download/根据自己电脑型号安装node的版本，点击下载之后，继续下一步直至完成安装就行，2、创建一个文件夹，打开cmd控制命令行程序3、使用淘宝NPM 镜像大家都知道国内直接使用npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。$ npm install -g cnpm --registry=https://registry.npm.taobao.org这样就可以使用cnpm 命
2021-12-24 15:05:21
3427
原创 ＜meta name=“description“ content=““ /＞代码中加入这行代码的作用讲解
使用jquery，写的h5页面，企业微信app，点击一个按钮，跳转到我写的页面时，点击右上角的分享，分享到微信好友，链接显示null的解决方法在这里插入图片描述如上图所示，分享链接显示时null，解决的方法是在h5页面的头部加上<meta name="description" content="竭诚为您提供贴心公司金融服务" /><meta name="keywords" content="哈哈" />加上上述代码，链接上就有内容让一些搜索引擎搜索到你的网页，代码可以
2021-12-23 16:50:14
1645
原创 使用jquery把数组的数据展示到页面，并设置不同的背景颜色
使用jquery把数组的数据展示到页面并设置不同的背景颜色<body> <div id="wrapper"> <div style="background-color: #7a98fb;">名称</div> </div> <script type="text/javascript"> var wrapper = document.getElementById('wrapper')
2021-12-15 15:03:01
1335
原创 微信小程序项目中引入阿里巴巴矢量图的使用步骤
阿里巴巴矢量图使用步骤1、点击官网的链接https://www.iconfont.cn/，github或微博登录，进入到如下的界面2、点击搜索框，输入想要查询的图标文字进行搜索即可3、放进库里面的图标都在购物车中，把他们添加至项目即可5、没有项目，可以先添加一个项目名称，6、点击Font class ，然后点击在线链接 复制链接到一个新的浏览页面中，7、把页面中的代码粘贴复制，在项目中，创建一个syles文件夹，一个名为iconfont.wxss，把代码复制到此文件中8、在全局的app.w
2021-08-12 13:54:03
2624
2
原创 使用vscode开发小程序，实现后缀是less文件自动编译成后缀为wxss或者css文件
使用less文件自动编译成wxss或者css文件1、在应用商店下载 Easy LESS2、打开设置，点击右上角，如下图所示，就会打开settings.json文件3、在settings.json中添加"less.compile": { "outExt": ".wxss" }想要改为.css可以直接把".wxss"替换为".css"4、此时，可以把文件原本的后缀为.wxss文件改为.less，文件自动会生成.wxss...
2021-08-05 09:54:45
715
原创 微信小程序携带参数跳转页面报Unexpected end of JSON input；at “xx路径“ page lifeCycleMethod错误
微信小程序点击携带参数报错Unexpected end of JSON input;at “xxx” page lifeCycleMethod解决方法//页面跳转传递参数 使用encodeURIComponentwx.navigateTo({ url: '../../release/releaseOffer/index?type=asset&flag=1"eInfo=' + encodeURIComponent(quoteInfo) }) //子页面
2021-07-29 17:11:20
304
原创 uniapp使用时间插件，进行时间搜索查询
uniapp使用时间插件，点击开始时间和结束时间，进行搜索查询<template> <view class="checkPage"> <view class="date"> <view class="datetime" @tap="onShowDatePicker()"> <image src="../../static/check/date.png" mode="" style="width: 40upx;height: 40u
2021-04-02 13:51:51
1666
2
原创 vue中的路由设置，点击左边导航栏的，右边就会对应相应的路径数据
vue中路由的设置，点击左边导航栏右边对应相应的路径数据下面的代码是index.vue中的<template> <div class="all"> <div class="left"> <el-menu :default-active="$route.name" router> <el-submenu index="1"> <template slot="title">
2021-03-29 14:59:38
987
原创 uniapp中，使用时间插件，点击年月，可以进行检索
uniapp中，使用时间插件，点击年月，可以进行检索。当点击月时，如果是当前月，应该传今天的日期，如果是上个月或者是没发生的应当传此月的最后一天。年也是如此，例如：今年是2021年，今天是2021-3-18，应该传时间为2021-3-18，若是上一年的2020，应该传为2020-12-31<template> <view class="airPages"> <view class="airPages_top"> <view class="card"&
2021-03-18 14:41:32
1465
原创 uniapp中将图片引入，使用数组将文字与图片进行遍历使用
将图片引入，放在数组中，使用数组将文字与图片进行遍历使用<template> <view class="checkPage"> <view class="date"> <view class="tabWrap"> <view v-for="(item, index) in typeList" :key="index" @click="clickTable(index)" > <view class="eachT
2021-03-17 13:19:23
4732
2
原创 uniapp使用时间插件MxDatePicker，进行时间的检索查询
uniapp使用MxDatePicker时间插件，根据时间段，进行检索查询，还可以重置时间插件是在uniapp插件市场进行下载的，直接搜索mx-datepicker即可<template> <view class="checkPage"> <view class="date"> <view class="datetime" @tap="onShowDatePicker()"> <image src="../../static/ch
2021-03-17 10:50:28
903
原创 基于Ant Design Vue的table表格的获取与展示
基于Ant Design Vue的table表格的获取与展示<template> <div style="width: 100%;height: calc(100vh - 207px);background: #ffffff;margin-top: 20px;"> <a-table rowKey="id" :columns="columns" :data-source="data" :paginat
2020-11-05 17:49:08
3162
1
原创 uniapp中根据关键字，进行模糊查询，用定时器进行防抖
uniapp中利用定时器进行关键字的模糊查询，通过数组的遍历展示出来<template><!-- 这是一个带有阴影的input输入框，可以直接使用--> <view style="margin-left: 80rpx;"> <view class="content1"></view> <view class="search-block shadow" > <image style="width: 30rpx;h
2020-10-20 16:47:51
2792
原创 uniapp中，使用高德地图，进行登录地址，进行跳转到指定的位置
思路是：求一个中心点，以这个中心点当作定位的位置，首先声明经纬度和中心点，循环数组中的所有数据，求出整个数组中的经纬度，然后经度中心点=所有经度/数组的长度；纬度中心点=所有纬度/数组的长度uniapp中，高德地图的引入使用，使用卫星图，创建的文件是nvue后缀<template> <view class="holePage" style="width: 100%;"> <map :latitude="latitude" class="mapView" :longi
2020-10-20 15:12:10
2230
原创 uniapp中创建nvue后缀页面，样式和打包的时候遇到的坑
uniapp中打包的时候，使用了.nvue页面的时候，样式的填写1.样式的书写方式和vue文件是有区别的例如：border<view class="text" ></view><style>.text{border-color: #F7F7F7;border-style: solid;border-bottom-width: 2rpx;}</style>在APP.vue页面中，写的样式，...
2020-10-20 11:56:33
1858
原创 vue中下拉框中有2个选择项，选择另一个有校验，另一个没校验
选择证件类型之后，填写证件号，选择身份证之后，证件号有校验，选择护照的时候没有校验
2020-09-01 11:44:00
1331
原创 vue中el-date-picker实现回显问题
vue中el-date-picker实现回显问题，就是外面搜索的时间在详情里面显示出来以上截图是搜索的页面（外面的），下面是详情的页面
2020-08-21 18:11:27
3227
原创 echarts中当横轴的数据过多的时候，可以在横轴加一个滚动条，还可以设置横轴一次显示多少个数据
echarts中当横轴的数据过多的时候，显得非常拥挤，可以在横轴加一个滚动条下载echarts之后，导入echarts中的dataZoom直接在series后面添加dataZoom: [ { show: true, height: 5, xAxisIndex: [0], bottom: 20, showDetail: false,
2020-07-15 10:55:00
5478
2
原创 子组件获取父组件table表格id的方法
子组件获取父组件的id的方法，我在父组件声明一个id对象，通过点击的时候传参数，把table表格的row赋值给currId，此时子组件传参数id的时候，就是 this.$parent.currId.id
2020-07-13 09:57:30
1121
原创 vue中DatePicker 日期选择器遇到的坑，就是选取时间的时候，传送到后台的是当前时间的前一天
不知道大家注意没，DatePicker 日期选择器，选择的时候 提交的时候是当前时间的前一天<el-date-picker type="date" default-value placeholder="选择日期" v-model="formdata.rectificatDate" value-format="yyyy-MM-dd HH:mm:ss" >
2020-07-10 17:12:54
5059
3
原创 vue中的el-date-picker日期，当用户不点击的时候，默认为当前日期的后3天，用户点击的时候，点击什么时候的日期就是什么时候
vue中 el-date-picker的使用，当用户选择，就使用用户选择的，没有就是默认当前的+3天我使用的是组件，submit.vue是一个父组件，questionListDialog是一个子组件，我在父组件的数据初始化的时候，声明一个时间，new Date()自身带有的获取时间+3，重新设置了时间temp,把这个赋值给rectificatDate整改日期使用el-date-picke，打开弹框组件的时候，时间默认为后3天效果图如下：...
2020-07-10 16:17:10
2847
1
原创 前端vue批量下载excel的2种方法，2种方法均适合get和post两种请求
第一种方法我采用的是创建a标签，但是这种方法有个弊端就是从后台获取的数据，下载的名字是固定写死的。第二种：使用iframe标签，通过在utils中把参数和token拼接起来，也可以下载。以上2种方法均适合get和post两种请求。注意：我从后台获取的数据是文件流，没有返回data形式的数据，我就设置了一下请求返回值为blob形式的。<template> <div> <el-button type="success" style="margin-bottom:
2020-07-10 14:45:20
998
1
原创 vue中el-card结合echarts中的柱形图，一起获取数据
echarts中的柱形图与vue中的卡片区一起结合，获取柱形图的数据<template> <div class="all"> <el-card shadow="hover"> <div id="topRight" style="height:400px"></div> </el-card> </div></template><script>import {
2020-06-17 14:05:30
2169
原创 vue中slot-scope插槽的使用方法，最新版本的vue3.0(#default)插槽写法
vue中最新版插槽的使用 <el-table-column label="问题状态" align="center" prop="status"> <template slot-scope="scope"> <span>{{scope.row.status==0?'待整改':(scope.row.status==1?'已整改':'已关闭')}}</span> </template&g
2020-06-17 10:42:19
17758
3
原创 vue中的table表单双击获取详情，并且详情页面全部是disabled，都是不可修改的，但是想要指定的区域变成可修改的
如上标题，这个是点击新增按钮，出现一个新增弹框，和双击表单，出现详情的效果图如下：
2020-06-15 15:54:46
1649
1
原创 vue中DatePicker 日期选择器的使用，当后台传参有开始时间和结束时间，可以使用watch监听器，实现效果
vue中日期选择器一下选取2个数据，而后台传参数需要传2个开始时间和结束时间，所以可以使用watch监听器进行<template> <div> <el-form ref="searchForm" :model="searchForm" label-width="100px"> <el-form-item label="文章状态："> <el-radio v-model="searchForm.status" la
2020-06-14 19:03:53
2602
1
原创 echarts中的饼状图与vue中的table表格两者结合，实现数据的展示
vue中el-table表格和echarts饼状图两者结合，实现数据的渲染<template> <div class="all" display:flex;align-items:center;> <h4>问题来源</h4> <el-table :data="projectNum" style="width:300px" class="jk-table"> <el-table-column prop="prj
2020-06-12 16:04:00
2647
原创 vue中table表格中，点击一个按钮，可以新增一整行的数据，并且在谷歌浏览器中使用百分数用toFixed()保留位数的使用介绍
谷歌浏览器使用百分比中保留位数toFixed(2)，当输入的数字非常大的时候，保留后的小数，就会出现错误，下面就会介绍。vue中的el-table表格中，点击按钮，就会新增一整行的数据<template> <div> <el-table :data="formTable.prjMeasureItemPos" border class="jk-table"> <el-table-column align="center" w
2020-06-11 17:45:37
2922
原创 vue中有多个下拉框，第二个下拉框要根据第一个得下拉框数据进行选择，可以使用watch监听器，还可以进行选择的时候清空数据
使用多个下拉框进行选择得时候，后一个的下拉框要根据前一个下拉框的数据进行选择，使用watch监听<template> <div> <el-form ref="formTable" :model="formTable" label-width="90px" :rules="rules"> <el-form-item label="检查位置：" prop="floorId"> <el-select class="mr
2020-06-11 15:12:35
3915
原创 vue中分页组件和时间选择器组件，实现时间搜索的时候，列表的数据和分页一起刷新
vue中Pagination 分页组件和DateTimePicker 日期时间选择器组件，实现时间搜索，列表的数据和分页一起刷新<template> <div class="all"> <div class="header"> <el-form inline @submit.native.prevent="getTableData(1)"> <el-form-item> <el-for
2020-06-10 11:01:18
645
1
原创 vue中关键字的搜索，输入关键字列表和分页一起刷新
接着上篇文章，这个是关键字的搜索，输入关键字进行搜索的时候，列表的数据和分页跟着一起改变<template> <div class="all"> <div class="top"> <el-input placeholder="输入检索的关键字" size="medium" v-model="searchForm.contentName" @keyup.enter.nativ
2020-06-10 10:03:35
1031
原创 vue中Pagination 分页的实现和分页跟随页面一起刷新
vue中页面Pagination 分页的实现，点击分页刷新页面使用element-ui中Pagination 分页组件<template> <div class="all"> <div class="mid"> <el-table :data="tableData" class="jk-table" style="width: 100%" > <el-
2020-06-09 15:48:01
2572
2
原创 echarts折线图根据时间的搜索，可以实现折线图的渲染效果
echarts折线图根据时间的搜索，可以实现折线图的渲染效果注意：echarts图中， stack: ‘总量’,每个数据里面都有这个，折线图的数据在y轴会累加，我注释了<template> <div class="footer"> <h3>状态变化趋势</h3> <el-date-picker v-model="formdata.start" type="datetime" placeholder="选择开始时间">
2020-06-09 11:09:22
3719
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人