你说个灯儿-优快云博客

原创 vue 局部刷新

1、在APP.vue中写入 <template> <div id="app">  <router-view v-if="isRouterlive" /> </div> </template> <script> export default { //父组件给子孙提供一个方法，在需要使用局部刷新的组件中引入 provide() { ret

2022-03-14 15:27:54 1207

// 验证手机号是否合格 export function isPhone(phoneStr) { let myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/; if (!myreg.test(phoneStr)) { return false; } else { return true; } } // 验证身份证号是否合格 export function isIdCard(idCardStr) { let idcardReg =

2022-02-24 14:19:42 606

转载封装element 时间日期选择组件——两个时间面板、后面的日期不大于前面的日期

1、在封装的公共组件里面写入： timer_slector.vue <template> <span class="time-slelector"> <el-date-picker v-model="vModel[0]" :type="type" :picker-options="pickerBeginDateBefore" :style="styleCss" :valu

2022-02-22 16:57:08 1003

原创列表demo

列表样式demo <view class="staff_box" v-else> <view class="team_box" v-for=" (list,n) in staffList"> <view > <view class="team_title" @click="list.checkClass = !list.checkClass"> <text>{{list.class}}</text> &lt.

2022-02-16 17:13:32 217

原创兄弟组件之间通信

inject 兄弟组件之间通信场景：building组件去改变nav组件的count值路由 { path:'project/Home', name:'project_home', component:()=>import('../views/project/Home.vue'), //项目级地址 children:[ { path:'/project/Home/building',

2021-08-02 16:44:12 288

原创跑马灯插件 vue-seamless-scroll

vue跑马灯插件 vue-seamless-scroll 全局安装： npm i vue-seamless-scroll --save 引入main.js中： import scroll from 'vue-seamless-scroll' Vue.use(scroll) 跑马灯组件 <template> <div class="page-example3"> <vue-seamless-scroll :data="listData" :class-opti

2021-08-02 16:13:09 1381 1

原创上传图片文件封装

上传文件封装 components 里面的上传文件子组件 <template> <el-upload ref="uploadBox" class="upload-demo" drag action="*" :before-upload="handlebefore" :before-remove="handleremove" :on-exceed="handleexceed" :file-list="value" :auto-upload="true"> </el-u

2021-07-30 18:00:09 109

原创防抖和节流的区别

记录一下防抖和节流的区别防抖（debounce）防抖（throttle）防抖（debounce）示例环境：点击事件。倒计时n秒，只认最后点击的那一次。每一次点击都会重新计时，直到最后一次点击。从最后一次点击开始倒计时n秒，再触发事件。防抖（throttle）示例环境：点击事件。倒计时n秒，在n秒内不管点击多少次，只会间隔n秒触发一次事件。 <template> <div> <button @click="printDebounce">防抖</bu

2021-06-17 16:50:06 116

原创鼠标点击后，文字颜色改变

<template> <--导航条--> <div class="navList"> <p class="navgatorLi" :class="{checkColor:item.ischeck}" v-for="(item,index) in navgator" :key="index" @click="changeColor(index)" > {{item.title}}

2021-03-08 18:16:46 2013

原创点击导航栏内容，滚动到指定位置

<template> <div class=“home”> <-- 导航菜单--> <div class="navList"> <p class="navgatorLi" v-for="(item,index) in navgator" :key="index" @click="handleLeft(index)" > {{item.title}} </p> </div&gt

2021-03-08 18:02:54 1887

原创点击同一个按钮，切换内容

关于点击同一个按钮，切换内容的demo。vue.js html代码 <template> <div class="test">  <button @click="change()" :class="{active:index}">下一个</button>  <div id="tab"> <div v-show="index

2021-02-05 10:40:10 1339