你说个灯儿-CSDN博客

原创 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 1121

// 验证手机号是否合格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 524

转载封装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 950

原创列表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 159

原创兄弟组件之间通信

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 235

原创跑马灯插件 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 1201

原创上传图片文件封装

上传文件封装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 50

原创防抖和节流的区别

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

2021-06-17 16:50:06 78

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

<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 1931

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

<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 1720

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

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

2021-02-05 10:40:10 1266

yong_jin的博客