fixed="right"css 弹窗的标题字体大小.el-dialog__title { font-size: 18px}.el-ue!important;}.el-button{ border: 1...
原创
2023-04-21 19:55:49
444阅读
前言：最近重构的项目中有这样一个页面，一个固定表头和列的表格，表格列数较多，大概有60多列，200多条数据，而且表格需要实现拖拽滚动功能。 原页面的表格是用的一个比较老旧的表格插件实现，拖拽滚动是用iScroll.js实现的，性能很差，即使每页只有二、三十条数据，拖拽起来也严重卡顿。我首先使用了element-ui自带的的table组件实现了拖拽滚动的功能，性能稍微比老页面强了一点，每页50条数据
<template> <li v-for="(item,index) in workList" :key="index" class="workLi" :class="top[index]"> <div class="workListLeft"> <h3 class="workT"> <span>{ ...
转载
2021-09-27 14:50:00
131阅读
2评论
学习vue开发插件之【添加全局资源：指令/过滤器/过渡等】如 vue-touch，从看官方案例vue-touch的源码开始，代码目录结构如下： 一般从index.js为入口开始看文件，根据Vue.js的文件，插件应当有一个公开方法 install 。这个方法的第一个参数是 Vue 构造器，
概述在开发的时候，我们有时候会有这样的需求：由于表格的内容比较多，如果横竖都出现滚动条就看不到表头了，这就要求表格的表头和第一列固定，并且出现双向滚动条。本文就就给大家介绍一种通过css和两行js简单实现。效果实现思路1.区域划分如下图，将整个表格分为四个区域：1、左上区域需要单独出来，因为此区域不参与滚动；2、上部表头，需要固定在顶部并且参与横向滚动；3、左边表头，需要滚动并且参与竖向滚动；4、
主要思路导航栏固定 判断页面卷曲是否大于导航栏的offsetTop的值，超过了就证明导航栏到达了顶部，给导航栏添加固定样式的类名，注意：需要拿到导航栏固定前的offsetTop值，固定后的offsetTop值为0，会导致页面需要卷曲值为0时，导航栏才复位，中间会有一段突兀的情况。滑动到相应位置导航栏有对应选中样式 遍历锚点元素，当锚点元素占据屏幕显示的2/3区域时，通过排他思想给对应导航添加选中样
转载
2023-11-03 11:58:42
183阅读
<template> <div id='pondModel'> <span v-for='(item,index) in 6' :key='index' @mousedown="move" ></span> </div><template>methods: { move(e){ let odiv = e.target let disX =e.clientX - odiv.offsetLe
原创
2022-03-29 16:21:44
956阅读
## Vue iOS底部导航栏不固定
在移动应用开发中，底部导航栏（Bottom Navigation Bar）是一个常见的UI组件。在iOS应用中，底部导航栏通常是固定在底部的，而在Android应用中，底部导航栏通常是可以滑动的。本文将介绍如何在Vue中实现一个iOS风格的底部导航栏，并使其不固定。
### 1. 实现思路
要实现一个iOS风格的底部导航栏，我们可以使用Vue的路由功能结
原创
2023-11-24 10:37:50
89阅读
原理： 合并指定字段，按行遍历，相同的地方rowSpan设为0，第一行设为n（n行重复）；table代码：<a-table :columns="methodColumns" :data-source="PreData(methodData,1)" bordered></a-table>PreData里的参数：methodData为数据源，1为要合并的列顺序，目前的方法只可以
转载
2024-03-20 13:08:16
800阅读
顶部导航栏作为我们使用APP时每天都要遇到的组件，出镜频率极高，看似简单，其实我们在绘制界面的时候还是有许多细节需要注意的。本篇文章主要汇总了常见的四种顶部导航栏设计样式，希望能帮助大家更好地理解导航栏这个组件。常规导航栏所谓常规导航栏，主要是指固定在状态栏下，能清晰分辨出的一行导航栏，主要由操作图标、标题、搜索框、背景等组成，大致分成三种，分别是简单标题导航栏、搜索框导航栏以及Tab/分段控件导
# Vue移动端iOS底部元素不固定实现指南
在移动端开发中，尤其是iOS平台，底部元素的固定性常常会影响用户交互的体验。有时我们希望底部元素在滚动的时候不固定在视口中，而是随内容一起滚动。今天，我将带领你完成这一任务，确保你能顺利实现这一功能。
## 开发流程
为了更清晰地指导你完成任务，我们将整个流程分为若干个步骤。以下是具体步骤以及每一步的描述：
| 步骤 | 描述 |
|-----
# 如何实现 Vue 中 iOS 底部固定元素不显示
在开发移动端应用时，尤其是针对 iOS 设备的应用，底部的固定元素可能会因为浏览器的内置地址栏和工具栏的显示与隐藏而影响用户的体验。本文将教你如何在 Vue 中实现一个固定底部元素不显示的效果。
## 流程概述
我们将通过以下步骤来完成这个任务：
| 步骤 | 描述 |
|------|
24 栅格系统。 划分之后的信息区块我们称之为『盒子』。建议横向排列的盒子数量最多四个，最少一个。『盒子』在整个屏幕上占比见上图。设计部分基于盒子的单位定制盒子内部的排版规则，以保证视觉层面的舒适感。概述布局的栅格化系统，我们是基于行（row）和列（col）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来。下面简单介绍一下它的工作原理：通过 row 在水平方向建立一组 column
转载
2024-04-03 10:32:39
228阅读
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、实现基本table的封装二、如何食用总结 前言最近一个技术考核要实现 使用vue不依赖任何UI实现 封装一个公共的 table组件，基本的table功能，表头，行，列功能，api用法参看elementUI/antUI,实现固定表头和列实现按照列排序，实现合并单元格，花了我三天时间，也在网上看了很多资料，废话不多少，看
转载
2024-06-24 09:21:00
2091阅读
前言最近做移动端的h5项目，要做一个可配置表头的复杂...
原创
2021-08-30 15:29:59
2733阅读
1、需求：可以自定义设置表格表头展示哪些内容，如默认展示（图一），点击表格最后一列表格的图标弹出表头的全部字段（图二），经过设置之后（图三）图一： 图二： 图三：2、具体实现（因为还没确认表头默认展示和全部展示的数据是否是后台返回，所以自己写了静态数据）父组件：
<a-table
:columns="state.columns"
:row-key="(record) =&g
转载
2024-06-27 20:10:00
230阅读
{ "vue htm": { "scope": "html", "prefix": "vuehtml", "body": [ "<!DOCTYPE html>", "<html lang=\"en\">", "", "<head>", " <meta charset=\"UTF-8\">",
转载
2020-12-12 16:22:00
64阅读
网页制作中，通常用表格来以行和列的方式来组织数据。可能在使用中会遇到这种情况，我们所要列出的数据很多很长。这时候，浏览起来就很不方便，察看后面数据的时候不得不经常滚动到页面的上方来看看对应的表头。 这里介绍一个更好的方法，使用简单的CSS就能够实现表头固定的表格（在IE和Firefox、Mozilla下通过）。 这个方法是通过在一个两行一列的表格中，上面一行放置作为表头的表格，下面一行放置一个
写在前面本文主要介绍关于JS或Vue中如何进行表头，列固定，可以根据实际应用场景应用于原生，Vue，移动端，小程序中实际效果展示：对于列的固定，table中有对应的方法，但是如果列和表头都要固定，只能通过其他方式实现，如果您找到了更好的自身方法，还请斧正思路概述表头，列头，表格本身，这三个内容被分为了三块元素，将这三个内容进行抽离，并且通过定位和大盒子的包裹进行样式管理。【当要进行滚动时，只要对滚
转载
2024-05-14 21:11:44
749阅读
提要：vue-router 有两种模式，1、默认是hash模式，通过URL的hash来模拟URL。2、另一种history模式，它是利用history.pushStateAPI来模拟URL。只不过这次我选择history最主要的原因是：hash模式分享链接后有挺多坑。1、再BB下首先我们先提一下官方给予我们在History模式下服务器部署的帮助location / {try_files $uri
转载
2024-09-01 18:57:31
94阅读
