- 博客(96)
- 收藏
- 关注
RSS订阅
原创 element ui弹框校验(自定义校验)
age: { type: 'number', asyncValidator: (rule, value) => { return new Promise((resolve, reject) => { if (value < 18) { reject('too young'); // reject with error message } else { resolve();
2020-09-25 10:48:16
1403
1
原创 number类型去掉上下箭头和去掉监听滚轮事件
使用element-ui+vue时，在el-input加上@mousewheel.native.prevent来阻止鼠标滚动。css样式去掉上下箭头。
2023-01-09 12:03:49
260
原创 二进制流导出
插件方式插件地址https://github.com/kennethjiang/js-file-download下载npm install js-file-download --save用法import Axios from axios;import fileDownload from 'js-file-download';function download(url: string, filename: string) { Axios.get(url, { respons.
2022-03-14 14:08:49
1193
原创 uniapp实现横向滚动效果(类似时间选择)
实现效果:根据滑动可以把选择后的数据,放在蓝色框里,左右滑动都有震动的效果需要的组件:scroll-view,wx.vibrateShort的震动效果,在手机上测试很nice上代码<template> <view class="content"> <scroll-view scroll-x class="page" @scroll="scroll"> <view class="num-content"> <view clas
2022-02-24 10:40:40
2422
转载 什么是数据结构
文章目录前言一、线性表1.顺序表2.链表3.栈和队列二、数存储结构三、图存储结构总结前言数据存储方式有哪几种呢？本节将对数据结构的学习内容做一个简要的总结。数据结构大致包含以下几种存储结构：线性表，还可以细分为顺序表、链表、栈和队列树结构，包括普通树、二叉树、线索二叉树等图存储结构一、线性表线性表结构存储的数据往往是可以依次排列的，就像小朋友手拉手，每个学生的前面和后买你仅有一个小朋友和他拉手，具备这种“一对一”关系的数据就可以使用线性表来存储例如，存储类似{1，3，4}这样的数
2022-01-29 15:03:24
156
原创 uni-app用下载包的形式引入echarts
1.下载echartsnpm i echarts --save2.配置全局在main.js引用import * as echarts from 'echarts'Vue.prototype.$echarts = echarts3.echarts自己封装的引用文件<template> <view :id="id" :style="{width: chartW + 'upx', height: chartH + 'upx'}" class="view-charts" >
2021-11-01 16:03:50
205
原创 vue-router key属性
在项目进行中，有一个功能是需要在本页跳转，只是参数的不同，可是由于页面不会刷新，故而找了很多方法，:key属性完全解决我的问题了<template> <div class="bulletin-board"> <router-view :key="$route.fullPath" /> </div></template>贴一个官网的path 和fullpath的路由对象属性$route.path 类型: string
2021-08-23 11:39:55
1734
原创 继承call prototype
function Child({name, age}) { this.name = name this.age = age this.eat = function (){ console.log(`${name} 正在吃饭`) }}function Parent() { Parent.prototype.aa = 'aaa'}Parent.prototype = new Child({ name: '哈哈哈', age: 18
2021-07-20 10:08:22
58
转载 interface type
在日常工作中，常见的类型的定义，interface type都使用过，那么有什么共同点和差别呢相同点都可以描述一个对象或者函数interfaceinterface user { name: string age: string}interface setuser { (name: string, age: number) :void}typetype user = { name: string age: string}type setuser = (name:string
2021-07-15 14:21:30
371
原创 小整理
将城市按照A~z的顺序排列sortgroupcity(){ let sortobj = {}; for (let i = 65; i <= 90; i++) { if (this.groupcity[String.fromCharCode(i)]) { sortobj[String.fromCharCode(i)] = this.groupcity[String.fromCharC
2021-03-01 18:44:26
70
原创 关于前端捕获
1.对前端资源，img、css、script等错误捕获window.addEventListener('error', function (e) { let errorData = { errorType: 'resource', msg: e.target['localName'], target: e.target['localName'], type: e.type, resourceUrl: e.target['href'] || e.target['c
2021-01-27 13:52:32
404
2
原创 vue-cli3替换网页标题旁边的logo
1.在public文件下添加自己需要的.ico文件可自行在网页转换 png->.ico2.在html文件添加logo <link rel="icon" href="<%= BASE_URL %>favicon.ico">如果没有生效3.在vue.config.js添加配置 pwa: { iconPaths: { favicon32: 'favicon.ico', favicon16: 'favicon.ico', a
2020-12-21 10:52:53
590
原创 typescript类型判断
1.string类型let str:string = '123'2.number类型let num:number: = 13.arr类型arr类型有两种类型判断第一种，可以在元素类型后面接上 []let arr:number[] = [1,2,3]第二种方式是使用数组泛型，Array<元素类型>：let list: Array<number> = [1, 2, 3];4.一个字段多个类型let str:string|number = ''...
2020-12-19 15:08:27
9377
1
原创 typescript时间的类型 vxe-table
private disabledDateMethod({ date }:{date: typeof Date.prototype}) { return date.getTime() < this.formData.startDate.getTime() }这里的时间是中国标准时间一开始我的getTime()一直报错，在类型后面加上了prototype，就可以用关于时间的方法这里的代码是为了时间选择不能选择比一个时间小的时间，所以想了这个办法getTime()方法是将时间换算成毫秒
2020-12-11 14:38:06
1738
原创 文字竖排和文字间距 && 画一个右侧实心箭头
文字竖排方法文字从上到下 writing-mode: tb-rl;文字从左到右 writing-mode: rl-tb;letter-spacing：控制字母间的间距，对中文而言就是字与字之间的间距letter-spacing替换为word-spacing：实现英文的词与词之间的间距的控制 letter-spacing: 10px;实现效果html<div class="item-card-title flex-center">上门总数<span>1
2020-12-10 18:06:27
147
原创 vue验证码倒计时
有一个需求手机号发送验证码的倒计时一开始是想要直接通过计算属性直接return 出倒计时的值但是出现一个问题报错Unexpected side effect in “xxxx“ computed property后来发现是因为computed不可以直接改变变量的值，然后写在了watch里面上代码<el-button type="primary" :disabled="isSend" @click="isSend=true">{{ sendMessage }}</el-but
2020-11-30 13:44:33
103
原创 vuex vue-router
在路由跳转之前拿到store的值首先，在你的router.js里引入vueximport store from '@/store'在重定向的时候判断 redirect: to => { const button2 = store.getters.home_info.button_info.button2 if (button2 === '3') { return '/demand-analysis/demand-result' } else
2020-11-28 18:27:07
148
原创 css样式
white-space描述：规定段落中的文本不进行换行定义和用法white-space 属性设置如何处理元素内的空白。这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。默认值：normal继承性：yes版本：no继承性：CSS1JavaScript 语法JavaScript 语法： object.style.whiteSpace=“pre”可能的值值描述
2020-11-18 16:04:39
95
1
原创 element的el-input消除空格
<el-form-item label="姓名名称" prop="name"> <el-input v-model.trim="data.name" placeholder="请输入姓名" :disabled="dialogStatus === 'info'" /></el-form-item>有时候需要校验，但是前后有空格的话就会一直报红，用户体验差，所以在v-model后面加trim，实现的效果是前后的空格加不上去...
2020-11-13 14:21:10
9509
原创 element message 换行
arr = [{ sku:'aaa', error_code: 'fail'},{ sku:'aaa', error_code: 'fail'}] let str = ''arr.map((el) => { str += ('sku' + el.sku + el.error_code + ' <br/> ')})this.$message({ dangerouslyUseHTMLString: true, message: str, type: '
2020-11-09 17:13:01
2124
1
原创 关于vue的computed属性
computed是vue用来解决标签语法有一些计算步骤的属性1.普通用法只用到getter属性，只有一个普通的返回值var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 return this.message.sp
2020-10-26 17:33:28
266
原创 关于js中的加法（reduce)
工作中遇到一个把数组的每一项加起来一开始我用的方法是普通的const array1 = [1, 2, 3, 4]; array1.map((el) => { b +=el})把每一项加起来赋值给b今天突然发现一个方法那就是reduce()官方解释reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。用法const array1 = [1, 2, 3, 4];reducer(accumulator, curren
2020-10-26 17:21:12
499
原创 vue3初始-创建和配置路由vue-cli3
首先，下载vue3首先需要安装vue-cli 或者将vue-cli升级到4.3.1命令行 在Windows下输入npm install -g @vue/cli 注意如果你的电脑是Mac 那么需要输入的命令行为sudo npm install -g @vue/cli，否则会提示没有权限， 接下来会让你输入电脑密码，输入成功后开始安装安装成功后可以看到此时的vue-cli脚手架的版本已经是4.5.7输入命令行vue create demo_cli4 新建项目此时会有两个选项，我们选择第二个自
2020-10-15 17:01:23
6133
2
原创 scrollTop，window.scrollTo()，Math.max的介绍
scrollTopElement.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数。一个元素的 scrollTop 值是这个元素的内容顶部（卷起来的）到它的视口可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0。是一个元素向下滚动，离上面的距离document.documentElement.scrollTop可以获得距离上面的高度window.scrollTo()scrollTo() 方法可把内容滚动到指定的坐标。
2020-10-12 11:54:20
2406
1
原创 复制自定义链接 vue-clipboard2
有一个需求是按钮点击后复制链接但是没有容器，是自己定义的我用了一个插件vue-clipboard21.下载npm install --save vue-clipboard22.引入import Vue from 'vue'import VueClipboard from 'vue-clipboard2' Vue.use(VueClipboard)3.使用 <el-button v-if="row.warranty_end_time"
2020-09-18 17:11:05
131
原创 ios键盘调起引起的白屏
在APP.vue的created（）里面判断 this.isIOS = isIOS() if (this.isIOS) { // 判断是否是ios端 let flag = false let pageBackNormFunc document.body.addEventListener('focusin', () => { // 软键盘弹起事件 flag = true pageBackNormFunc &&
2020-09-09 17:32:59
298
原创 对象转数组方法
有些时候你得需要把对象改成数组第一步，取出他们得键名 Object.keys(obj) var obj = {name:'小明',age:'12',collect:'动画'} var arr =[] Object.keys(obj).forEach(key => { arr.push({ id: key, value: obj[key] }) })...
2020-08-31 16:03:38
251
原创 在div上画空心三角形
<div class="nvhai"> 接电话 </div> .nvhai::after { position: absolute; content: ''; width: 10px; height: 10px; top: -8px; left: 695px; border-right: 2px solid #
2020-08-20 18:54:07
311
原创 vue回到顶部
当页面出现上下滚动条时，页面右下角出现回到顶部功能。在页面上添加如下DIV（写的CSS内部样式），这个DIV功能：出现滚动条往下滑动，就显示出来，反之隐藏。点击DIV快速回到顶部。 <div v-if="btnFlag" class="backTop" @click="backTop"> <img src="@/assets/needsAnalysis/top.png"> <p>顶部</p></div>bt
2020-08-20 17:42:32
192
原创 关于checkbox element
<el-checkbox-group v-model="checked" @change="handleChange" > <el-checkbox v-for="item in checkArrayProp" :key="item.id" :label="item.id" > {{ item.label }} .
2020-08-17 09:47:06
123
原创 选择需要复制的对象
var copycode = document.getElementById('copycode') copycode.select() // 选择对象 document.execCommand('Copy') // 执行浏览器复制命令 alert('已复制好，可贴粘。')只是可以选中这个容器里面的东西不可以自定义文字复制...
2020-08-12 09:54:50
141
原创 电脑端的保存图片
ownloadIamge(imgsrc, name) { const image = new Image() image.setAttribute('crossOrigin', 'anonymous') image.onload = function() { const canvas = document.createElement('canvas') canvas.width = image.width canvas.he
2020-08-11 18:10:41
147
原创 手机端input输入文字500ms之后查询
首先是input的绑定，这个input是我写的组件，忽略它，但是可以看到，双向绑定了search<Inputer v-model="search" type="search" placeholder="输入用户姓名/手机号查询" class="search" />在data里面定义search: '',最最重要的来了，就是观测这个值得变化，如果开始输入值的话，500ms定时器完成后再进行搜索。为什么需要定位呢，问题来了如果我们需要模糊查询手机号当我们输入 1,11,111，每次
2020-08-07 17:58:13
351
原创 cancat的坑
连接两个数组的时候，一直不对，还是原来的数组百度了一下知道了concat()把两个或者多个数组链接在一起，但是不改变已经存在的数组,而是返回一个链接之后的新数组错误示范this.video_material.concat( data.data.material_list)console.log(this.video_materia)正确写法this.video_material = this.video_material.concat( data.data.mater
2020-07-28 16:55:55
204
原创 sort和时间
对数组排序const arr = [ {updataTime:'2020-7-17 23:15:15',name:'1'}, {updataTime:'2020-7-20 23:15:15',name:'1'}, {updataTime:'2019-7-17 20:15:15',name:'1'}, {updataTime:'2019-7-17 23:15:15',name:'1'}, {updataTime:'2020-7-13 23:15:15',name:'1'}]arr.
2020-07-21 16:33:28
222
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人