作者:sendymylove睛飘益 | 来源:互联网 | 2023-09-16 06:47
好久没写博客了,可能是我懒了,emmm。。。 前几天接到了一个新的需求,其中有一个弹窗挺有意思的,来这里跟大家分享一下。如果Vue的话可能直接很多框架中都是写好的,我们的框架呢是一个比较老的Angular2.几的+Bootstrap的框架。说实话呢。我对这个了解也不是特别深。闲话少叙,来看看这个有意思的小弹框功能。 需求是这样的 我们主要关注这个详情,需求是这样的意思: 1)当文本框中的文字超过3个时候,显示*…详情*,这个详情可能在这个页面多次出现, 2)当点击详情时候弹出框提示除了这3个地方之外区域名称 3)点击其他位置或者点击另一个详情的时候,取消这个弹框显示,如果是点击另一个详情,在另一个详情上方显示2)的意思。 这个需求呢?其实没啥。直接找一个组件一添加显示不就行了么(天真了,这个里边并没有这个样式和功能的弹框),被迫自己写吧。
上代码然后简单说一下我的思路
< div class &#61; "modal fade" id&#61; "delreason1" tabindex&#61; "-1" role&#61; "dialog" data- backdrop&#61; "static" ng- click&#61; "hidetriangle()" > < div class &#61; "modal-dialog" role&#61; "document" style&#61; "width: 1000px;" > < div class &#61; "modal-content" > < div class &#61; "modal-header" > < button type&#61; "button" class &#61; "close" data- dismiss&#61; "modal" > ×< / button> < h4 class &#61; "modal-title" id&#61; "myModalLabel_update" style&#61; "text-align: center" > 上架中介管理< / h4> < / div> < div class &#61; "modal-body" > < fieldset> < div class &#61; "ibox-content track-fieldset-top" > < div style&#61; "overflow-y:scroll" > < table class &#61; " table-striped table tablee" > < thead> < tr> < th class &#61; "wid100" > 中介总公司名称< / th> < th class &#61; "wid100" > 业务区域< / th> < th class &#61; "wid100" > 中介总公司编码< / th> < th class &#61; "wid100" > 机构授权< / th> < th class &#61; "wid100" > 协议状态< / th> < th class &#61; "wid100" > 操作< / th> < / tr> < / thead> < tbody class &#61; "scrollstyle" > < ! -- ng- repeat&#61; "propo in list" -- > < tr ng- repeat&#61; "propo in selectEditList1" > < td class &#61; "wid100 text_center" > { { propo. PARTNERNAME } } < / td> < td class &#61; "wid100 text_center positionRelative" > { { getAreaname ( propo. AREANAME , index) } } < span class &#61; "positionAbsolute" ng- class &#61; "&#39;tri&#39;&#43;[$index]" ng- mouseover&#61; "mouseover()" ng- mouseout&#61; "mouseout()" > < span ng- click&#61; "triangleShow(propo.AREANAME,$index)" ng- if &#61; "tri" &#43; $index> ... 详情< / span> < / span> < span style&#61; "visibility:hidden;" ng- if &#61; "tri" &#43; index> ... 详情< / span> < / td> < td class &#61; "wid100 text_center" > { { propo. COMPANY_CODE } } < / td> < td class &#61; "wid100 text_center" > { { propo. ORGEMPOWER } } < / td> < td class &#61; "wid100 text_center" > { { propo. AGREEMENTSTATUS } } < / td> < td class &#61; "wid100 text_center" > < a class &#61; "btn btn-link btn-xs ng-binding ng-scope" ng- click&#61; "accreditDetials(propo,0)" > 授权管理< / a> < / td> < / tr> < / tbody> < / table> < / div> < tfoot> < tr> < td colspan&#61; "90%" > < uib- pagination total- items&#61; "bigTotalItems2" ng- model&#61; "bigCurrentPage2" max- size&#61; "maxSize2" items- per- page&#61; "maxPage2" boundary- link- numbers&#61; "true" force- ellipses&#61; "true" previous- text&#61; "<" next- text&#61; ">" ng- change&#61; "jumpToPage2()" class &#61; "pull-right" > < / uib- pagination> < / td> < / tr> < / tfoot> < / div> < / fieldset> < / div> < / div> < / div> < style> . triangle- down { width: 0 ; height: 0 ; border- left: 5 px solid transparent; border- right: 5 px solid transparent; border- top: 10 px solid #000 ; position: absolute; top: - 8 px; right: 6 px; } . positionAbsolute{ position: absolute; } . triangleBox{ position: absolute; width: 80 px; height: 100 px; background: #000 ; color: #fff; border- radius: 5 px; top: - 108 px; right: - 30 px; } . close1{ text- align: right; margin- right: 9 px; cursor: pointer; } . triangleitem{ overflow: auto; height: 100 px; } . scrollstyle : : - webkit- scrollbar{ width: 5 px; } . scrollstyle : : - webkit- scrollbar- track{ background- color: #000 ; } . scrollstyle : : - webkit- scrollbar- thumb{ background- color: transparent; } < / style>
上边为html代码块&#xff0c;有一部分是代码注释。我也直接放上去了&#xff0c;方便大家看。注释的部分本来我是直接写上的&#xff0c;然后打算生成多个&#xff0c;然后想在点击时候判断显示用&#xff0c;但是后来呢&#xff0c;由于在写需求中3&#xff09;点击其他位置或者点击另一个详情的时候&#xff0c;取消这个弹框显示&#xff0c;如果是点击另一个详情&#xff0c;在另一个详情上方显示2&#xff09;的意思 的时候呢&#xff0c;发现如果我这样写会出现更多问题。所以放弃了。将这部分代码写入了js动态生成了。
$scope. triangleShow &#61; function ( areaname, index) { if ( document. getElementsByClassName ( &#39;triangleshow&#39; ) [ 0 ] !&#61; undefined) { triangleHide ( ) ; } const div &#61; document. createElement ( &#39;div&#39; ) ; div. setAttribute ( &#39;style&#39; , [ &#39;position:absolute&#39; , &#39;left:-76px&#39; ] ) ; div. className &#61; &#39;triangleshow&#39; div. onmouseout &#61; function ( ) { mouseout ( ) ; } div. onmouseover &#61; function ( ) { mouseover ( ) ; } const div1 &#61; document. createElement ( &#39;div&#39; ) ; div1. className &#61; &#39;triangleBox&#39; ; const div2 &#61; document. createElement ( &#39;div&#39; ) ; div2. innerHTML &#61; &#39;x&#39; ; div2. className &#61; &#39;close1&#39; div2. onclick &#61; function ( ) { triangleHide ( ) } const div3 &#61; document. createElement ( &#39;div&#39; ) ; div3. className &#61; &#39;triangleitem&#39; const div4 &#61; document. createElement ( &#39;div&#39; ) ; div4. className &#61; &#39;triangle-down&#39; var arealist &#61; [ ] ; arealist &#61; areaname. split ( &#39;,&#39; ) ; for ( var i &#61; 3 ; i< arealist. length; i&#43;&#43; ) { const div &#61; document. createElement ( &#39;div&#39; ) ; div. innerHTML &#61; arealist[ i] ; div3. appendChild ( div) ; } div1. appendChild ( div3) div. appendChild ( div1) div. appendChild ( div4) var tri &#61; &#39;tri&#39; &#43; index; document. getElementsByClassName ( tri) [ 0 ] . appendChild ( div) ; } $scope. mouseplace &#61; true ; $scope. mouseout &#61; function ( ) { $scope. mouseplace &#61; true ; } $scope. mouseover &#61; function ( ) { $scope. mouseplace &#61; false ; } $scope. hidetriangle &#61; function ( $event) { if ( $scope. mouseplace && document. getElementsByClassName ( &#39;triangleshow&#39; ) [ 0 ] !&#61; undefined) { document. getElementsByClassName ( &#39;triangleshow&#39; ) [ 0 ] . parentNode. removeChild ( document. getElementsByClassName ( &#39;triangleshow&#39; ) [ 0 ] ) } } function triangleHide ( index) { document. getElementsByClassName ( &#39;triangleshow&#39; ) [ 0 ] . parentNode. removeChild ( document. getElementsByClassName ( &#39;triangleshow&#39; ) [ 0 ] ) } $scope. getAreaname &#61; function ( areaname, index) { var arealist &#61; [ ] ; arealist &#61; areaname. split ( &#39;,&#39; ) ; if ( arealist. length > 3 ) { var tri &#61; &#39;tri&#39; &#43; index; $scope. tri &#61; true ; return arealist[ 0 ] &#43; &#39;,&#39; &#43; arealist[ 1 ] &#43; &#39;,&#39; &#43; arealist[ 2 ] ; } else { var tri &#61; &#39;tri&#39; &#43; index; $scope. tri &#61; false ; return areaname; } }
如果有更好的建议或者方法&#xff0c;欢迎留言☺