vue和react等项目中更简单的实现展开收起更多等效果示例

前言

本文题目中虽然写有vue和react,但是并非vue和react相关知识,而是最基本的html5和css3的一些知识,之所以写vue,是因为我最近项目中用到了类似效果,我用vue相关知识实现并不雅观,用html5和css3实现,则更加完美。

项目案例

项目中有如下效果:

好多展开收起,对于这个的实现,我一开始用了vue一些比较挫的dom操作,就是父元素toggleClass一个类名,进行子元素的显示和隐藏。

由于这个方法是通用方法,项目中好多地方使用,代码大概如下:

toggleShow() {
 let target = window.event.srcElement;
 if (target.nodeName == "SPAN") {
  target.parentNode.parentNode.classList.toggle("toggleclass");
  target.classList.toggle("el-icon-arrow-right");
 } else {
  target.parentNode.classList.toggle("toggleclass");
  target.children[0].classList.toggle("el-icon-arrow-right");
 }
}

这样写,既不友好,后期又难以维护。最近重构项目的时候,把这些地方都重构了,用了今天介绍的方法!更多重构要点,请点击vue项目重构技术要点这篇文章。

html5和css3实现展开收起

代码如下:

<details class="haorooms" open>
  <summary>图表参数</summary>
  <content>这里是包含的div等其他展示元素</content>
</details>

css代码

.haorooms{position:relative}
.haorooms summary{
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: 0;
}
/* 自定义的三角 */
.haorooms summary::after {
  content: '';
  position: absolute;
  left:0;
  top:0;
  width: 15px; height: 15px;
  background: url(./haorooms.png) no-repeat; /* 自定义的三角图片 */
  background-size: 100% 100%;
  transition: transform .2s;
}
.haorooms:not([open]) summary::after {
  transform: rotate(90deg);
}
/* 隐藏默认三角 */
.haorooms ::-webkit-details-marker {
  display: none;
}
.haorooms ::-moz-list-bullet {
  font-size: 0;
}

代码解释

html5的detail和summary本身就是一个展开收起的效果。假如不了解, 可以查看 。

隐藏默认三角如下:

.haorooms ::-webkit-details-marker {
  display: none;
}
.haorooms ::-moz-list-bullet {
  font-size: 0;
}

details和summary的ui优化

张鑫旭有篇文章,对details和summary介绍的很详细

对应其UI的优化,主要有如下几个方面:

1、小三角的优化,包括颜色、隐藏、位置、替换。
2、outline轮廓的去除

小三角颜色修改

.haorooms ::-webkit-details-marker {
  color: gray;
}
.haorooms ::-moz-list-bullet {
  color: gray;
}

小三角位置修改-右侧显示

.haorooms summary {
  width: -moz-fit-content;
  width: fit-content;
  direction: rtl;
}
.haorooms ::-webkit-details-marker {
  direction: ltr;
}
.haorooms ::-moz-list-bullet {
  direction: ltr;
}

outline轮廓的去除

我上面用的是

-webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline: 0;

这样对无障碍访问非常不友好,优化方案可以看张鑫旭大神的做法。

details和summary其他应用

1、更多效果

<details>
  <summary>
    <p>测试内容测试内容</p>
    <div class="more">
      <p>haorooms测试内容测试内容...</p>
    </div>
    <a>更多</a>
  </summary>
</details>

css代码

::-webkit-details-marker {
  display: none;
}
::-moz-list-bullet {
  font-size: 0;
  float: left;
}
summary {
  user-select: none;
  outline: 0;
}
.more {
  display: none;
}
[open] .more {
  display: block;
}
[open] summary a {
  font-size: 0;
}
[open] summary a::before {
  content: '收起';
  font-size: 14px;
}

2、悬浮菜单效果

CSS代码:

