ブログを書いてから久しぶりですが、怠け者かもしれませんね。。。
数日前に新しいリクエストを受け取りましたが、非常に興味深いポップアップウィンドウがあります。ここに来て共有してください。Vueを使用する場合、多くのフレームワークで直接記述される可能性があります。私たちのフレームワークは、古いAngular2 + Bootstrapフレームワークです。正直に言うと。私はこれを深く理解していません。ゴシップがない場合は、この興味深い小さなボックス機能を見てみましょう。
需要はこのようなものです。
私たちは主にこの詳細に焦点を当てています。需要は次のようなものです:
1)テキストボックスに3つ以上のテキストがある場合、* ...詳細*が表示されます。この詳細はこれに複数回表示される場合がありますページ。
2)詳細にポップアップボックスのプロンプト領域の名前をクリックすると
、他のこれらの3ヶ所以上。あなたが別の場所をクリックするか、別の詳細をクリックしてください3)を、ポップアップ表示を解除してください。あなたが別の詳細をクリックした場合、2)の意味が他の詳細の上に表示されます。
この需要はどうですか?実際には何もありません。コンポーネントを見つけてディスプレイに追加するだけで(ナイーブ、このスタイルと機能の弾丸フレームはありません)、私はそれを自分で書くことを余儀なくされています。
コードについて、私の考えについて簡単に話します
<div class="modal fade" id="delreason1" tabindex="-1" role="dialog" data-backdrop="static" ng-click="hidetriangle()">
<div class="modal-dialog" role="document" style="width: 1000px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" >×</button>
<h4 class="modal-title" id="myModalLabel_update" style="text-align: center">上架中介管理</h4>
</div>
<div class="modal-body">
<fieldset>
<div class="ibox-content track-fieldset-top">
<div style="overflow-y:scroll">
<table class=" table-striped table tablee">
<thead>
<tr>
<th class="wid100">中介总公司名称</th>
<th class="wid100">业务区域</th>
<th class="wid100">中介总公司编码</th>
<th class="wid100">机构授权</th>
<th class="wid100">协议状态</th>
<th class="wid100">操作</th>
</tr>
</thead>
<tbody class="scrollstyle">
<!-- ng-repeat="propo in list" -->
<tr ng-repeat="propo in selectEditList1">
<td class="wid100 text_center">{
{
propo.PARTNERNAME}}</td>
<td class="wid100 text_center positionRelative">
{
{
getAreaname(propo.AREANAME,index)}}
<span class="positionAbsolute" ng-class="'tri'+[$index]" ng-mouseover="mouseover()" ng-mouseout="mouseout()">
<span ng-click="triangleShow(propo.AREANAME,$index)" ng-if="tri"+$index>...详情</span>
//弹框部分 <div class="positionAbsolute" style="left:-76px;">
// <div class="triangleBox">
// <div ng-click="triangleHide()" class="close1">×</div>
// <div class="triangleitem">
// <div ng-repeat="triangle in triangleList">{
{triangle.code}}</div>
// </div>
// </div>
// <div class="triangle-down"></div>
// </div> 弹框部分
</span>
<span style="visibility:hidden;" ng-if="tri"+index>...详情</span>
</td>
<td class="wid100 text_center">{
{
propo.COMPANY_CODE}}</td>
<td class="wid100 text_center">{
{
propo.ORGEMPOWER}}</td>
<td class="wid100 text_center">{
{
propo.AGREEMENTSTATUS}}</td>
<td class="wid100 text_center">
<a class="btn btn-link btn-xs ng-binding ng-scope" ng-click="accreditDetials(propo,0)">授权管理</a>
</td>
</tr>
</tbody>
</table>
</div>
<tfoot>
<tr>
<td colspan="90%">
<uib-pagination total-items="bigTotalItems2" ng-model="bigCurrentPage2" max-size="maxSize2" items-per-page="maxPage2"
boundary-link-numbers="true" force-ellipses="true" previous-text="<" next-text=">" ng-change="jumpToPage2()"
class="pull-right">
</uib-pagination>
</td>
</tr>
</tfoot>
</div>
</fieldset>
</div>
</div>
</div>
//css
/* 三角箭头 */
<style>
.triangle-down {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 10px solid #000;
position: absolute;
top: -8px;
right: 6px;
}
.positionAbsolute{
position: absolute;
}
.triangleBox{
position: absolute;
width: 80px;
height: 100px;
background: #000;
color: #fff;
border-radius: 5px;
top: -108px;
right: -30px;
}
.close1{
text-align: right;
margin-right: 9px;
cursor: pointer;
}
.triangleitem{
overflow: auto;
height: 100px;
}
//优化滚动条样式
.scrollstyle ::-webkit-scrollbar{
width:5px;}
.scrollstyle ::-webkit-scrollbar-track{
background-color:#000;}
.scrollstyle ::-webkit-scrollbar-thumb{
background-color:transparent;}
</style>
上記はhtmlコードブロックであり、その一部はコードコメントです。また、誰もが見られるように直接立てています。もともとコメントを直接書いていたのですが、複数生成する予定だったので、クリックしたときに表示を判断したかったのですが、後で書き込み要件のため3)別の場所をクリックしたり別の場所をクリックしたりしたとき詳細、これをキャンセルしましたポップアップボックスに、別の詳細をクリックすると、2)の意味が他の詳細の上に表示されます。このように書くと、さらに問題が発生することがわかりました。それで私はあきらめました。コードのこの部分はjsに書き込まれ、動的に生成されます。
//详情显示与弹窗动态显示
$scope.triangleShow = function (areaname,index) {
//由于我们需要在弹框的时候,判断是否有弹框存在,如果存在我们需要先隐藏弹框然后才能在你所点击的地方显示新的弹框
if(document.getElementsByClassName('triangleshow')[0] != undefined){
triangleHide();
}
//动态创建弹框
//在这里可能有人会质疑你怎么不用``(模板字符串)拼接呢?多简单。(这里不可以使用不支持,他会将你的模板字符串中的内容变成字符串输出)所以只能动态生成了
const div = document.createElement('div');
div.setAttribute('style', ['position:absolute','left:-76px']);
div.className = 'triangleshow'
div.onmouseout = function(){
mouseout();
}
div.onmouseover = function(){
mouseover();
}
const div1 = document.createElement('div');
div1.className ='triangleBox';
const div2 = document.createElement('div');
div2.innerHTML = 'x';
div2.className = 'close1'
div2.onclick = function(){
triangleHide()
}
const div3 = document.createElement('div');
div3.className = 'triangleitem'
const div4 = document.createElement('div');
div4.className = 'triangle-down'
//arealist 使我们需要处理的数据,去掉前3个数据,将其与的数据进行显示
var arealist = [];
arealist = areaname.split(',');
for(var i =3;i<arealist.length;i++){
const div = document.createElement('div');
div.innerHTML = arealist[i];
div3.appendChild(div);
}
//这里我们没有append div2。这是一个关闭的小按钮(类似于我们弹框中的x号),因为本需求不需要关闭按钮所以去掉了。
// div1.appendChild(div2)
div1.appendChild(div3)
div.appendChild(div1)
div.appendChild(div4)
var tri = 'tri'+index;
document.getElementsByClassName(tri)[0].appendChild(div);
}
$scope.mouseplace =true;
$scope.mouseout = function(){
$scope.mouseplace =true;
}
$scope.mouseover=function (){
$scope.mouseplace =false;
}
//点击其他位置隐藏弹框的方法
$scope.hidetriangle = function($event){
//mouseplace 这个字段呢,是我用来判断我点击其他地方的时候,如果鼠标的位置不在弹出框上,隐藏弹框,如果在,隐藏弹框的方法就不会执行
if($scope.mouseplace && document.getElementsByClassName('triangleshow')[0] != undefined){
document.getElementsByClassName('triangleshow')[0].parentNode.removeChild(document.getElementsByClassName('triangleshow')[0])
}
}
//隐藏弹框方法
function triangleHide(index){
document.getElementsByClassName('triangleshow')[0].parentNode.removeChild(document.getElementsByClassName('triangleshow')[0])
}
//本方法为后端返回数据为“西北,内蒙古,华东地区,华南区域,华北区域”这样的字符串。我们需要自己判断是否显示详情
$scope.getAreaname = function(areaname,index){
var arealist = [];
arealist = areaname.split(',');
if(arealist.length > 3){
var tri = 'tri'+index;
$scope.tri = true;
return arealist[0]+','+arealist[1]+','+arealist[2];
}else{
var tri = 'tri'+index;
$scope.tri = false;
return areaname;
}
}
より良い提案や方法があれば、メッセージを残してください☺