vue.js
文章平均质量分 50
A-sleep
多云
展开
-
极验geetest的使用
1.新建/utils/gt3.js。2.mixins文件夹下。原创 2022-10-14 11:18:41 · 1322 阅读 · 0 评论 -
el-tooltip配合el-button禁用时显示提示
比如项目中有这样的一个需求,就是在某个页面上有一些按钮,这些按钮的状态不固定。所以总结下来就是:如果是禁用状态,当鼠标悬浮的时候,出现文字提示;饿了么ui中的el-tooltip组件具有开启和关闭的功能,但是如果我们直接把组件套在el-button外面,我们会发现,el-tooltip无法开启了,好像也被el-button的禁用,无法打开了。解决方案就是在el-button的外层,再加上一个div包裹起来,这样的话,类名el-tooltip就会加到div身上,就不会受到按钮禁用的影响了。原创 2022-10-12 16:21:37 · 3966 阅读 · 2 评论 -
Vue中echarts的使用将接口返回的数据渲染出来
vue项目中使用echarts:1.安装依赖yarn add echarts -S2.文件中引入echarts (所有图表)import * as echarts from 'echarts'3.hello.vue组件<div id="myChart" :style="{width: '100%', height: '380px'}"></div>export default { data() { return { ...原创 2022-04-23 18:23:53 · 3706 阅读 · 1 评论 -
小程序 uni.previewImage 实现图片预览
uni.previewImage是uniapp提供的预览图片的方法渲染轮播图区域1.使用 v-for 指令,循环渲染如下的轮播图 UI 结构:<!-- 轮播图区域 --> <!-- 小圆点 / 自动轮播 / 轮播间隔时间 / 当前页轮播开始到结束耗时 / 无缝衔接轮播 --><swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true"原创 2022-04-16 09:25:06 · 3230 阅读 · 0 评论 -
uniapp小程序 subPackages分包加载配置
使用场景:uniapp开发各种小程序时候遇到主包过大,无法上传的情况uniapp的分包机制: 参照官网uniapp subPackages使用小程序启动时,默认会下载主包并启动主包内页面,当用户进入分包内某个页面时,会把对应分包自动下载下来,下载完成后再进行展示。此时终端界面会有等待提示。所以分包后的页面是在打开分包内的某个页面以后才会加载分包的内容每个使用分包小程序必定含有一个主包。所谓的主包,即放置默认启动页面/TabBar 页面,以及一些所有分包都需用到公共资源/JS 脚本;而分包则是根据开发者原创 2022-04-15 14:11:35 · 2855 阅读 · 0 评论 -
uniapp 分类筛选及结构
效果实现:整体思路:1.定义页面结构如下<template> <view> <view class="scroll-view-container"> <!-- 左侧的滚动视图区域 --> <scroll-view class="left-scroll-view" scroll-y :style="{height: wh + 'px'}"> <view class="left-scr原创 2022-04-15 13:28:45 · 4025 阅读 · 0 评论 -
移动端 REM 适配 报错处理:PostCSS plugin postcss-pxtorem requires PostCSS 8. Migration guide for end-users:
Vant 中的样式默认使用 px 作为单位,如果需要使用 rem 单位,推荐使用以下两个工具:postcss-pxtorem 是一款 postcss 插件,用于将单位转化为 remlib-flexible 用于设置 rem 基准值1.下载 postcss-pxtorem 和 lib-flexible 包> yarn add amfe-flexible> yarn add postcss-pxtorem2.main.js 中 import ‘amfe-flexible’ 加载原创 2022-04-08 19:59:51 · 1774 阅读 · 0 评论 -
Vue中 使用vue-particles(粒子背景)插件美化登录页面
使用方法:1、安装插件npm install vue-particles --save-devyarn add vue-particles2、在main.js文件中全局引入import Vue from 'vue'import VueParticles from 'vue-particles'Vue.use(VueParticles)3、在需要使用粒子背景的组件中使用 <div class="vue-particles"> <vue-particles原创 2022-04-05 22:29:30 · 1516 阅读 · 0 评论 -
Vue 中 使用qrCode插件 实现二维码 // 以及 Promise.all的使用
二维码功能将来工作中也很常见, 我们需要根据信息 或者 链接地址, 生成一个二维码! 比如: 做地址分享, 做手机图片预览等这里给大家进行演示操作 , 基于 (图片地址 / 网页地址) 生成二维码首先,需要安装生成二维码的插件$ yarn add qrcodeqrcode的用法是 ---- 在ES5中使用 QrCode.toCanvas(dom, info) <el-table-column label="头像" prop="staffPhoto" sortable=""&.原创 2022-03-31 10:36:16 · 1590 阅读 · 0 评论