/* 隐藏默认三角 */
::-webkit-details-marker {
  display: none;
}
::-moz-list-bullet {
  font-size: 0;
  float: left;
}
summary {
  display: inline-block;
  padding: 5px 28px;
  text-indent: -15px;
  user-select: none;
  position: relative;
  z-index: 1;
}
summary::after {
  content: '';
  position: absolute;
  width: 12px; height: 12px;
  margin: 4px 0 0 .5ch;
  background: url(./arrow-on.svg) no-repeat;
  background-size: 100% 100%;
  transition: transform .2s;
}
[open] summary,
summary:hover {
  background-color: #fff;
  box-shadow: inset 1px 0 #ddd, inset -1px 0 #ddd;
}
[open] summary::after {
  transform: rotate(180deg);
}
.box {
  position: absolute;
  border: 1px solid #ddd;
  background-color: #fff;
  min-width: 100px;
  padding: 5px 0;
  margin-top: -1px;
}
.box a {
  display: block;
  padding: 5px 10px;
  color: inherit;
}
.box a:hover {
  background-color: #f0f0f0;
}
.box sup {
  position: absolute;
  color: #cd0000;
  font-size: 12px;
  margin-top: -.25em;
}

HTML代码:

<div class="bar">
  <details>
    <summary>我的消息</summary>
    <div class="box">
      <a href>我的回答<sup>12</sup></a>
      <a href>我的私信</a>
      <a href>未评价订单<sup>2</sup></a>
      <a href>我的关注</a>
    </div>
  </details>
</div>
<p>这里放一段文字表明上面的是悬浮效果。</p>

3、树形菜单效果

CSS代码:

