- 博客(11)
- 收藏
- 关注
原创 vue 局部刷新
1、在APP.vue中写入<template> <div id="app"> <!--v-if控制组件的更新渲染--> <router-view v-if="isRouterlive" /> </div></template><script>export default { //父组件给子孙提供一个方法,在需要使用局部刷新的组件中引入 provide() { ret
2022-03-14 15:27:54 1156
转载 vue 常用方法封装
// 验证手机号是否合格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 555
转载 封装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 964
原创 列表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> <.
2022-02-16 17:13:32 182
原创 兄弟组件之间通信
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 259
原创 跑马灯插件 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 1266
原创 上传图片 文件封装
上传文件封装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 79
原创 防抖和节流的区别
记录一下防抖和节流的区别防抖(debounce)防抖(throttle)防抖(debounce)示例环境:点击事件。倒计时n秒,只认最后点击的那一次。每一次点击都会重新计时,直到最后一次点击。从最后一次点击开始倒计时n秒,再触发事件。防抖(throttle)示例环境:点击事件。倒计时n秒,在n秒内不管点击多少次,只会间隔n秒触发一次事件。<template> <div> <button @click="printDebounce">防抖</bu
2021-06-17 16:50:06 87
原创 鼠标点击后,文字颜色改变
<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 1963
原创 点击导航栏内容,滚动到指定位置
<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>
2021-03-08 18:02:54 1776
原创 点击同一个按钮,切换内容
关于点击同一个按钮,切换内容的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 1280
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人