- 博客(15)
- 收藏
- 关注
RSS订阅原创 v-viewer 插件图片点击放大预览的几种使用方法
官网git地址：https://github.com/mirari/v-viewer最终效果如下：（ps:按钮样式都是可以根据自己需求调整的）第一种使用方法：支持UMD用法（建议把v-viewer相关的js和css文件下载到本地引用，可以到上面的那个git官网地址上下载）<link href="assets/js/viewer.css" rel="stylesheet"><script src="assets/js/vue.js"></script>..
2022-03-10 15:42:50
2346
1
原创 关于el-cascader 级联选择器的用法及接口取值赋值
级联选择器的基本用法可以参考官网（如果对于以下代码中的字段属性有疑虑的可以查看官网中其属性的具体用法）Element - The world's most popular Vue UI frameworkfilterableplaceholder="请选择":options="countryOptions":props="countryObj":show-all-levels="true"ref='countrySelectRef'@change="handleCountryChang
2021-11-30 11:56:31
8096
1
原创 记录el-cascader 级联选择器踩的坑
遇到的问题：级联选择器单选选择两次才会在input框回显数据先设置props的属性值 checkStrictly为 true props.checkStrictly = true来设置父子节点取消选中关联，从而达到选择任意一级选项的目的。如若还是无法显示，则不要加 v-model 即可...
2021-11-30 11:40:47
1643
5
原创 vue解决数据异步
父组件触发子组件事件时，需要传值过去，但是存在了数据异步的问题父组件：当在父组件直接使用this.$refs.childleft 来触发子组件中的方法时，父组件传过去的yearvalue值会有异步的情况出现解决办法有两种，第一种是在父组件中直接用this.$nextTick方法把事件包裹起来； // 触发年份选择器 handleChangeyear(value){ var that = this that.str1 = val..
2021-11-09 16:45:51
3168
原创 vue3.0安装element plus依赖
众所周知，vue3.0不支持element-ui的安装，想要使用element组件，只能安装element-plus第一步：安装依赖：（npm太慢的话可以使用淘宝镜像）npm install element-plus --save第二步：在main.js中引入import ElementPlus from 'element-plus';import 'element-plus/theme-chalk/index.css';注意：引入css样式的时候一定要注意路径不要写错了.
2021-11-09 16:06:43
2676
1
原创 修改element-plus 中表格样式
项目中的表格样式都是自定义，当我们用了第三方插件又想要改变他的样式，通常我们会找到他的css直接改掉他。但是如果是在scoped中直接修改是无法修改的。解决办法：1：如果你是使用less语言 可以直接用 /deep/ 来穿透，或者是 用 >>> 接class类名修改比如：#box/deep/ .el-button{}2：直接在公共样式中修改即可，...
2021-11-02 14:38:50
2152
1
原创 element-plus 设置为中文vue3.0
关于vue3.0中使用element-plus的日期控件，改为中文的方法，最终的效果如下（背景颜色是我改过了的，关于在plus中怎么改的动第三方插件的样式，我下一篇会说明）1：不需要在main.js中重新引入中文包，直接在app.vue文件中修改即可添加<el-config-provider :locale="locale">{{这里是内容区域}}</el-config-provider>标签，直接把内容区域全部包裹起来2：导入组件，可参考官网：国际化 |..
2021-11-02 14:32:32
2217
原创 vuex异步处理（vuex初探2）
使用场景：频繁切换需要调取接口数据的时候实现效果：tab页切换时，第一次切换时把数据接口存入store中。此后每一次从store中拿出缓存数据。没有重新派发接口数据第一步：在需要使用缓存数据的页面，mounted方法中定义。逻辑如下：“当数据长度为0的时候，发出ajax请求，否则则使用缓存数据”源码：mounted(){ if(this.$store.state.comingList.length===0){ //ajax请求
2021-06-29 10:27:26
589
原创 用vuex实现点击进入详情页底部导航隐藏的效果(vuex初探1)
第一：全局安装vuexcnpm install vuex --save第二：在项目中的src目录下新建store.js源码一起贴上，有需要的可以直接复制使用import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state:{ //自定义的共享状态 isTabbarShow:true }, mu..
2021-06-25 18:10:09
214
原创 使用sessionStorage 操作“点击关闭广告就不在出现”
通过setItem 创建一个值getItem 拿到这个值，进行逻辑处理完整代码//点击关闭隐藏图片存取数据$scope.handleClose=function(){ $scope.isShow = false sessionStorage.setItem("isClose", "1"); //sessionStorage.setItem 首先保存数据}//sessionStorage.getItem 然后读取数据进行分析，做行为效果，如果已经存储到了.
2021-06-25 14:40:55
86
原创 vue开发的项目要求PC页面兼容手机端
HTML：:class="[isPc?'pcPage':'mobilePage']"默认显示PC端代码，通过判断当前使用机型来选择显示PC还是手机的样式JS:data():{ retrun:{ isPc: true, }},methods:{IsPC() { var userAgentInfo = navigator.userAgent; var Agents = ["Android", "iPhone",
2021-06-25 14:25:43
803
原创 vue封装swiper插件
利用父子传参项目中新建Swiper.vue文件<template> <div class="swiper-container filmswiper"> <div class="swiper-wrapper"> <slot></slot> </div> <!-- 如果需要分页器 --> <div class="swi
2021-06-25 14:18:20
181
原创 vue中央事件总线 bus
项目中使用事件总线的时候建议新建一个文件夹，创建bus,然后再需要使用的页面引入文件即可在需要使用事件总线的组件中引用，import bus from './bus'beforeMount(){ bus.$on('myTabble',(data)=>{ this.isTabShow = data }) },另一个组件接收发来的数据 //进来隐藏底部导航 利用中央事件总线实现 bus总线 beforeMount(){
2021-06-25 14:08:38
103
原创 better-scrolly使用，平滑的滑动效果
安装npm install --save better-scroll在需要使用better-scroll的文件中引用需要注意的点（踩过的坑）：第一：最外层的div一定要设置一个固定高度，加一个overflow:hidden属性.better-scrolly才会有效果第二：设置滚动的内容区外层一定要多加一层div，否则无效。例如：第三：外层div的高度，可以等于页面文档的高度，利用:style动态获取第四：解决better-scrolly滚动条超出固定区域的问题，在最外层div中加
2021-06-25 14:02:01
154
原创 vue单页面window.onscroll监听滚动页面报错
mounted(){this.getBanner()window.onscroll=this.getScrolldata},解决办法：beforeDestroy(){window.onscroll=null}
2021-06-25 09:22:22
771
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人