<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>select.js</title>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.14/vue.min.js"></script>
<style type="text/css">
{
margin: 0;padding: 0;
}
ul,li{
list-style: none;
}
.z-form-select {
position: relative;
width: 256px;
height: 28px;
border: 1px solid #e6e6e6
}
.z-form-select .select-name {
display: block;
width: 219px;
height: 28px;
line-height: 28px;
overflow: hidden;
float: left;
text-align: center;
/border-right: 1px solid #e6e6e6;*/
margin-right: 10px;
}
.z-form-select i {
display: block;
float: left;
width: 18px;
height: 9px;
margin-top: 9px;
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px dashed;
border-top: 4px solid\9;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
.z-form-select ul {
display: none;
position: absolute;
top: 29px;
width: 255px;
border: 1px solid #e6e6e6;
border-top: 0;
background-color: #fff;
overflow: auto
}
.z-form-select li {
height: 28px;
line-height: 28px;
padding: 0 10px;
white-space: nowrap
}
.z-form-select li:hover {
background-color: #e6e6e6
}
.z-form-select .disabled{
color: #ccc;
cursor: not-allowed;
background-color: #FFF!important
}
</style>
</head>
<body>
<div class="select" name="test"></div>
<div style="height:200px;" id="app">
<zh-select :data="list" id="s1"></zh-select>
<div style="height:200px;"></div>
<zh-select :disabled="disabled" :data="list2"></zh-select>
</div>
<div class="select" name="test2"></div>
<button id="get"></button>
<script type="text/javascript">
;(function((el);
this.options = options || {};
var data = this.options.data || [],
onclick = this.options.onclick || function(el){console.log(el.text())};
var htm = [
'<div class="z-form-select">',
'<span class="select-name"></span>',
'<i></i>',
'<ul class="select-items"></ul>',
'</div>'
];
this.el.append(htm.join(''));
self.setValues(data);
(this).hasClass('disabled')) return;
onclick && onclick((this).addClass('selected').siblings().removeClass('selected');
self.el.find('.select-name').html((this).hasClass('disabled')) {
return;
}
(document).click(function(e){
if((e.target).hasClass('disabled')) return;
ul = self.el.find('.select-items');
if(Object.prototype.toString.call(list) == '[object Array]' && list.length > 0){
for(j=list.length; i < j; i++){
arry.push('<li>' + list[i] + '</li>');
}
}
ul.append(arry.join(''));
},
getValue:function(){
return this.el.find('.select-items .selected').html();
},
enable: function(value) {
this.el.find('.select-items li').each(function(){
if((this).removeClass('disabled');
}
});
},
disable: function(value) {
this.el.find('.select-items li').each(function(){
if((this).addClass('disabled');
}
});
},
allDisable:function(value){
if(value){
this.el.find('.select-name').addClass('disabled');
}else{
this.el.find('.select-name').removeClass('disabled');
}
}
}
var Plugin = function(option){
var value,
option = arguments[0],
param = arguments[1];
this.each(function() {
var $this = $(this)
var data = $this.data('z-select');
if(!data) $this.data('z-select', (data = new Select(this,option)))
if (typeof option == 'string'){
value = data[option](param);
}
})
return value ? value : this;
}
$.fn.select = Plugin;
})(jQuery)
</script>
<script type="text/javascript">
// (function(){
// (".select").select('getValue');
// console.log(val2);
// });
// (this.
(this.$el).select('disable','22');
}
}
Vue.component("zh-select",param);
</script>
<script type="text/javascript">
var app = new Vue({
data:{
list:['111','22','33','666'],
list2:['22','33','666'],
disabled:false
},
el:'#app'
})
</script>
</body>
</html>
