vue实现文字的展开与收起

2024-09-08

vue-文字块收缩与展开功能

在设计图中要求的效果为: 文字限制超过9行即隐藏,并显示“展开”按钮,点击按钮进行切换,控制文本全部展示和部分展示在原本的实现过程中,使用了红框内的判断方式: 页面代码: 样式则规定嵌套元素给一个死高度,通过对比来进行高度的修改但是发现打包以后,文字会出现被切割的情况,如下: 奇了怪了,又没规定死宽度,咋了你还自己切自己呢?于是想尽办法,都定位不到原因之后,发现 -webkit-box-orient: vertical; 这个属性,他不生效 ok现在总算有点出路了,但是原来那个写死高度

巧妙利用before和after伪类实现文字的展开和收起

需求:一段文字,当收起的时候,显示4行,并且多余4行的部分用省略号表示,关键是在省略号前面留有空白部分来放一些图标等东西:展开的时候,全部显示. 例如下面的示例图: 收起的时候: 展开的时候: 在不用JS的情况下,如何能只用CSS就做到呢? (一)先看下html结构 <div class="summary" data-content="天空为什么是蓝色×××"><p class="content">天空为什么是蓝色×××&

javasript简单实现文字的展开收起（无动画）

今天在工作遇到展开和收起的需求,在网上找了很多方法,今天来写一下我觉得比较简单的方法在项目中需要达到如图这种效果首先想的是使用overflow简单且粗暴,在需要展开的的文字定义样式 { overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; //实现文字超过两行后省略后显示 } 在vue项目中,定义一个标志状态,可以通过在展

Vue:列表展开和收起（超过一定行数时显示‘查看更多’按钮）

前言:前端小白记录的一些小功能~ 公司开发中的小程序中有做任务签到的功能,这就涉及到了任务列表以及对任务列表的展开和收起功能,好了可以开始了,说多了就烦了 1.首先是css样式,因为设计稿上是超过两行默认隐藏内容所以需要写if判断,代码如下: <ul> <li class="taskInfo" v-for="(item, idx) in bodyData.daily" :key="idx" v-if="idx <

长图的展开与收起（Android）

前言: 在app的文章中,经常会夹杂着一些特别长的长图.在阅读的时候需要滑动很久才能看图片下方的文字,因此对于长图只展示图片上面一部分,并且可以展开这个功能是很重要的. 效果: 基本思路: 利用scaleType的matrix属性以及直接改变图片的高度来实现图片的收起与展开. 过程: 开始尝试: scaleType属性介绍: center:保持原图的大小,显示在ImageView的中心.当原图的size大于ImageView的size,超过部分裁剪处理: centerInside:以原图完全显示

【Android】键盘的展开和收起

键盘的展开和收起主要使用到类InputMethodManager:http://developer.android.com/reference/android/view/inputmethod/InputMethodManager.html 其大致方法如下: public void hide_keyboard_from(Context context, View view) { InputMethodManager inputMethodManager = (InputMethodManager

js 点击展开、收起

//点击展开.收起 window.onload=function(){ var current=document.getElementsByTagName('li')[0]; document.body.addEventListener('touchend', function(e) { var src = e.target; var reg = /toggle/gi; var upReg = /up/gi; if(reg.test(src.className)) { src.className

GroupingView点击分组标题不展开，或点击标题部分文字不展开

GroupingView结构: 分组标题groupTextTpl是用两个DIV 来进行修饰的,在mouseDown时,EXT会查找css class=".x-grid-group-hd"的对象,如果找到则进行展开或收起的操作.而其标题前的加号或减号也是通过css进行背景控制的. 如果不希望点击分组标题就进行展开或收起的操作,只需将groupTextTpl放到<div class="x-grid-group-title">的外面,并在group

UITableView多层展开与收起

规则要求: tableview 有多层,类似于xcode文件目录的层级关系,每一个最开始展示的层姑且称之为根目录吧,并且,每个根目录下的层数不定. 与文件目录类似,每个目录下可以有不同层级的目录同时展开,但是同一层次中只有一层是展开的,即要展开B层次的某一层,则需要收起B层次所有其他的层级. 最底层是一个个文件,不能再展开(这里在业务逻辑上用处是:跳转到不同的页面). 想法: 整个界面是一个tableview,层级关系用cell中的label的位置展现,而tableview的数据源是一个一维数组

发布自己第一个npm 组件包（基于Vue的文字跑马灯组件）

一.前言总结下最近工作上在移动端实现的一个跑马灯效果,最终效果如下: 印象中好像HTML标签的'marquee'的直接可以实现这个效果,不过 HTML标准中已经废弃了'marquee'标签既然HTML标准已经废弃了这个标签,现在工作上用的是Vue,所以想着能不能自己也发布一个基于Vue的文字跑马灯组件包,这样别人可以通过npm install ...就可以用,想想还有点激动,于是开始我的第一个npm组件之旅! 二.用npm发布一个包有点惭愧,之前通过npm install ...安装pac

jQuery实现画面的展开、收起和停止

主要用到动画效果中的三个操作 ("#id").slideDown(3000): // 后面的数字表示效果的时长 ("#id").stop(); ("#id").slideUp(3000); 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>展开

div展开与收起（鼠标点击）

效果图: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>展开与收起</title> <style type="text/css"> body{ margin: 0 auto; padding: 0; } #pn{ background: #e8e8e8; width: 6

Silverlight自定义控件系列 – TreeView (3) 添加展开和收起事件

由于Writer嫌我文章过长,只能把上篇拆开两半了.以下是接着上篇的. 准备工作做完了,现在就要完成点击事件. 定义Expander和单击事件: 1: /// <summary> 2: /// The togglebutton for expanding or collapsing the items when mouse left button clicked on it 3: /// </summary> 4: private ToggleButton expander; 5:

vue当文字很多的时候实现...代替

vue当文字很多的时候实现...代替只需加三行代码 overflow: hiddenwhite-space: nowraptext-overflow: ellipsis

vue实现点击展开,点击收起

安装vue的步骤在这里就不进行赘述了,下面直接进入正题首先定义一下data里面的数据: data () { return { toLearnList:[ 'html','css','javascript','java','php' //进行显示的数据 ], showAll:false, //标记数据是否需要完全显示的属性 } } 使用computed对data进行处理: computed:{ showList:function(){ if(this.showAll == false){ //当

Vue 实现点击展开收起

Vue 展开收起功能实现之前写项目的时候提到了一个需求展开/收起所有内容的需求 .因之前一值是重构,自己写功能还是比较少的,于是网上搜了一下,发现很多东西其实是jq的功能虽然可以拿过来用,但是还是想使用vue 写出原汁原味的模块 demo: <div :class="is_show ? 'new_detail' : 'work_detail'">  <!-- 这里的is--show 就是true/fa

Vue多个元素展开收起

html: <div class="helpPages_main"> <div class="read" v-for="(item, index) in helpList" @click="showToggle(item)" :key="index"> <div class="header rela"> <h3>{{item.title}}

vue中遇到的一个点击展开或收起并且改变背景颜色的问题。

<template> <div class="expense-center"> <div class="fl expense-left"> <p class="left-titles">费用中心</p> <ul class="order-con"> <router-link to="/control-home/expense-center/

可以展开和收起的的LinearLayout

package com.loaderman.expandablelinearlayout; import android.animation.ObjectAnimator; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Color; import android.util.AttributeSet; import android.util.Log; im

展开、收起div的jQuery代码

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="

vue | vue实现列表同时展开与单独展开

需求:每个li标签在点击的时候,都同时展开. 但是碰见几个问题: 1.如果点第一个li 所有li都会展开: 2.点击第一个li,第一个li展开,点击第二个li,第一个li闭合,第二个li展开这两种情况都与预期不符,我们要求,点击第一个li展开,点击第二个li第一个li不闭合,第二个li展开,依次类推. 1.2是使用了v-show="activeIndex==index"导致的,因为数据是v-for遍历的,而activeIndex不是每个li私有的,是每个li公用的. 那么问题来了,如

vue实现文字的展开与收起

热门专题