Vue
一剑长歌
世界之大,学习不止
展开
-
vue卡片鼠标悬浮翻转效果组件
vue鼠标悬浮翻转卡片组件原创 2022-06-16 18:31:16 · 1129 阅读 · 1 评论 -
Vue单页面应用中动态修改title问题
问题:1、Vuejs 单页应用在iOS系统下部分APP的webview中 标题不能通过 document.title = xxx 的方式修改 该插件只为解决该问题而生(兼容安卓)2.在小程序嵌入Vue项目后,页面标题只有一个默认标题,不能根据路由改变解决办法:安装 vue-wechat-title 插件1. 安装npm install vue-wechat-title --save或yarn add vue-wechat-title2. 使用在main.js中引入impor转载 2022-01-21 11:05:38 · 817 阅读 · 0 评论 -
Vue中对滚动事件使用防抖和节流
在Vue中使用防抖和节流优化1. utils.js/* 防抖 */function debounce(func, delay) { let timer = null; return function () { if (timer) { clearTimeout(timer); timer = null; } timer = setTimeout(() => { func(...arguments); }, delay);原创 2022-01-15 20:35:27 · 1781 阅读 · 0 评论 -
VSCode自定义代码片段(快速创建vue组件模板为例)
1.打开VSCode,点击左下角设置图标,点击用户代码片段2.选择新建全局代码片段文件,输入一个文件名,然后按回车键3.将下面代码粘贴,之后使用 vue 加 tab键就可以快速打出vue模板"demo": { "prefix": "vue", "body": [ "<template>", "\t<div>", "\t\t$0", "\t</div>", "</template>"原创 2021-12-31 10:42:36 · 659 阅读 · 0 评论 -
Vue实现自定义tabbar
Vue实现自定义tabbar<template> <div class="tabbar footer"> <div class="tabbar-item" v-for="(item,index) in tabbarList" :key="index" @click="switchTab(item)"> <div class="tab_icon"> <img :src="item.pag原创 2021-11-19 14:31:00 · 1270 阅读 · 0 评论 -
移动端H5适配iphoneX底部栏解决办法
移动端H5适配iphoneX底部栏解决办法1、meta标签放入viewport-fit=cover<meta name="viewport" content="width=device-width...... viewport-fit=cover">2、css设置@supports (bottom: env(safe-area-inset-bottom)){ body, .footer(底部栏){ padding-bottom: constant(safe原创 2021-11-15 10:31:37 · 1684 阅读 · 0 评论 -
使用正则限制输入框输入内容
使用正则来让输入框只能输入数字字母,不能输入汉字,并且四位一空格我使用的是vant的field组件,但是和input是一样的<van-field placeholder="请输入密码" v-model="inputValue" @change="onChange" @input="onInput" @paste="onPaste" />正则方法format( data ) { return data.replace( /[^\w\s/]/ig, '' ).replace(原创 2021-11-12 11:24:35 · 3640 阅读 · 0 评论 -
Vue中使用v-for遍历对象
Vue中使用v-for遍历对象语法格式( value, key, index ) in Objectvalue ———— 值key ———— 键名index ———— 角标<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!--引入最新的vue稳定版本原创 2021-10-21 14:26:16 · 3050 阅读 · 0 评论