Comments (4)
Wscats
commented on July 19, 2024
directive('textfold', function() {
return {
restrict: 'EA',
template: '<p style="font-size: 14px; border-left:5px solid #dddddd; padding: 10px; padding-bottom: 10px; margin-bottom: 15px; margin-top: 15px;">' + '<span id="textfold" style="display:block; overflow:hidden;">{{designer.des}}</span>' + '<br id="br" />' + '<span id="isMore" style="color: #1bb7ac; position: relative; bottom: 10px;" ng-click="more(this)">{{isMore}}</span>' + '</p>',
link: function(scope, element, attrs) {
var height;
var maxheight;
var minheight = 23;
function textfold() {
height = angular.element('#textfold').height();
maxheight = angular.element('#textfold').height();
}
scope.$watch('designer.des', function(data) {
if (data) {
document.getElementById('textP').style.display = 'block';
textfold();
scope.more();
scope.status();
}else{
document.getElementById('textP').style.display = 'none';
}
})
var isExtend = true;
scope.isMore = "查看更多";
scope.status =function(){
if(maxheight<=minheight){
//scope.isMore = "";
document.getElementById('isMore').style.display = 'none';
document.getElementById('br').style.display = 'none';
}
}
scope.more = function() {
if (isExtend) {
if (height >= minheight) {
document.getElementById('textfold').style.height = height + "px";
setTimeout(function() {
scope.more();
}, 1);
height -= 10;
} else {
scope.isMore = "查看更多...";
scope.$apply();
isExtend = !isExtend;
height += 10;
document.getElementById('textfold').style.height = "20px";
}
} else {
if (height <= maxheight) {
document.getElementById('textfold').style.height = height + "px";
setTimeout(function() {
scope.more();
}, 1);
height += 10;
} else {
scope.isMore = "折叠";
scope.$apply();
isExtend = !isExtend;
height -= 10;
}
}
}
}
}
});
这里我后来再改进一下，就是增加设置默认展示的高度
var minheight = 23;
这个是可以自己改的，我这里23px，刚好是font-size为14px，height为20px时候显示一行
from articles.
Wscats
commented on July 19, 2024
修复移动端的折叠文字出现的问题
主要增加{{isMore2}}来展示折叠文字，如果绑定在{{isMore}}上面在移动端会出现部分显示问题
directive('textfold', function() {
return {
restrict: 'EA',
template: '<p style="font-size: 14px; border-left:5px solid #dddddd; padding: 10px; padding-bottom: 10px; margin-bottom: 15px; margin-top: 15px;">' + '<span id="textfold" style="display:block; overflow:hidden;">{{designer.des}}</span>' + '<br id="br" />' + '<span id="isMore" style="color: #1bb7ac; position: relative; bottom: 10px;" ng-click="more(this)">{{isMore}}</span>' + '<span id="isMore2" style="color: #1bb7ac; position: relative; bottom: 10px;" ng-click="more(this)">{{isMore2}}</span>' +'</p>',
link: function(scope, element, attrs) {
var height;
var maxheight;
var minheight = 23;
function textfold() {
height = angular.element('#textfold').height();
maxheight = angular.element('#textfold').height();
}
scope.$watch('designer.des', function(data) {
if (data) {
document.getElementById('textP').style.display = 'block';
textfold();
scope.more();
scope.status();
} else {
document.getElementById('textP').style.display = 'none';
}
})
var isExtend = false;
scope.isMore = "查看更多...";
scope.status = function() {
if (maxheight <= minheight) {
document.getElementById('isMore').style.display = 'none';
document.getElementById('br').style.display = 'none';
document.getElementById('isMore2').style.display = 'none';
document.getElementById('br').style.display = 'none';
}
}
scope.more = function() {
if (isExtend) {
if (height >= minheight) {
document.getElementById('textfold').style.height = height + "px";
setTimeout(function() {
scope.more();
}, 1);
height -= 10;
} else {
scope.isMore = "查看更多";
scope.isMore2 = "";
if (scope.$root.$$phase != '$apply' && scope.$root.$$phase != '$digest') {
scope.$apply();
}
isExtend = !isExtend;
height += 10;
document.getElementById('textfold').style.height = "20px";
}
} else {
if (height <= maxheight) {
document.getElementById('textfold').style.height = height + "px";
setTimeout(function() {
scope.more();
}, 1);
height += 10;
} else {
scope.isMore = "";
scope.isMore2 = "折叠";
if (scope.$root.$$phase != '$apply' && scope.$root.$$phase != '$digest') {
scope.$apply();
}
isExtend = !isExtend;
height -= 10;
}
}
}
}
}
});
from articles.
qq452261789
commented on July 19, 2024
这逼高大上
from articles.
pengril
commented on July 19, 2024
厉害了
from articles.
Related Issues (20)
- vue.js简单实现
- 关于Javascript的函数声明和函数表达式
- 简谈Promise
- 简话H5离线缓存
- 聊一聊跨域
- web缓存
- rxjs 在项目中的使用
- node.js 命令行开发
- javascript中三种实现数据双向绑定的方式
- Flux and Redux
- ES6常用知识小结
- Matrix理解与前端运用 HOT 1
- Co & Koa2
- 前端程序员经常忽视的一个JavaScript面试题 HOT 33
- 关于JavaScript的变量提升
- js面试题
- 如何提高扩展运算符的性能
- 我这里实现了对象包括数组的深拷贝：
- 我如何用最简单的前端技术揭示那些灰色产业背后的原理 HOT 3
- How do I use the simplest front end technology to reveal the principles behind those gray industries
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from articles.