- 博客(39)
- 收藏
- 关注
RSS订阅原创 antd组件的动态表单新增与自定义校验
<template> <div class="delivery-time-setting"> <a-form name="custom-validation" ref="formRef" :model="modelRef" :rules="rules" v-bind="layout" @finish="handleFinish" @finishFailed="handleFinishFailed" > <di
2022-02-23 21:48:33
1784
原创 vue中的watch使用方式
<el-input type="text" v-model="numberValidateForm" autocomplete="off"></el-input><div>{{numberPhone}}</div>export default{ data(){ return{ numberPhone:'', numberValidateForm:'121454', object:{ d:'' } } }, // hand
2021-06-23 17:32:24
244
原创 表单if-else的优化方式
**## 第一种方式优化方案(单一校验)** export default{ data(){ return{ formData:{ contacts:'', telPhone:'', faxEmail:'', agentNo:'', } } }, methods:{ validateFn(value, msg) { if (!value) {
2021-05-26 18:01:23
209
原创 vue的computed和filters的性能优化方法
<template>//优化前 <div> <ul> <li v-for="(item,index) in users" :key="index" v-if="item.isActive">{{item.name}}</li> </ul> </div> //优化后 <div> <ul> <li v-for="(item,index) in activeUsers
2021-05-13 15:58:21
569
原创 includes和indexof数组去重区别
var arrsorts = [12,6,4,9,9,47,6,2,2]//includes去重function sortsIncludes(arr){ var sortArr = [] for(var i = 0; i < arr.length; i++){ if(!sortArr.includes(arr[i])){ sortArr.push(arr[i]) } } return sortArr}console.log(sortsIncludes(arrsorts))
2021-05-13 14:16:22
150
原创 字符串数组转译对象形式
let arrList = "[errorGroup:500],[circuitBroken:false],[retry:false],[returnCode:GENERAL_EXCEPTION],[returnMessage:字符串数组转译对象形式]"function strobj(str){ let objs = {} str.split(',').forEach((item)=>{ let tmparr = item.replace('[','').replace(']','').sp
2021-05-13 11:13:09
215
原创 vue插槽slot的简单理解
**先创建一个子组件文件solt.vue**1.**默认插槽**<template><div class="solt__body"> <slot></slot> //这个标签的作用就是接受存放父组件传过来的信息数据</div></template><script>export default {}</script>1.**默认插槽在父组件页面应用father.vue**<templ
2021-04-08 17:28:49
128
原创 vue步骤条组件
**子组件**<template> <div class="steps-box"> <div v-for="(item, index) in stepsData" class="steps-card" :class="index <= stepsIndex ? 'on' : ''" :key="index"> <span>{{ index + 1 }}</span&
2021-03-10 16:41:36
1061
原创 进度条滑动轮播图之移动端
<!-- 轮播图 --> <view class="swiper"> <view class="swiper-box"> <swiper circular="true" @change="swiperChange" :autoplay="true" interval="5000" duration="500" previous-margin="25px" next-margin="25px"> <swiper-item.
2021-03-05 17:29:54
267
原创 封装uniapp省市区三级联动
<template> <view> <view class="list" :style="{width:width+'rpx',height:height+'rpx'}"> <text class="must"> 商户所在地区： </text> <picker class="picker" mode="multiSelector" :range="region" range-key="areaName" :va
2021-02-26 11:20:31
767
原创 解决移动端H5页面软键盘弹起input失焦后不回弹底部
**给input添加@blur失去焦点事件** <view class="label iconfont iconlock"> <input type="text" placeholder="真实姓名" placeholder-class="place" v-model="formData.realName" @blur.prevent="inputLoseFocus"/> </view>**解决方法函数**inputLoseFocus() { let cur
2021-02-02 10:25:36
1053
原创 H5自定义数字支付键盘
模板文件<template> <div class="keybraodNum"> <!-- 支付金额 --> <div class="monenyBox"> <div class="logoBox"> <div class="image"> <span class="iconfont icon-icon_A"></span> </div> <.
2021-01-06 10:16:49
1335
4
原创 前端输入数字只能有一个小数点，小数点不能在开头，不能在结尾，保留两位小数校验正则
let exp = /^(([1-9]\d*)|\d)(.\d{1,2})?$/;if(!exp.test(this.moneyNum)){this.isShow = true //弹窗this.TipsText = “金额格式不对!” //提示语return;}
2021-01-05 15:22:19
2010
2
原创 css3动画手势指引
<div class="wrapper"> <div class="circle">完善信息</div> <div class="finger"></div> </div>**style部分**.wrapper { position: relative; overflow: hidden; width: 500.
2020-12-17 16:30:59
657
原创 vue监听url路由传递参数变化
**A.页面传递参数** Clickcity(){ this.$router.push({path:'/City',query:{ url:12 }}) }, **B.页面监听接收参数** watch: {// 监听到路由地址的改变 $route:{ immediate:true, handler(){ if(this.$route.query.url){ console.log(1212)
2020-12-16 17:51:42
1343
原创 vue利用meta做动态面包屑
**单独编写一个组件文件 Breadrumb.vue****第一套样式采用element-ui的样式** <div class="example-container"> <el-breadcrumb separator="/"> <el-breadcrumb-item v-for="(item,index) in breadList" :key="index" :to="{ path: i
2020-12-07 17:42:01
597
原创 vue,uni-app密码支付键盘
**在components建一个组件文件**<template> <div class="keyborad" :style="{transform:show_key?'translateY(0)':'translateY(100%)'}"> <div class="key_main"> <div class="main_title"> <span class="cuIcon-close span-reding" @click="c
2020-12-02 11:07:11
1329
原创 vue多种文件格式导出方法
/** * 导出Excel文件 * 参数说明： * option: 字段解析 * data: <Object> blob数据 * link: <String> 下载链接 * time: <Boolean> 文件名加时间,默认true, * title: <String> 文件名 * bool: <Boolean> 是否自定
2020-11-04 18:00:58
1341
原创 uniapp开发H5网页授权步骤
第一步是微信公众平台申请测试账号第二部在网页授权（修改）填写回调域名，测试可以使用自己本地的端口，注意：这里不可以添加http:// 只准添加例如：baidu.com第三部按照里面的只是即可代码如下1，// 获取code getCode() { this.code = '' let origin = 'http://192.168.1.115:8082/mycenter/mycenter' //网页授权的回调域名，这里设置的是本地端口 let urlNow =
2020-08-10 23:03:50
7377
3
原创 vuex入门实战，看不懂不要赞！
login.vue文件<template> <div> <headers title="登录"> <router-link slot="left" to="/">返回</router-link> </headers> <form class="login" v-on:submit.prevent="submit"> <div class="line"> <div v-s
2020-07-02 23:45:29
127
原创 vue全局注册组件，路由分区，按钮权限控制
全局注册组件，减少了我们之前的引入文件，注册组件的问题创建全局.js文件管理全局组件// 1 - globalComponent.jsimport Vue from 'vue' // 引入vue// 处理首字母大写 abc => Abcfunction changeStr(str){ return str.charAt(0).toUpperCase() + str.slice(1)}/* require.context(arg1,arg2,arg3)
2020-05-26 12:56:03
534
转载 Vue方法实现一个较完整的购物车结算
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>todolist加购物车</title> <link rel="stylesheet" href="css/bootstrap.css" /> <script type="text/javascript" src="js/vue.js" ></script> &l
2020-05-24 23:18:01
580
原创 git从初始化到远程仓库的简单使用
1，在文件初始化git 命令是“git init”2,查看本地和远程仓库的所有分支3,同步远程分支git fetch 将本地分支与远程保持同步git checkout -b 本地分支名x origin/远程分支名x 拉取远程分支并同时创建对应的本地分支拉取所有分支代码 git pull4,创建本地分支git branch 分支名，例如：git branch 2.0.1.20120806注：2.0.1.20120806是分支名称，可以随便定义。‘git branch -a‘是查看本地和远
2020-05-13 00:04:10
336
原创 vue的computed,动态class，nextTick简单使用
**computed的使用****视图** <p v-for="subject in results" :key="subject"> <span>Marks for: {{ subject.ages }}</span> </p> <p> Total marks are: {{ totalages }} </p>**js** computed:{ totalages:function(){
2020-05-12 00:02:16
1818
原创 svn的简单使用步骤
1.git commit ‘你的分支’ 代表的是你当前的开发分支和你开发完成点击提交的2.点击git commit 会跳出提交的页面对应的信息分别是你要编写做了什么和你修改过的对应文件3.点击按钮commit后再点击push按钮会显示你提交代码的成功与否信息切换分支切换分支是switch/checkout,然后会显示你要选择的开发分支切换你要选择的分支合并分支merge选...
2020-05-07 23:50:42
614
原创 vue父子组件通信的书写方式及ui组件的显示隐藏
**子组件**<template> <div class="box"> <p>props_number:{{props_number}}</p> <p>props_string_number:{{props_string_number}}</p> <p>props_boolean:...
2020-04-29 11:17:06
177
原创 vue单页面改多页面处理方式
// 会员海报广告跳转 clickUrl(excellentUrl){ // debugger if(excellentUrl.url==excellentUrl.url){ window.location.href = this.excellentUrl.url }else{ window.open(this.exc...
2020-04-26 12:02:56
309
原创 vue的title标题处理
// 剧院logo请求以及剧院title标题 async getLogoImg () { const { data } = await getTheaterLogo() document.title = data.revData.theaterName } **注意事：项要在app.vue里面使用**...
2020-04-26 11:39:07
443
原创 vue通过单选框状态改变按钮style样式颜色
<el-checkbox v-model="checked">备选项</el-checkbox><div :style="{'background-color': (checked ? '#E5E5E5':'#ffcb00')}">1254545</div>**在data定义状态**checked:false...
2020-04-23 00:07:08
3107
原创 关于各种身份证，电话号码，邮箱，军官证，港珠澳电话的正则校验
/** * 邮箱 * @param {*} s *//* eslint-disable */export function isEmail (s) { return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)}/** * 手机号码 * @param {*} s */e...
2020-04-21 22:53:09
10173
原创 vue时间格式化的处理方法
**可单独写一个文件导出**// 时间过滤 const dateFormart= ('dateFormart', function (value, formartStr) { // 1.根据传入的毫秒创建时间对象 var date = new Date(value) // 2.获取年月日 var year = date.getFullYear() var...
2020-04-21 22:30:32
1221
原创 关于vuex刷新数据丢失的解决方法
const user = { state: sessionStorage.getItem('stateUser') ? JSON.parse(sessionStorage.getItem('stateUser')) : { // 处理刷新重置登录状态 showLogin: false, isLogin: false },```mutations: { SET_SH...
2020-04-21 22:06:40
381
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人