<script src="../../scripts/mvvm/vue/vue.js"></script>
href="../../styles/css/bootstarp/css/bootstrap.min.css" rel="stylesheet" />
<script src="../../scripts/lib/jquery/jquery-3.1.min.js"></script>
<script src="../../scripts/ui/bootstrap/bootstrap.js"></script>

.dx-selectpanel
{
font-family: verdana,Microsoft YaHei,Tahoma,sans-serif;
padding:5px;
border:2px solid #eee;
background-color:#f5f5f5;
width:500px;
position:absolute;
z-index:80;
}
.dx-sp-tab
{
}
.sp-selected
{
background-color:#56b4f8;
color:#fff;
}
.dx-selectpanel-tab
{
border-bottom:solid 3px #56b4f8;
position:relative;
height:35px;
}
.dx-selectpanel-tab a {
display:inline-block;
text-align:center;
height:35px;
line-height:35px;
padding:0px 25px;
text-decoration:none;
font-size:16px;
cursor:default;
}
.dx-selectpanel-content{
margin-top:10px;
}
.dx-selectpanel-content a
{
display:inline-block;
text-align:center;
text-decoration:none;
padding:10px 25px;
color: #666;
font-size:13px;
cursor:pointer;
}
.dx-selectpanel-close{
position:absolute;
right:10px;
cursor:default;
top:10px;
}
.dx-selectpanel-close:hover::after, .dx-selectpanel-close:hover::before{
background-color:#94cef8;
}
.dx-selectpanel-close::before, .dx-selectpanel-close::after{
position:absolute;
top:0px;
left:0px;
content:'';
display:block;
border:0px!important;
width:2px;
height:15px;
background-color:#56b4f8;
}
.dx-selectpanel-close::before
{
transform:rotate(35deg);
}
.dx-selectpanel-close::after
{
transform:rotate(-35deg);
}
/* 必需 */
.amselectpanel-transition {
transform-origin:50% 0;
-webkit-transform-origin:50% 0;
}
.amselectpanel-enter {
animation:amselectpanelover 1s ease;
-webkit-animation:amselectpanelover 1s ease;
}
@keyframes amselectpanelover{
from
{
transform:scale(0);
-webkit-transform:scale(0);
}
to
{
transform:scale(1);
-webkit-transform:scale(1);
}
}
@keyframes amselectpanelout {
from {
transform: scale(1);
-webkit-transform:scale(1);
}
to {
transform: scale(0);
-webkit-transform:scale(0);
}
}
.amselectpanel-leave {
animation:amselectpanelout 1s ease;
-webkit-animation:amselectpanelout 1s ease;
}
.dx-selectpanel-btn
{
border:0px!important;
background-color:#56b4f8;
color:#fff;
width:80px;
float:right;
text-align:center;
}
.dx-selectpanel-footer
{
margin-top: 10px;
padding: 10px 0px 0px;
border-top: solid 1px #e7eaed;
}
.dx-selectpanel-footer>span{
font-size:12px;
}
.dx-selectpanel-footer .dx-selectpanel-t2{
color:#56b4f8;
}
.dx-selectpanel-footer .dx-selectpanel-t2>span{
background-color:#ff6a00;
}

点击

<script type="text/template" id="tempList">

</script>
<script>
var selectPanel = Vue.extend({
data: function () {
return { isShow: false, tabs: [], selectedIndex: 0 ,selectalltext:"",showBtn:false,currentIndex:-1};
},
watch: {
'isShow':function(val)
{
if(val)
{
this.currentIndex = -1;
this.selectalltext = '';
this.selectedIndex = 0;
this.clearSelected();
}
}
},
methods: {
onComfirm:function()
{
this.close();
this.$emit('onComfirm', this.tabs[this.tabs.length - 1].data[this.currentIndex]);
},
close: function () {
this.isShow = false;
},
onChangeTab: function (index) {
this.selectedIndex = index;
},
bindData: function (index, data) {
this.tabs[index].data = data;
},
clearSelected: function () {
var tabCount = this.tabs.length;
for (var i = 1; i < tabCount; i++) {
this.tabs[i].selectedIndex = -1;
this.tabs[i].data = [];
}
if (tabCount > 0)
{
this.tabs[0].selectedIndex = -1;
}
this.showBtn = false;
},
onChange: function (panretindex, itemindex) {
var index = panretindex + 1, tabCount = this.tabs.length, tabItem = this.tabs[panretindex];
if (index < tabCount) {
this.selectedIndex = index;
}
if (index >= tabCount) {
this.showBtn = true;
} else {
this.showBtn = false;
}
tabItem.selectedIndex = itemindex;
for (var i = index; i < tabCount; i++) {
this.tabs[i].selectedIndex = -1;
this.tabs[i].data = [];
}
var text = "";
for (var i = 0; i < tabCount; i++) {
if(this.tabs[i].selectedIndex!=-1)
{
text +='—'+this.tabs[i].data[this.tabs[i].selectedIndex].text;
}
}
this.currentIndex = index;
this.selectalltext = text.substr(1);
this.$emit('onChange', panretindex, tabItem.data[itemindex]);
},
open: function (selector, soffset) {
soffset = soffset || { left: 0, top: 0 };
var that = this;
this.isShow = true;
this.$nextTick(function () {
var element = $(selector), offset = element.offset(), container = $(that.$el), w = container.outerWidth(), styles;
styles = {
top: offset.top + element.outerHeight() + soffset.top,
left: offset.left - ((w - element.outerWidth()) / 2) + soffset.left
};
if (styles.left < 0) {
styles.left = 10;
}
container.css(styles);
});
}
},
template: '

'
});
var _panel = new selectPanel({ el: "#selectpanel", data: { tabs: [{ name: "区域", data: [{ text: "fda", value: "fd" }, { text: "fda", value: "fd" }], selectedIndex: -1 }, { name: "案场", data: [], selectedIndex: -1 }, { name: "区域", data: [{ text: "fda", value: "fd" }], selectedIndex: -1 }] } });
_panel.$on("onChange", function (panretindex,item) {
if(panretindex==0)
{
this.bindData(1, [{ text: "aaaaaaaaaa", value: "bbbbbbbbbbbbb" }, { text: "fdaf", value: "ddddddd" }])
} if (panretindex == 1) {
this.bindData(2, [{ text: "cccccc", value: "bbbbbbbbbbbbb" }, { text: "tttttt", value: "ddddddd" }])
}
});
$("#btnOpen").on("click",function(){
_panel.open(this);
})
</script>