/* 隐藏默认三角 */
::-webkit-details-marker {
  display: none;
}
::-moz-list-bullet {
  font-size: 0;
  float: left;
}
details {
  padding-left: 20px;
}
summary::before {
  content: '';
  display: inline-block;
  width: 12px; height: 12px;
  border: 1px solid #999;
  background: linear-gradient(to right, #999, #999) no-repeat center, linear-gradient(to top, #999, #999) no-repeat center;
  background-size: 2px 10px, 10px 2px;
  vertical-align: -2px;
  margin-right: 6px;
  margin-left: -20px;
}
[open] > summary::before {
  background: linear-gradient(to right, #999, #999) no-repeat center;
  background-size: 10px 2px;
}

HTML代码:

<details>
  <summary>我的视频</summary>
  <details>
    <summary>爆肝工程师的异世界狂想曲</summary>
    <div>tv1-720p.mp4</div>
    <div>tv2-720p.mp4</div>
    ...
    <div>tv10-720p.mp4</div>
  </details>
  <details>
    <summary>七大罪</summary>
    <div>七大罪B站00合集.mp4</div>
  </details>
  <div>珍藏动漫网盘地址.txt</div>
  <div>我们的小美好.mp4</div>
</details>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

您可能感兴趣的文章:

  • vuex中使用对象展开运算符的示例
(0)

相关推荐

  • vuex中使用对象展开运算符的示例

    使用场景 当需要进行vuex进行数据状态管理的时候,会使用到mapGetters,mapState,还有自身的计算属性的时候,这个时候就会用到这个了! 1.首先需要安装 npm install babel-plugin-transform-object-rest-spread -D 2.需要在.babelrc文件中新增以下 { "presets": [ ["env", { "modules": false }] ], "plugins&

  • vue和react等项目中更简单的实现展开收起更多等效果示例

    前言 本文题目中虽然写有vue和react,但是并非vue和react相关知识,而是最基本的html5和css3的一些知识,之所以写vue,是因为我最近项目中用到了类似效果,我用vue相关知识实现并不雅观,用html5和css3实现,则更加完美. 项目案例 项目中有如下效果: 好多展开收起,对于这个的实现,我一开始用了vue一些比较挫的dom操作,就是父元素toggleClass一个类名,进行子元素的显示和隐藏. 由于这个方法是通用方法,项目中好多地方使用,代码大概如下: toggleShow(

  • react项目中@路径简单配置指南

    目录 前言 1. 安装craco 2.根路径下创建 craco.config.js 3. 修改package.json文件的script字段 4.使用 补充:React 配置 @ 路径别名 总结 前言 无论是vue还是react开发,我们通常需要引入路径的便捷化配置,通常我们都会约定使用路径@作为根路径地址.如果是个人react开发的@路径简单配置 1. 安装craco yarn add @craco/craco 2.根路径下创建 craco.config.js const path = req

  • React文字展开收起组件的实现示例

    目录 前言 背景 开发 1.1 定义组件所需字段 1.2 获取截断后的文字 1.3 获取展开收起按钮 1.4 展开收起逻辑 1.5 完整代码 1.5.1 逻辑代码 1.5.2 样式代码 1.6 安装使用组件 资源 前言 最近想把在项目中封装的一些公用组件奉献出来,毕竟独乐乐不如众乐乐,好东西就要大家分享.这次还是来聊实战,主题就是文字展开收起组件的实现过程,这个需求在前端项目中也算常见的需求了,可能你已经在项目中使用了自己或别人封装的组件,但是这次还是希望你能耐心地看看我的实现过程,毕竟多一个思

  • VSCode使React Vue代码调试变得更爽

    目录 引言 用 VSCode 调试 React 代码 用 VSCode 调试 Vue 代码 总结 引言 作为前端开发,基本每天都要调试 Vue/React 代码,不知道大家都是怎么调试的,但我猜大概有这么几种: 不调试,直接看代码找问题 console.log 打印日志 用 Chrome Devtools 的 debugger 来调试 用 VSCode 的 debugger 来调试 不同的调试方式效率和体验是不一样的,我现在基本都是用 VSCode debugger 来调试,效率又高.体验又爽.

  • vue与react详细

    目录 一.全景图 二.背景 1.react:专业 2.vue:传奇 三.技术思想 1.key的异同为例 1.1 react 1.2 vue 2.diff的宏观比较 2.1 react 2.2 vue 3.生命周期 3.1 react 生命周期 3.2 vue生命周期 4.函数式编程 4.1 react hooks 4.2 vue3 组合式api 5.事件处理(@Click vs onClick) 5.1 vue 5.2 react 6.组件化 7.构建工具 8.其他 五.全家桶 一.全景图 二.

  • 一篇Vue、React重点详解大全

    目录 Vue 生命周期 MVVM 双向绑定原理 虚拟dom v-for为什么要用key nextTick v-show.v-if的区别 vue单页面应用如何首页优化 Vue 的父组件和子组件生命周期钩子执行顺序是什么 Vue 中的 computed 是如何实现的 React 不同之处 vue和react的区别 Vue 生命周期 vue2: 总共分为8个阶段:创建前/后,载入前/后,更新前/后,销毁前/后. 创建前/后: 在beforeCreate阶段,由于还未初始化,vue实例的挂载元素el和数

  • java初学者如何让编程学习起来更简单

    如果不喜欢学Java就不要学了,硬要逼着自己去学到头来也会是一知半解.不仅浪费时间,也浪费金钱,如果喜欢Java那就继续学,并且努力学,学好Java会有意想不到的好处.学习Java会有一个很艰难的过渡期,在此期间你要努力学好它并度过它,那么你就成功了.学任何东西,入门的时候,觉得难或者吃力是很正常的事情,小学生学习个加减乘除不也花了三四年的时间吗? 行百里者半九十,从0到1是最艰难最吃力的一步,先慢后快,怕的是中途放弃.而你当年读小学的时候却不会- 1.很多人还没学习JAVA就开始觉得java很

  • Vue和React中快速使用Electron的简单教程

    目录 提示: 前言 一.前提 二.在Vue和React中快速使用 1. 安装Electron 2. 运行成功后,打包成软件 总结 提示: 本篇文章只是教你简单上手,Electron本身功能是非常强大的,这里边的结合,只是能让你简单实现一个桌面应用程序!如需要复杂的配置electron,建议去参考官网~ 前言 对于我们来说Electron相当于一个壳子,可以把写好的网页程序嵌入到壳子里面,可以运行在桌面上的一个程序,可以把网页打包成一个在桌面应用程序,也类似我们平时做的套壳打包的5+app,简单来

  • vue和react中props变化后如何修改state

    目录 vue和react中props变化后修改state 改进 react改变state必须知道的知识点 1.不能直接修改state 2.state的更新是异步的 3.state的更新是一个合并的过程 state与不可变对象 vue和react中props变化后修改state 如果只想在 state 更改时重新计算某些数据,比如搜索框案例. vue <template> <div> <input type="text" v-model="filt

  • vue和react中关于插槽详解

    目录 简述Slot 基本插槽 vue基本插槽 react基本插槽 具名插槽 vue具名插槽 react具名插槽的讨论 模仿具名插槽 属性插槽 插槽传参 vue插槽传参 react:render-props 简述Slot slot插槽是Vue对组件嵌套这种扩展机制的称谓,在react可以也这样称呼,但是并不很常见.不过叫slot确实很形象. 这样的形式就是slot插槽: vue <template> <container-comp> <content></conte

随机推荐