jQuery插件转vue组件

作者: zhanggongzi | 来源:发表于2018-09-14 17:30 被阅读0次

<!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( $){ var Select = function(el,options){ var self = this; this.el =$ (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);
$(el) .on("click",".select-items li", function(){ if($ (this).hasClass('disabled')) return;
onclick && onclick( $(this));$ (this).addClass('selected').siblings().removeClass('selected');
self.el.find('.select-name').html( $(this).text()); }) .on("click",".select-name", function(){ if ($ (this).hasClass('disabled')) {
return;
}
$(this).parent().find('.select-items').show(); });$ (document).click(function(e){
if( $(e.target).hasClass('select-name')) return; if($ (e.target).hasClass('disabled')) return;
$('.select-items').hide(); }) } Select.prototype = { constructor:Select, setValues:function(data){ var self = this; var list = data || [], i = 0, j, arry = [],$ 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.html('');$ 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).text() == value){$ (this).removeClass('disabled');
}
});
},
disable: function(value) {
this.el.find('.select-items li').each(function(){
if( $(this).text() == value){$ (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">
// $(".select").select({data:['11','22','33'],onclick:function(el){ // var val = el.text(); // console.clear(); // console.log(val); // }}); //$ (function(){
// $("#get").click(function(){ // var val2 =$ (".select").select('getValue');
// console.log(val2);
// });
// $(".select").select('disable','22'); // }) </script> <script type="text/javascript"> var param = { props:['disabled','data'], template:'<div class="select"></div>', data:{ instance:{} }, watch:{ disabled:function(val){ this.instance.select('allDisable',val) } }, mounted:function(){ var self = this; this.instance =$ (this. $el).select({data:self.data,onclick:function(el){ var val = el.text(); console.clear(); console.log(val); }});$ (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>

jQuery插件转vue组件

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读