Vue
叶子_o
这个作者很懒,什么都没留下…
展开
-
element-plus 自动识别两个 el-date-picker日期选择器大小,使开始日期小于结束日期
element-plus + vue3 ,两个单独的日期选择器,如果开始日期比结束日期大,就将其互换原创 2023-03-10 10:21:04 · 834 阅读 · 0 评论 -
element-plus el-table 点击单行修改背景色
element-plus el-table 点击单行修改背景色原创 2023-02-20 11:10:29 · 7275 阅读 · 4 评论 -
vite + ts + vue3 预览文件流格式 pdf
vite + ts + vue3 预览文件流格式 pdf原创 2023-02-17 10:48:47 · 1065 阅读 · 0 评论 -
Element日期选择控件 设置结束时间比开始时间多4小时
需求:不管开始时间设置多少,结束时间永远在开始时间的4小时后<el-form-item label="秒杀开始时间"> <template> <el-date-picker v-model="form.startTimeDate" type="datetime" placeholder="选择日期" /> </template></el-form-item><el-form-原创 2021-04-23 15:09:15 · 242 阅读 · 0 评论 -
vant日期选择 设置起始可选时间为3天后
需求:要求日期可选时间从今日(不包括今天)之后的三天开始选择。实现方式:Vue + vant 的 Calendar组件代码首先引入 Calendar 组件就不写了,直接下一步:<van-cell class="tl" title="期望发货日期" :value="date" @click="show2 = true" is-link/><van-calendar v-model:show="show2" @confirm="onConfirm1" :min-date="minD原创 2021-03-26 14:23:49 · 1461 阅读 · 1 评论 -
vue 项目 vant-tabs 初始化 下标 active 无效
需求:获取路由中的参数值,根据参数值 初始化active的值,效果如下初始代码:<van-tabs v-model:active="active" @click="onClick" swipeable title-active-color="#4EC8F2" line-width="19" line-height="2"> <van-tab v-for="(item, index) in tabs" :key="index" :title="item"> 这是内容 &转载 2021-01-06 14:21:05 · 9359 阅读 · 6 评论 -
Vue3 路由跳转与参数获取
路由跳转import { useRouter } from "vue-router"export default { setup () { const router = useRouter(); // 第一步 const state = reactive({ list: [], toDeatil(id) { router.push('/product?id=' + id); // 第二步 }, }) return {原创 2021-01-04 10:55:31 · 21489 阅读 · 0 评论 -
vue3.x 中使用 vant3.0 的 ImagePreview 组件遇到的问题
函数调用的方式使用起初,想和其他组件一样在公共文件中引入注册import { ImagePreview } from 'vant';Vue.use(ImagePreview);报错如下:后来改变了组件的引入方式,在需要使用的页面单独引入,就可以了import {ImagePreview} from "vant";import { reactive, toRefs } from 'vue'export default { setup () { const state = r原创 2020-12-28 16:57:47 · 2225 阅读 · 1 评论 -
Vue3 数据基础操作
一、知识点defineComponent 构建应用及绑定事件使用 reactive 绑定数据使用 ref ( torefs ) 绑定数据使用 getCurrentInstance 获取当前实例化对象上下文信息watch、watchEffect 数据监听简单的 TodoList 点餐功能实例一:使用 reactive 绑定数据<template> <div> <h1>使用 reactive 绑定数据</h1> <p&原创 2020-12-14 18:22:01 · 2541 阅读 · 0 评论 -
Vue3 生命周期钩子函数
一、Vue3生命周期钩子setup() : 开始创建组件之前,在 beforeCreate 和 created 之前执行,创建的是 data 和 methodonBeforeMount() : 组件挂载到节点上之前执行的函数;onMounted() : 组件挂载完成后执行的函数;onBeforeUpdate(): 组件更新之前执行的函数;onUpdated(): 组件更新完成之后执行的函数;onBeforeUnmount(): 组件卸载之前执行的函数;onUnmounted(): 组件卸载完原创 2020-12-14 14:01:53 · 27596 阅读 · 3 评论 -
vue使用EventBus实现页面内组件通信
EventBus是一种发布/订阅事件设计模式的实践。在vue中适用于跨组件简单通信,不适应用于复杂场景多组件高频率通信,类似购物车等场景状态管理建议采用vuex1.新建event-bus.jsexport default (Vue) => { const eventHub = new Vue() Vue.prototype.$bus = { /** * @param {any} event 第一个参数是事件对象,第二个参数是接收到消息信息,可以是任意类型 * @met.原创 2020-12-09 16:36:23 · 376 阅读 · 0 评论 -
Vue h5 调用微信扫码接口
需求调用微信扫码接口,然后获取扫码返回结果的url中的参数,携参跳转到其他页面1. 安装微信js-sdk通过yarn安装 yarn add weixin-js-sdk通过npm安装 npm i weixin-js-sdk2. 引用import wx from 'weixin-js-sdk'3. 代码methods:{ sysClick(val){ localStorage.setItem("clickType", val); // 产品需求的问题,多个按钮点击都原创 2020-10-28 15:12:28 · 1657 阅读 · 1 评论 -
Vue 移动端 hash模式下微信授权登录
需求分析:1.移动端微信公众号项目,需要获取微信授权进行登录2.默认打开首页,在路由进入之前进行判断,有如下三种情况3.本项目有两种账号类型:商家、企业,需在登录页进行选择未授权过,跳到微信授权登录页,然后再跳到登录页有授权过,并且本地有登录的用户信息,跳到首页有授权过,但本地没有登录的用户信息,跳到登录页我遇到问题的一些点:1.路由模式:hash因为hash模式下,url是带#的,微信授权登录时候的 redirect_uri 这里跳转后需要处理下。2.router.before原创 2020-10-28 14:13:43 · 4293 阅读 · 2 评论 -
Vue 移动端调用相机和相册实现图片上传
一、基础知识:1.只调用手机相册<input type="file" accept="image/*;" >2.只调用手机相机拍照<input type="file" accept="image/*" capture="camera">3.调用手机相册和拍照<input type="file" accept="image/*">二、项目代码:思路: 通过input标签调用手机的相册相机功能,获取图片文件,通过formdata传给后台,后台返回图片路径原创 2020-10-28 11:08:48 · 12231 阅读 · 20 评论 -
使用vue-qr生成带中间带图片的二维码
1.安装npm install vue-qr --save2.在页面中使用logoSrc:二维码中间的logo图size:图片尺寸text:二维码地址或内容margin:二维码图片的空白边距大小callback:生成后的回调函数,可获取二维码base64格式的图片数据<vue-qr ref="Qrcode" :logoSrc="imgUrl" :text="codeUrl" :size="200" :margin="10" :callback="callback" qid="test原创 2020-10-16 11:21:33 · 2439 阅读 · 0 评论 -
Vue中750设计稿px自动转化成rem
一、下载 postcss-pxtorem运行 npm install postcss-pxtorem完成下载之后,在package.json文件中添加这段代码"postcss": { // 新添加的 "plugins": { "autoprefixer": {}, "postcss-pxtorem": { "rootValue": 37.5, "propList": [ "*" ] } }},"browserslis转载 2020-09-30 15:35:54 · 1934 阅读 · 0 评论 -
解决页面v-for中修改item属性值后页面v-if不改变的问题
场景:模拟下拉框效果,点击事件触发循环出的属性值改变,控制下拉框的显示/隐藏。问题:打印出数据发生改变,但是视图没有变化,下拉框没有显示出来<div class="select_div" @click.stop="foucusDiv(index)"> {{item.platformType}} <div class="ul_list" @click="foucusDiv(index)" v-if="item.isShow" :ref="`list${index}`"&g转载 2020-09-27 17:45:44 · 623 阅读 · 1 评论 -
vue中使用wow.js+animate.css实现页面滚动加载元素动画
1.npm 安装 wow.js,安装后 animate.css 会自动安装npm install wowjs --save-dev或者使用yarn安装yarn add wow.js2.在main.js中引入animate.cssimport 'wowjs/css/libs/animate.css'3.在需要的组件中引入 wow.jsimport WOW from 'wowjs'...转载 2020-01-16 15:03:09 · 1411 阅读 · 0 评论 -
后端创文件流,前端使用axios下载文件
后端代码后端将要下载的数据转成输出流public void Export(HttpServletResponse response,List<ExamGrade> Listexamgrade)throws IOException { // 创建工作空间 Workbook wb = new XSSFWorkbook(); // 创建工作表 ...原创 2020-01-10 20:17:51 · 393 阅读 · 0 评论 -
Vue项目中swiper设置loop:true时点击事件失效
问题:项目中使用 swiper 时,设置 loop:true时,slides前后会clone若干个slide,从而形成一个环路,但是却不会复制绑定在dom上的click事件,导致复制的slides点击不会跳转。解决:不要将click事件绑定在dom上,而是在放在 on() 回调函数中调用。代码如下:<div class="swiper-father swiper-hot"> ...原创 2019-12-17 13:27:49 · 1545 阅读 · 0 评论 -
vue之通过v-for循环数组的长度进行v-if判断
使用场景:产品要求在有产品的时候正常显示产品,没有产品的时候显示提示文字“暂无商品”。错误的写法:<div class="dzsj_content" v-if="homeData[3]"> <div v-for='(item,index) in homeData[3]' :key='index' class="dz...原创 2019-12-13 15:05:23 · 6385 阅读 · 0 评论 -
Vue项目中使用swiper时的loop:true失效
问题描述:在写vue项目的时候轮播用到swiper插件,里面有一个loop属性设置为true时,会循环轮播,一开始是自己本地模拟的数据是可以实现的,但是当调用接口获取来的数据发现并不能循环播放原因:本地模拟的假数据是一直存在的,而后台获取的数据,页面dom一开始渲染的时候数据是为空的,所以导致不能循环播放解决办法:当获取到数据的时候再渲染dom生成即可。这里加一个判断 v-if="ho...转载 2019-12-13 14:19:47 · 493 阅读 · 2 评论 -
Vue项目中swiper轮播active图片居中并放大
项目中用的是vue-awesome-swiper,vue-awesome-swiper是基于swiper 4.0的。所以参数参考swiper 4.0。使用场景如下要求左右切换时每次只移动一个图片,中间的图片始终放大,其他图片有不透明度。解决思路在官方文档中,active slide默认是居左的,通过把centeredSlides设置为true可以使其居中,但是左边会空着。解决思路就是,在...原创 2019-12-13 13:44:40 · 6075 阅读 · 0 评论 -
vue的$nextTick()方法
$nextTick:是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM。场景:要获取v-for动态渲染的元素的数据进行操作,需要使用$nextTick()方法。this.$nextTick(function() { // 操作数据})...原创 2019-12-11 15:28:55 · 227 阅读 · 0 评论 -
vue-router 的重定向-redirect
开发中有时候我们虽然设置的路径不一致,但是我们希望跳转到同一个页面,或者说是打开同一个组件。这时候我们就用到了路由的重新定向redirect参数。redirect基本重定向我们只要在路由配置文件中(/src/router/index.js)把原来的component换成redirect参数就可以了。我们来看一个简单的配置。export default new Router({ route...转载 2019-12-09 09:01:21 · 19356 阅读 · 0 评论 -
vue-awesome-swiper自定义pagination样式
解决方案:给父标签设置一个id,例如父标签id=“parent”在sass/less中使用/deep/样式穿透#parent /deep/ .swiper-pagination-bullet{ background-color: 'red';}在stulys中使用:>>>实现样式穿透#parent >>> .swiper-pagination-...转载 2019-12-04 11:51:41 · 2365 阅读 · 0 评论 -
vue中8种组件通信方式
参考链接:vue中8种组件通信方式, 值得收藏!转载 2019-11-13 00:10:38 · 134 阅读 · 0 评论 -
vue知识点梳理(更新中)
1. v-html 和 innerHTML容易造成xss(跨域脚本攻击)2. v-if 的原理: DOM元素的插入删除/元素的创建与销毁3. v-if控制显示的元素包含多个标签时,r如果不希望改变结构,可以用template,但是v-show时不支持template<template v-if="show"> <div>123</div> <di...原创 2019-11-06 20:49:47 · 129 阅读 · 0 评论 -
vue 报错 data functions should return an object: 和 Cannot read property '__ob__' of undefined
在vue里出现data functions should return an object: 和 Cannot read property ‘ob’ of undefined 报错是因为在 data () {},里没有返回(return) 需要写成 data(){ return{ } } 就算没有数据也要写返回一个对象 (return)版权声明:本文为CSDN博主「L时光」的原创...转载 2019-10-25 22:56:21 · 441 阅读 · 0 评论 -
Vue组件中使用style scoped样式失效的问题
在开发项目中遇到在组件中添加样式不生效的情况。查找资料发现是因为style标签添加了scoped属性的原因。具体如下<style scoped> //样式添加了scoped .box{ color:red; } .text{ color:blue; }</style>浏览器渲染后://style.box[data-v-33f8e...原创 2019-10-25 22:11:57 · 1484 阅读 · 2 评论 -
eslint检测报错error Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style
在.eslintrc文件 rules 里面 配置 “linebreak-style”: [0 ,“error”, “windows”], //允许windows开发环境原创 2019-10-24 19:17:30 · 211 阅读 · 0 评论 -
vue2.x+vue-cli 解决兼容IE8以上问题
npm方式npm install babel-polyfill -D在代码入口文件顶端加入import "babel-polyfill"打开webpack配置文件,找到entry字段,修改它:entry:['babel-polyfill','./main.js']//假设这里的main.js是代码入口主文件添加rules规则 这里要配合babel-loader使用,如果没有...转载 2019-10-23 21:13:36 · 750 阅读 · 0 评论 -
让 vscode 的 eslint 错误提示在 vue 文件中生效
在 vscode 的设置表中加这一句即可:"eslint.validate": [ "javascript", "javascriptreact", { "language": "vue", "autoFix": true }]原创 2019-10-20 23:13:30 · 538 阅读 · 0 评论 -
$refs获取dom和组件实例
$refs 用于获取dom和组件实例ref只能识别一个,不能给多个元素设置相同的ref遇到循环,获取的是数组形式的多个元素<div id="app"> // ref放在dom中,用于获取dom <div ref="myDiv"></div> <template v-for="i in 3"> <div ref="myDom"&g...原创 2019-06-20 19:32:37 · 1043 阅读 · 0 评论 -
vue组件通信实例----实现折叠菜单
知识点:插槽组件通信$parent : 获取父组件的实例$children : 获取子组件的实例(是一个数组)<style> .title{ width:120px; line-height:30px; border:1px solid #333; }</style><div id="app"> <collapse>...原创 2019-06-20 11:35:58 · 563 阅读 · 0 评论 -
vue组件及使用
1.全局组件组件是一个特殊的实例。全局组件通过Vue.component()方法定义<div id="app"> <!-- 组件使用:当自定义标签,真正渲染的是组件的template--> <!--dom元素的模版中必须用双标记,不可用单标记,因为有时会出问题--> <my-button></my-button> <m...原创 2019-06-20 10:12:20 · 240 阅读 · 0 评论 -
vue生命周期钩子
<div id="app"> {{num1}} {{num2}}</div<script> let vm = new Vue({ el:"#app", data:{ num1:10, num2:20 }, // 假如有template,则优先级高于el template: ` <h1>hello vue<...原创 2019-06-19 17:39:13 · 131 阅读 · 0 评论 -
computed实现全选和反选
<div id="app"> 全选<input type="checkbox" v-model="checkAll"/> <br> <input type="checkbox" v-for="(item,key) in checks" v-model="item.value" :key="key" / ></div><sc...原创 2019-06-19 10:57:20 · 509 阅读 · 0 评论 -
watch、methods和computed的区别
methods与computedmethods方法 使用时不会缓存computed 计算属性 本质上是一个方法,使用时当作属性来使用计算属性具有缓存,只有当其依赖的数据发生改变时,才重新执行watch与conputed尽量优先使用computed,因为代码简洁需要处理异步时,用watch,watch支持异步...原创 2019-06-18 21:38:20 · 230 阅读 · 0 评论 -
Vue -- 模版解析
模版<div id="app"> <div> <input v-model="title" /> <button @click="todo">submit</button> </div> <ul> <li v-for="item in list">{{item}}</li>...原创 2019-05-13 21:03:55 · 1547 阅读 · 1 评论