Vue
关注
分享
扫一扫
文章平均质量分 73
Windyluna
一枚在 coding 道路上不断前进的程序媛。。。
展开
-
使用 阿里云 播放器播放 .flv 和 hls(.m3u8) 格式的视频流
使用 阿里云 播放器 播放.flv 和 hls（.m3u8）格式的视频流原创 2022-10-12 16:53:59 · 4370 阅读 · 2 评论 -
Vue 列表 懒加载 触底加载
Vue 列表懒加载 触底加载原创 2022-08-12 15:58:32 · 5229 阅读 · 2 评论 -
Vue+videojs+videojs-contrib-hl 实现.m3u8+hls视频流播放（可切换播放视频）
m3u8+hls视频流切换播放原创 2022-04-14 14:18:55 · 13428 阅读 · 11 评论 -
实现升序降序功能（Vue、CSS）
vue实现排序功能，css实现排序图标，javascript的sort方法原创 2022-01-10 10:50:55 · 3101 阅读 · 0 评论 -
Vue 可视化大屏适配方案
Vue 大屏适配 transform 属性缩放原创 2022-01-04 11:08:03 · 13046 阅读 · 1 评论 -
Vue keep-alive 应用场景及解决办法
keep-alive 缓存页面原创 2021-11-03 17:32:25 · 2050 阅读 · 0 评论 -
记录使用 Vant 过程中遇到的一些技术点
vant 知识点及疑难记录原创 2021-11-01 16:39:12 · 930 阅读 · 0 评论 -
记录使用 Vue 过程中遇到的一些技术点
1、Vue 刷新当前页面，并重新加载页面数据https://www.cnblogs.com/mica/p/10642194.html原创 2021-10-19 10:24:12 · 324 阅读 · 0 评论 -
Element 表格嵌套el-popover 多个popover切换时数据动态变化
要点：（1）点击时触发 popovertrigger="click"（2）展示 / 隐藏 popover@show="contentDetail(scope.row, scope.$index)"@hide="hidePopover(scope.row, scope.$index)"（3）切换 popover 时，在请求新数据时先要清空一下数据this.spanArr = []this.position = 0this.planList = []（4）根据数据动态合并单元格原理如：ht原创 2021-09-13 19:32:39 · 3219 阅读 · 0 评论 -
Echarts 柱状图 渐变色 自定义配置
最近在做图表，在实现效果的过程中，还是花费了些时间~~~，记录一下以便后续使用效果图：遇到的问题：（1）柱状图渐变色（2）每根柱子添加2px的圆角，柱子上堆叠部分的空白间隙在 series 中再配置 空白柱子（空白间隙）（3）背景虚线yAxis: { name: 'XX项', splitLine: { show: true, // 背景虚线 lineStyle: { type: [5, 7], dashOffset: 5, },原创 2021-09-01 10:10:26 · 2613 阅读 · 2 评论 -
Echarts 折线图 渐变色区域图 十字架
效果图：完整实现：<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title></title> </head> <body> <!-- 折线统计图 --> <div class="row"> <div id="part6" style="width: 1转载 2021-08-31 21:34:33 · 640 阅读 · 0 评论 -
Echarts 环形进度条 环形图嵌套
效果图如下其他效果：效果1：https://blog.csdn.net/weixin_41192581/article/details/104840199效果2：https://www.cnblogs.com/myprogramer/p/12509764.html注意：（1）最内层背景色、白色内框、进度条、外框，都是在 series 里设置 type为pie 的canvas（2）最内层背景色 和 背景色上的文字用 z: 2 和 zlevel: 100 提升层级文字在graphic中设置（原创 2021-08-31 21:20:11 · 2834 阅读 · 0 评论 -
Echarts 折线图 渐变色 不堆叠
好记性不如烂笔头，记录下方便后续使用~~~效果图：注意点：（1）hover 时，背景阴影、自定义提示内容tooltip: { trigger: 'axis', axisPointer: { type: 'shadow', }, formatter: (params) => { console.log('params', params) // // 获取xAxis data中的数据 let dataStr = `<div>原创 2021-08-31 20:49:46 · 1877 阅读 · 0 评论 -
element表格固定高度
需求描述：表格内容多，不使用分页，只在表格内容区域滚动，去掉滚动条，去掉滚动条复现及解决方法：固定表格高度.el-table { height: calc(100vh - 630px);}出现滚动条：去掉滚动条// 隐藏el-table的滚动条 (表格固定高度时，会出现滚动条)/deep/.el-table .el-table__body-wrapper::-webkit-scrollbar { width: 0px; /* 宽度为0隐藏 */}出现问题：1）右原创 2021-07-16 09:52:51 · 2349 阅读 · 0 评论 -
封装 axios
Vue 项目中使用 axios：在 main.js 中引入 axios：import axios from 'axios'Vue.prototype.axios = axios第一种：只封装统一的 url在 api.js 文件中：// export const baseUrl = 'http://xxx.xx.xx.xxx:1224/api/v1'export const baseUrl = '/apis/index.php/api/v1'export const register原创 2021-04-26 16:27:16 · 146 阅读 · 0 评论 -
记录使用 element 过程中遇到的一些需求
1、vue+element 实现长度显示为 “…” 和 移动到文字上方显示详情 【使用自定义指令】<el-table-column label="问卷名称" align="center"> <template slot-scope="scope"> <el-tooltip class="item" effect="dark" :content="scope.row.questionnaireName" placement="bottom-start">原创 2021-04-26 11:01:31 · 5870 阅读 · 0 评论 -
Windows下将前端vue项目部署到Nginx
1、官网下载 nginx 稳定版：http://nginx.org/en/download.html（如下载到 E:\nginx\nginx-1.18.0 目录中）2、双击运行 nginx，然后通过查看任务管理器，确定nginx是否已经执行。nginx默认端口号是80，如果端口号被占用，需要修改。3、将前端 npm run build 打包后的dist文件夹复制到 html 文件夹中4、修改 E:\nginx\nginx-1.18.0\conf\nginx.conf 文件（1）将 #user n原创 2021-03-15 17:58:21 · 3313 阅读 · 0 评论 -
Vue将后端返回的图片展示在img标签中
java后台返回如图：解决方法：this.axios .get("接口地址", { responseType: "arraybuffer", //重要 params: 传给后端的数据 }) .then(response => { return ( "data:image/png;base64," + btoa( new Uint8Array(response.data).reduce( (data,转载 2021-02-05 10:45:42 · 2566 阅读 · 0 评论 -
Vue pdf文件不预览直接下载
说明：使用 a 链接的 download 方法调用：this.downloadFile_1('文件名','url链接')本地无法下载的话，可以试试放到线上。文件名要加 .pdf 后缀方法一：downloadFile_1(fileName, filePath) { if (!filePath) { return } let url = window.URL.createObjectURL(new Blob([filePath])) let link = document原创 2021-02-04 15:40:48 · 2008 阅读 · 4 评论 -
Vue子组件修改父组件传来的值
第一种：父组件使用 v-if 调起子组件<!-- 编辑地址 --><div v-if="editDialogVisible"> <EditAddress :editData="editData" :editDialogVisible="editDialogVisible" @closeEditDialog="closeEditDialog"></EditAddress></div>子组件接收值：props: { editDial原创 2021-02-01 16:13:26 · 645 阅读 · 0 评论 -
Vue+Element 实现订单列表【管理端】02
效果图：代码实现：<template> <div class="merchantOrderManage"> <el-table :data="tableNewData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px" :cell-class-name="tableRowClassName" :header-cell-style="isCenter">原创 2021-01-28 14:39:42 · 2798 阅读 · 0 评论 -
Vue+Element 实现订单列表【管理端】01
效果：实现：<template> <div> <el-table :data="tableNewData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px" :cell-class-name="tableRowClassName"> <el-table-column prop="id" label="ID" width="180"&g转载 2021-01-27 17:31:19 · 2083 阅读 · 0 评论 -
Vue实现订单列表【用户端】
一、效果图二、实现原理代码：<table style="margin-top:20px;"><thead> <tr> <th>Month</th> <th>Savings</th> <th>Month</th> <th>Savings</th> <th>Month</th> <th&g原创 2021-01-27 17:14:43 · 2133 阅读 · 1 评论 -
Vue+Element+设置商品规格SKU
规格效果图：实现思路：设置商品规格填写商品规格后，会得到规格名 privateSpecName 和规格值 dynamicTags。如：this.privateGoodsItem = [ { privateSpecName:'颜色', dynamicTags:['红','蓝'] }, { privateSpecName:'尺寸', dynamicTags:['12'] }, { privateSpecName:'面料', dyna原创 2020-12-29 21:10:54 · 5622 阅读 · 9 评论