vue
知命者夏洛特
这个作者很懒,什么都没留下…
展开
-
vue数据中遇到/n就换行,/t就缩进
vue数据中遇到/n就换行,/t就缩进原创 2022-09-13 15:27:55 · 828 阅读 · 1 评论 -
vue hash模式下路由改变页面不刷新问题
//js原始方法刷新,相当于按F5刷新页面,会有短暂的白屏,相当于页面的重新载入//js原始方法刷新,相当于按F5刷新页面,会有短暂的白屏,相当于页面的重新载入hash模式下路由改变页面不刷新问题在App.vue文件中添加:export default { mounted () { // 检测浏览器路由改变页面不刷新问题,hash模式的工作原理是hashchange事件 window.addEventListener('hashchange', () => { ..原创 2022-04-08 16:22:05 · 4288 阅读 · 0 评论 -
利用GitPage+VuePress搭建个人博客
工具:github、VScode第一步:在github上创建一个名为username.github.io的项目,选择Public公开,然后保存,进入到这个项目中,找到Settings--点击左侧的Pages,设置分支资源Source,然后打开Your site is published at后面的地址第二步:拉取代码git clone [email protected]:xxxx/username.github.io.git,新建index.html文件,git add ....原创 2022-03-07 18:19:01 · 535 阅读 · 0 评论 -
微信浏览器打开H5页面底部导航栏(左右箭头)固定或隐藏(vue)
解决iphone进入微信公众号跳转页面后底部会出现一行回退前进按钮 上下滑动时可以隐藏和显示该栏 但是快速滑动时底部的的状态栏会等浏览器中状态栏全部消失后才会掉落至底部,并且按住滑动慧出现一段底部页面穿透,效果不好。所以下面这个方法上让导航栏在上下滑动的时候固定不动把底部导航栏固定在不动方案:分两步第一步:在meta标签上加viewport-fit=cover<meta name="viewport" content="width=device-width,initial-..原创 2021-12-09 18:47:30 · 14274 阅读 · 2 评论 -
vue实现弹窗选择
1、创建一个ImproveResume.vue<template> <div class="release-post"> <div class="header"> <img class="header_left" src="./images/left_header.png" alt="" @click="clickGoBack" /> &l..原创 2021-10-11 16:41:04 · 2997 阅读 · 0 评论 -
linkedme前端H5跳转客户端【从微信分享卡片某详情页点击打开app,回到app某详情页vue】
需求:从app分享一个文章详情到微信,用户打开分享卡片,进入到详情页,详情页有个按钮【打开app】,点击按钮回到app里面的详情页linkedme官方文档ShowDoc1.服务端会返回linkedMe的keyId【linkedMeKey.keyId】以及跳转的链接Url【linkedMe】; 2.param用于原生客户端和客户端判断具体跳转位置;具体在vue实现分三步:第一步: 在index.html里面引入<script src="https://static.lkm..原创 2021-10-08 10:30:46 · 858 阅读 · 0 评论 -
列表数据滚动曝光埋点和点击埋点
使用的IntersectionObserver API<template> <div class="job_list" v-if="showList.length > 0"> <div class="title">列表title</div> <van-list v-model="loading" :finished="finished" finished-text="我们是有底线的~原创 2021-09-21 18:07:22 · 621 阅读 · 0 评论 -
vue 移动端弹窗后禁止页面滚动 @touchmove.prevent
vue 移动端弹窗后禁止页面滚动 @touchmove.prevent可以在遮罩层中添加@touchmove.prevent 就可以实现禁止页面滚动注意 弹窗里面有滚动条的也是无法滚动的 <div class="popup" @touchmove.prevent></div>.popup { width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.6);}.popup-content { .原创 2021-08-18 18:16:31 · 10262 阅读 · 4 评论 -
解决移动端click事件延迟300ms和点击穿透问题
npm install fastclickimport FastClick from 'fastclick';mounted(){ FastClick.attach(document.body)}原创 2021-08-18 15:00:15 · 103 阅读 · 0 评论 -
解决Vue提交按钮重复点击重复提交问题防抖
111、创建js文件preventReClick.jsexport default { install (Vue) { // 防止重复点击 Vue.directive('preventReClick', { inserted (el, binding) { // console.log("binding-7", binding) el.addEventListener('click', () => { ...原创 2021-08-18 14:39:39 · 1496 阅读 · 0 评论 -
vue传参父到子,子到父,跳转等
页面传参:父到子:props传参,写在子组件上:title="title"// 父级页面<template> <div> <DefaultPage :title="title"></DefaultPage> </div></template><script>import DefaultPage from './DefaultPage'export default { name: '原创 2021-08-10 18:55:04 · 218 阅读 · 0 评论 -
项目启动报错
npm run serve 启动项目报错vue.js 进行初始化遇到的关于core-js的错误@core-js/modules/es6.array.find-index]解决链接:https://blog.csdn.net/qq_40999917/article/details/106575086Failed to compile with 60 errors ...原创 2021-07-29 16:15:08 · 7772 阅读 · 0 评论 -
vue实现动画旋转
这是jQuery实现地址:https://www.jq22.com/jquery-info17962<template> <div> <div id="advert"> <div class="bg1"> <div> <img src="././icons/icon-01.png" alt="" class="icon01" /> <i.原创 2021-07-26 16:59:15 · 3014 阅读 · 1 评论 -
VUE上下轮播实现
<template><div> <div :style="{ height: height * lineNum + 'px' }" class="rollScreen_container" id="rollScreen_container" > <ul class="rollScreen_list" :style="{ transform: transform }" :clas...原创 2021-07-26 16:45:43 · 946 阅读 · 0 评论 -
vue实现底部弹窗多选
<template> <div class="release-post"> <div class="resume_main"> <div class="resume_content"> <van-form> <div class="table_list post_welfare"> <p class="name_title"&...原创 2021-07-20 10:52:33 · 2106 阅读 · 1 评论 -
vue中Swiper轮播分发
父组件:AswiperDemo.vue<template> <div class="content"> <div class="head"> <img src="./images/2.jpg" alt="" class="head_img" /> </div> <div> <div class="text_line"> <span class=.原创 2021-07-19 19:40:27 · 93 阅读 · 0 评论 -
从0到1构建一个项目(超详细)
首先注册一个gitHub,登录进去以后创建一个新的项目,一:创建一个新项目,起一个项目名称,选择Node节点二: npm安装,npm官网,根据mac或window下载对应的版本下载完成后,双击安装,直到Finish完成安装打开终端 (控制命令行程序(CMD)) 或者 iTerm2,查看node和npm版本也可以使用淘宝镜像cnpm因为国内直接使用npm 的官方镜像是非常慢的,这里推荐使用淘宝镜像cnpmnpm install -g ...原创 2021-07-14 17:29:45 · 2108 阅读 · 0 评论 -
vue页面模板(包含header,main,footer)-兼容iPhoneX顶部刘海和底部留白
页面分成header,main,footer在header里面最外层加样式:padding-top: constant(safe-area-inset-top);padding-top: env(safe-area-inset-top);在main内容部分要加上.main { padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top); padding-bottom:..原创 2021-07-12 16:20:38 · 1657 阅读 · 0 评论 -
vue列表左滑删除
<template> <div class="container"> <ul> <li class="list-item" v-for="(item, index) in list" data-type="0" :key="index" > <div class="list-box" @t...原创 2021-07-12 15:41:38 · 709 阅读 · 0 评论 -
vue从下往上滚动广告
<template> <div class="roll" v-show="cardBuyers && cardBuyers.length > 0"> <div class="roll_cont"> <div :class="{ marquee_top: animate }" class="roll_con"> <div class="roll_box" v-for="(item, ...原创 2021-07-12 15:39:56 · 228 阅读 · 0 评论 -
vue实现点击Tab切换+滑动内容切换
要借助vant中的Tab,Tabshttps://youzan.github.io/vant/#/zh-CN/tab<template> <div id="search-result"> <div class="pool_main"> <Tabs class="tabs" swipeable> <Tab title="全部的数据"> <!-- <JobListNe...原创 2021-07-12 15:32:09 · 4358 阅读 · 0 评论 -
vue实现下拉刷新,分页加载数据
需要借助vant的PullRefresh实现:https://youzan.github.io/vant/#/zh-CN/pull-refresh<template> <div class="refresh-jobs"> <div class="main" v-show="boutiqueList && boutiqueList.length > 0"> <div class="refresh_main"&g...原创 2021-07-12 14:46:15 · 969 阅读 · 1 评论 -
vue+echart实现双柱状图
一:安装版本号建议安装"echarts": "^4.8.0”,其它版本init会报错1、 首先需要安装echarts依赖包npm install --save [email protected]、 或者使用国内的淘宝镜像:npm install -g cnpm --registry=https://registry.npm.taobao.org<template> <div class="echarts_con"> <div ...原创 2021-07-08 16:58:11 · 383 阅读 · 0 评论 -
vue从下往上滚动广告栏
两种实现方式:个人更倾向第二种第一种://第一种实现方式:<template> <div class="roll" v-show="cardBuyers && cardBuyers.length > 0"> <div class="roll_cont"> <div :class="{ marquee_top: animate }" class="roll_con"> <div原创 2021-07-08 16:54:15 · 579 阅读 · 0 评论 -
vue导航栏切换内容
<template> <div class="revenue_page"> <div class="reven_main"> <div class="reven_nav"> <div :class="{ 'li-activate': navIndex == index }" v-for="(item, index) in menuItems" :ke...原创 2021-07-08 16:27:12 · 1401 阅读 · 0 评论 -
vue可内容可滚动弹窗2
在index.vue页面中弹出弹窗<template > <div @click.stop="clickDetails"> <span>点击弹出弹窗</span> <!-- 弹窗--> <ActivityRules v-show="isRulesShow" :show="isRulesShow" @closeModal="closeModal" :dataL...原创 2021-07-08 15:45:54 · 921 阅读 · 0 评论 -
Vue实现在移动端横向滚动
<template> <div class="resume-list"> <div class="pool_main"> <div class="tags"> <div class="tag" v-for="(item, index) in tags" :key="index" @click="clickTag(item, ind...原创 2021-06-13 21:49:36 · 1746 阅读 · 2 评论 -
vue实现折叠收起功能-展开收起功能
<template> <div class="resume-list"> <div class="preview_header"> <div class="header"> <img class="header_left" src="../images/left_icon.png" alt="" @click="clickGoBack.原创 2021-06-13 21:38:34 · 2542 阅读 · 2 评论 -
vue点击事件刷新其他组件
组件1<div @click="onClick()"> 去完成 </div>onClick () { this.$emit('score-change')},原创 2021-05-31 14:42:24 · 1643 阅读 · 0 评论 -
css实现 进度条
<div class="container"> <div class="progress" :style="{ width: (0.5 / item.max) * 100 + '%' }" ></div> </div>%progress { height: 3.5px; border-radius...原创 2021-05-31 14:26:50 · 927 阅读 · 0 评论 -
vue学习网站整理
插件vant https://youzan.github.io/vant/#/zh-CN/changelog原创 2021-05-28 12:17:49 · 602 阅读 · 0 评论 -
解决安卓手机在移动端弹出键盘时把底部按钮顶上去问题(vue)fixed失效
网上查找的地址链接转载 2021-05-28 11:42:51 · 683 阅读 · 0 评论 -
Vue textarea 和input 开发ios点击空白地方键盘不收起问题
vue h5 ios点击屏幕不收起键盘--链接Vue textarea 和input 开发ios点击空白地方键盘不收起问题1、创建一个index.js文件//index.js//解决ios点击屏幕空白出不收起键盘export function objBlurFun (sDom, time = 100) { let isIphone = navigator.userAgent.toUpperCase().includes('IPHONE') // 判断ios环境 if (isI.原创 2021-05-26 19:02:53 · 1074 阅读 · 0 评论 -
vue上传图片
<template> <div class="textarea"> <Field required label="上传图片"> <template #input> <Uploader :after-read="uploadFile" v-model="idFront" :multiple="false" :max-count="1".原创 2021-05-25 15:18:00 · 110 阅读 · 0 评论 -
vue实现textarea框,文字高度自适应
vue实现textarea框,文字高度自适应,https://blog.csdn.net/qq_38128179/article/details/103591717下面是两种方式,注释掉的是一种,不可以输入字数超出100字,另一种是可以超出,超出字数变红提示<template> <div class="textarea"> <!-- <Field v-model="memo" rows="5" ...原创 2021-05-25 12:12:28 · 2839 阅读 · 0 评论 -
rem兼容安卓手机(vue)
创建一个resize.js文件```//resize.jsexport function resize () {var htmlEle = document.documentElement;var htmlWidth = window.innerWidth;if (!htmlWidth) return;if (htmlWidth >= 750) {htmlEle.style.fontSize = '100px';} else {htmlEle.style.fon原创 2021-05-25 11:47:49 · 336 阅读 · 0 评论 -
vue弹窗—内容可滚动
效果图:代码:<template lang="html"> <div v-if="show" class="modal-bg"> <div class="modal-container"> <div class="modal_main"> <p class="modal-header">活动规则一</p> <div class="rules_text">原创 2021-02-04 14:33:51 · 1354 阅读 · 0 评论 -
vue+echart实现双柱状图
效果图:一:安装版本号建议安装"echarts": "^4.8.0”,其它版本init会报错1、 首先需要安装echarts依赖包npm install --save [email protected]、 或者使用国内的淘宝镜像:npm install -g cnpm --registry=https://registry.npm.taobao.org<template> <div class="echarts_con"> <div class原创 2021-02-04 11:19:29 · 1465 阅读 · 0 评论 -
vue列表左滑删除
<template> <div class="container"> <ul> <li class="list-item" v-for="(item, index) in list" data-type="0" :key="index" > <div class="list-box" @touchst原创 2021-02-04 10:51:53 · 213 阅读 · 0 评论