[关闭]
@15013890200 2018-08-13T16:16:13.000000Z 字数 17468 阅读 926

vue select 选择插件

vue javascript 插件

tips:web开发经常要用到很多不同类型的选择控件，本次特地针对六种常见的控件进行封装，引用插件的时候记得标明引用的选择控件类型：select（下拉列表）、tab（选择块）、checkbox（复选框）、radio（单选按钮）、switch（开关按钮）、complete（自动补全），具体说明下面会交代详细。

1 插件部分

tips:以下为了方便阅读，会将个插件的template、script、css部分拆开来呈现，实际上它们都在一个完整的文件里面，且都是紧密衔接的。

1.1 公共部分

template部分
  1. <template>
  2.     <div v-if='data && data.length || type == "switch"' style="float:left;">
  3.             <!-- 差异化部分 -->
  4.     </div>
  5. </template>
data部分
  1. data(){
  2.             return{
  3.                 type: 'select',
  4.                 multiple: false,
  5.                 selected: null,
  6.                 data: null,//传入的数据
  8.                 query: false,//select 是否带query查询
  9.                 data_select: null,//select 复制传入的数据  //checkbox 用于复制传入已选的数据
  10.                 txt: null,//select 存放选中的文本
  12.                 hover_idx: null,//tab 用于展示取消按钮  //checkbox 用于改变复选框样式  //radio 用于改变单选按钮样式
  13.                 show_little: true,//tab 用于展示tab选项多少
  14.                 hover_idx_sel: null,//tab 用于取消已选按钮
  16.                 disable: false,// checkbox 用于确认是否不可选
  18.                 compValue: null,//complete 用于存放选中的文本信息
  19.                 focus: false,//complete 用于存放文本框状态
  20.                 i: null,//complete 用于模拟hover事件
  21.             }
  22.         },
  23.         props:{
  24.             select: {
  25.                 type: Object,
  26.                 default: null
  27.             }
  28.         },
  29.         beforeMount(){
  30.             /* 在节点创建之前将传入的参数赋值给相应的变量 */
  31.             if(this.select.data && this.select.data.length){
  32.                 for(let key in this.select){
  33.                     this.$data[key] = this.select[key];
  34. 				}
  35. 				/* 用于query 保存传入的初始值 */
  36. 				this.data_select = JSON.parse(JSON.stringify(this.data));
  37. 				if(this.type == 'checkbox'){
  38. 					/* 用于checkbox 当disable为part时，用于确定已选的参数不可被取消 */
  39. 					this.data_select = JSON.parse(JSON.stringify(this.selected));
  40. 				}
  41. 			}
  42. 			if(this.selected !== null){
  43. 				/* 初始化select选中的文本 */
  44. 				for(let i = 0; i < this.data.length; i++){
  45. 					if(this.selected == this.data[i].id){
  46. 						this.txt = this.data[i].name;
  47. 						break;
  48. 					}
  49. 				}
  50. 			}
  51. 			if(this.select.type == 'switch'){
  52. 				for(let key in this.select){
  53. 					this.$data[key] = this.select[key];
  54.                 }
  55.             }
  56.         }

1.2 select下拉列表

template部分
  1. <div v-if='type == "select"' style="float:left;">
  2.             <div class="clearfix j_div_select">
  3.                 <input type="text" @blur="hide_options" @focus="show_options" style="width:0;height:0;outline:none;opacity:0;border:none;padding:0;marging:0;">
  4.                 <span class="j_sp_select" :class="{'j_sp_select_dis':disable}" @click="get_focus">
  5.                     <i class="j_i_dropdown"></i>
  6.                     <span class="j_lb_selected" @click="get_focus2" v-if="selected !== null" :title="txt">{{txt}}</span>
  7.                 </span>
  8.                 <ul class="j_ul_options hide">
  9.                     <input v-if='query' placeholder="请输入过滤条件" type="text" class="j_ip_query" @focus='show_options2' @blur='hide_options2' @keyup="select_query">
  10.                     <li v-for="(option,key) in data_select" :class="{'j_li_selected': selected == option.id}" :title="option.name" @click="select_option(option)"><span class="j_sp_option">{{option.name}}</span></li>
  11.                 </ul>
  12.             </div>
  13.         </div>
script methods部分
  1.             get_focus: function(){
  2.                 /** 让select第一个文本框获取焦点 */
  3.                 event.target.parentNode.firstChild.focus();
  4.             },
  5.             get_focus2: function(){
  6.                 /** 让select query文本框获取焦点 */
  7.                 event.target.parentNode.parentNode.firstChild.focus();
  8.             },
  9.             select_option: function(obj){
  10.                 /** 点击select选项触发 */
  11.                 if(this.disable)return;
  12.                 this.selected = obj.id;
  13.                 this.txt = obj.name;
  14.                 this.$emit('callback',this.selected);
  15.             },
  16.             show_options: function(){
  17.                 /** 当select第一个文本框获取焦点时展示下拉列表选项 */
  18.                  event.target.parentNode.lastChild.setAttribute('class','j_ul_options');
  19.             },
  20.             show_options2: function(){
  21.                 /** 当select  query文本框获取焦点时展示下拉列表选项 */
  22.                 let e = event;
  23.                 setTimeout(function(){
  24.                     e.target.parentNode.parentNode.lastChild.setAttribute('class','j_ul_options');
  25.                 },150);
  26.             },
  27.             hide_options: function(){
  28.                 /* 当select第一个文本框失去焦点时隐藏下拉列表选项 */
  29.                 let e = event;
  30.                 setTimeout(function(){
  31.                     e.target.parentNode.lastChild.setAttribute('class','j_ul_options hide');
  32.                 },150);
  33.             },
  34.             hide_options2: function(){
  35.                 /* 当select query文本框失去焦点时隐藏下拉列表选项 */
  36.                 let e = event;
  37.                 setTimeout(function(){
  38.                     e.target.parentNode.parentNode.lastChild.setAttribute('class','j_ul_options hide');
  39.                 },150);
  40.             },
  41.             select_query: function(){
  42.                 /* select下拉列表选项根据query文本框输入的值变化 */
  43.                 let str = event.target.value;
  44.                 this.data_select = [];
  45.                 for(let i = 0; i < this.data.length; i++){
  46.                     if(this.data[i].name.indexOf(str) !== -1){
  47.                         this.data_select.push(this.data[i]);
  48.                     }
  49.                 }
  50.             },
css部分
  1. *{font-size:14px;font-family:'微软雅黑';}
  2.     .hide{display:none;}
  4.     .j_div_select{position:relative;max-width:200px;min-width:150px;height:28px;padding:0;color:#333;}
  5.     .j_div_select .j_sp_select{width:90%;height:98%;line-height:28px;border:1px solid #dddddd;display:inline-block;border-radius:2px;cursor:pointer;position:relative;text-align:left;padding-left:4%;float:left;}
  6.     .j_div_select .j_sp_select_dis{background-color:#f5f5f5!important;color:#bbb;cursor:not-allowed;}
  7.     .j_div_select .j_i_dropdown{background:url(./img/select-triangle_down.png) no-repeat;display:inline-block;width:10px;height:6px;position:absolute;right:3%;top:45%;}
  8.     .j_div_select .j_ul_options{position:absolute;padding:0;text-align:left;left:0;width:94%;background-color:#fff;z-index:100;border:1px solid #dddddd;margin:0;top:28px;overflow:auto;max-height:150px;}
  9.     .j_div_select .j_ul_options li{list-style:none;margin:0;width:100%;height:25px;line-height:25px;cursor:pointer;}
  10.     .j_div_select .j_ul_options li:hover{background-color:#F5F5F5;}
  11.     .j_div_select .j_li_selected{background-color:#dddddd!important;color:#fff;}
  12.     .j_div_select .j_sp_option{margin-left:4%;max-width:80%;display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  13.     .j_div_select .j_lb_selected{display:inline-block;max-width:75%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  14.     .j_div_select .j_ip_query{width:92%;padding-left:4%;border:1px solid #3896fe;margin:2px;outline:none;height:25px;color:#999;font-size:12px;}

1.3 tab选择块

template部分
  1. <div v-if='type == "tab"'>
  2.             <div class="clearfix j_div_tab">
  3.                 <ul class="j_ul_tab clearfix" :class="{'j_ul_show_little':show_little}">
  4.                     <li v-if="multiple" :class="{'selected':selected == 'all'}" @click="select_all">全选</li>
  5.                     <li v-if="multiple" style="background-color:#bbb;color:#fff;border:1px solid #bbb;" @click="select_reverse">反选</li>
  6.                     <li @click="select_tab(option)" @mouseover="hover_idx = option.id" @mouseout="hover_idx = null" v-for="option in data" :class="{'selected':selected.indexOf(option.id) !== -1}">
  7.                         {{option.name}}
  8.                         <span @click.stop="tab_cancel(option.id)" class="j_close" v-if="selected.indexOf(option.id) !== -1 && hover_idx == option.id">x</span>
  9.                     </li>
  10.                 </ul>
  11.                 <div class="j_div_more">
  12.                     <div class="j_btn_more" v-if="show_little" @click='show_little = !show_little'>更多</div>
  13.                     <div class="j_btn_more" v-if="!show_little" @click='show_little = !show_little'>收起</div>
  14.                 </div>
  15.                 <div v-if='selected.length' class="j_div_selected">
  16.                     <label title="点击清空已选" style="cursor:pointer;" @click="clear_all">已选：</label>
  17.                     <span v-for="option in data">
  18.                         <span class="j_sp_selected" @mouseover="hover_idx_sel = s" @mouseout="hover_idx_sel = null" v-for="s in selected" v-if="option.id == s">
  19.                             {{option.name}}
  20.                             <span v-if="hover_idx_sel == s" class="j_close" @click='tab_cancel(s)'>x</span>
  21.                         </span>
  22.                     </span>
  23.                     <span class="j_sp_selected" v-if="selected == 'all'">全部</span>
  24.                 </div>
  25.             </div>
  26.         </div>
script methods部分
  1.             select_all: function(){
  2.                 /* tab 点全选选择所有和取消 */
  3.                 if(this.disable)return;
  4.                 if(this.selected != 'all')this.selected = 'all';
  5.                 else this.selected = [];
  6.                 this.$emit('callback',this.selected);
  7. 			},
  8. 			select_tab: function(obj){
  9. 				/* tab 选择单个选项 */
  10. 				if(this.disable)return;
  11. 				if(!this.multiple){
  12. 					this.selected.length = 0;
  13. 					this.selected.push(obj.id);
  14. 					this.$emit('callback',this.selected);
  15. 					return;
  16. 				}
  17. 				if(this.selected === 'all'){
  18. 					this.selected = [];
  19. 				}
  20. 				if(this.selected.indexOf(obj.id) === -1){
  21. 					this.selected.push(obj.id);
  22. 				}
  23. 				this.$emit('callback',this.selected);
  24. 			},
  25. 			tab_cancel: function(idx){
  26. 				/* tab 取消单个选项 */
  27. 				if(this.disable)return;
  28. 				if(this.selected.indexOf(idx) === -1){
  29. 					return;
  30. 				}
  31. 				else{				
  32. 					this.selected.splice(this.selected.indexOf(idx),1);
  33. 					this.$emit('callback',this.selected);
  34. 				}
  35. 			},
  36. 			select_reverse: function(){
  37. 				/* tab 反选当前选项 */
  38. 				if(this.disable)return;
  39. 				if(this.selected == 'all')this.selected = [];
  40. 				else if(this.selected.length == 0)this.selected = 'all';
  41. 				else{
  42. 					let arr = [];
  43. 					for(let i = 0; i < this.data.length; i++ ){
  44. 						if(this.selected.indexOf(this.data[i].id) === -1){
  45. 							arr.push(this.data[i].id);
  46. 						}
  47. 					}
  48. 					this.selected = arr;
  49. 				}
  50. 				this.$emit('callback',this.selected);
  51. 			},
  52. 			clear_all: function(){
  53. 				/* tab 清除所有选项 */
  54. 				if(this.disable)return;
  55. 				this.selected = [];
  56. 				this.$emit('callback',this.selected);
  57.             },
css部分
  1. .j_div_tab{color:#666;background-color:#f5f5f5;color:#333;}
  2.     .j_div_tab .j_ul_tab{padding:10px 20px;width:80%;float:left;overflow:hidden;}
  3.     .j_div_tab .j_ul_show_little{height:33px;}
  4.     .j_div_tab .j_ul_tab li{list-style:none;float:left;padding:6px 15px;border:1px solid #bbbbbb;margin-left:20px;border-radius:3px;cursor:pointer;position:relative;margin-bottom:10px;}
  5.     .j_div_tab .j_ul_tab li:hover{border:1px solid #3896f8;color:#3896f8;}
  6.     .j_div_tab .j_ul_tab .selected{border:1px solid #3896f8;color:#fff!important;background-color:#3896f8;}
  7.     .j_div_tab .j_close{display:inline-block;width:14px;height:14px;border-radius:50%;background-color:#FF0033;color:#fff;line-height:12px;position:absolute;text-align:center;top:-5px;right:-5px;user-select:none;}
  8.     .j_div_tab .j_div_more{width:10%;float:left;}
  9.     .j_div_tab .j_btn_more{width:60px;;height:31px;border:1px solid #bbbbbb;background-color:#bbbbbb;color:#fff;cursor:pointer;border-radius:3px;margin-top:25px;line-height:31px;text-align:center;}
  10.     .j_div_tab .j_div_selected{width:100%;float:left;text-align:left;padding:0 0 10px 40px;}
  11.     .j_div_tab .j_sp_selected{padding:5px 15px;background-color:#fff;border:1px solid #3896f8; border-radius:3px;cursor:pointer;margin: 0 20px 10px 0;display:inline-block;position:relative;}

1.4 checkbox复选框

template部分
  1. <div v-if="type == 'checkbox'" class="j_div_checkbox">
  2.             <label v-for="option in data" class="j_lb_ck" @mouseover="hover_idx = option.id" @mouseout="hover_idx = null" @click="select_ck(option)">
  3.                 <i class="j_i_ck j_ck_uncheck" :class="{'j_ck_checked_dis':disable && data_select.indexOf(option.id) !== -1,'j_ck_uncheck_dis':disable == 'all' && data_select.indexOf(option.id) === -1,'j_ck_checked':selected.indexOf(option.id) !== -1,'j_ck_hover':hover_idx == option.id}"></i>
  4.                 <span :class="{'j_sp_ck_dis':disable && data_select.indexOf(option.id) !== -1 || disable === 'all','j_sp_ck':hover_idx == option.id || selected.indexOf(option.id) !== -1}">{{option.name}}</span>
  5.             </label>
  6.         </div>
script methods部分
  1. select_ck: function(obj){
  2.                 /* checkbox 点击选择某个选项 */
  3.                 if(this.disable == 'part' && this.data_select.indexOf(obj.id) !== -1){
  4.                     return;
  5.                 }
  6.                 if(this.disable == 'all'){
  7.                     return;
  8.                 }
  9.                 if(this.selected.indexOf(obj.id) !== -1){
  10.                     this.selected.splice(this.selected.indexOf(obj.id),1);
  11.                 }
  12.                 else{
  13.                     this.selected.push(obj.id);
  14.                 }
  15.                 this.$emit('callback',this.selected);
  16.             },
css部分
  1. .j_div_checkbox{color:#666;user-select:none;}
  2.     .j_div_checkbox .j_lb_ck{margin-right:15px;display:inline-block;position:relative;height:25px;line-height:25px;}
  3.     .j_div_checkbox .j_sp_ck{color:#3896f8;cursor:pointer;}
  4.     .j_div_checkbox .j_sp_ck_dis{color:#bbb!important;cursor:not-allowed;}
  5.     .j_div_checkbox .j_i_ck{display:inline-block;width:14px;height:14px;position:relative;top:2px;cursor:pointer;}
  6.     .j_div_checkbox .j_ck_uncheck{background:url(./img/checkbox_unchecked.png) no-repeat;cursor:pointer;}
  7.     .j_div_checkbox .j_ck_hover{background:url(./img/checkbox_hover.png) no-repeat;cursor:pointer;}
  8.     .j_div_checkbox .j_ck_checked{background:url(./img/checkbox_check.png) no-repeat;cursor:pointer;}
  9.     .j_div_checkbox .j_ck_checked_dis{background:url(./img/checkbox_check_disabled.png) no-repeat;cursor:not-allowed;}
  10.     .j_div_checkbox .j_ck_uncheck_dis{background:url(./img/checkbox_disabled.png) no-repeat;cursor:not-allowed;}

1.5 radio单选按钮

template 部分
  1. <div v-if="type == 'radio'" class="j_div_radio">
  2.             <label v-for="option in data" class="j_lb_rd" @mouseover="hover_idx = option.id" @mouseout="hover_idx = null" @click="select_rd(option)">
  3.                 <i class="j_i_rd j_rd_uncheck" :class="{'j_rd_checked_dis':disable && selected == option.id,'j_rd_uncheck_dis':disable,'j_rd_checked':selected == option.id,'j_rd_hover':hover_idx == option.id}"></i>
  4.                 <span :class="{'j_sp_rd_dis':disable,'j_sp_rd':selected == option.id || hover_idx == option.id}">{{option.name}}</span>
  5.             </label>
  6.         </div>
script methods部分
  1. select_rd: function(obj){
  2.                 /* radio 点击选择某个选项 */
  3.                 if(this.disable)return;
  4.                 this.selected = obj.id;
  5.                 this.$emit('callback',this.selected);
  6.             },
css部分
  1. .j_div_radio{color:#666;user-select:none;}
  2.     .j_div_radio .j_lb_rd{margin-right:15px;display:inline-block;position:relative;height:25px;line-height:25px;}
  3.     .j_div_radio .j_sp_rd{color:#3896f8;cursor:pointer;}
  4.     .j_div_radio .j_sp_rd_dis{color:#bbb!important;cursor:not-allowed;}
  5.     .j_div_radio .j_i_rd{display:inline-block;width:14px;height:14px;position:relative;top:2px;cursor:pointer;}
  6.     .j_div_radio .j_rd_uncheck{background:url(./img/radio-unchecked.png) no-repeat;cursor:pointer;}
  7.     .j_div_radio .j_rd_hover{background:url(./img/radio-hover.png) no-repeat;cursor:pointer;}
  8.     .j_div_radio .j_rd_checked{background:url(./img/radio-check.png) no-repeat;cursor:pointer;}
  9.     .j_div_radio .j_rd_checked_dis{background:url(./img/radio-disabled_check.png) no-repeat!important;cursor:not-allowed;}
  10.     .j_div_radio .j_rd_uncheck_dis{background:url(./img/radio-disabled.png) no-repeat;cursor:not-allowed;}

1.6 complete自动补全

template 部分
  1. <div v-if="type == 'complete'" class="j_div_complete">
  2.             <div class="j_div_inner" :style="{'cursor':disable?'not-allowed!important':''}">
  3.                 <div class="j_div_selected" @click="get_focus_comp">
  4.                     <span v-for='option in data_select'>
  5.                         <span v-if="option.id == s" class="j_sp_selected" v-for='s in selected'><span @click.stop="cancel_comp(option)" class="j_close" :style="{'cursor':disable?'not-allowed':''}">x</span>{{option.name}}</span>
  6.                     </span>
  7.                     <input :style="{'cursor':disable?'not-allowed!important':''}" :disabled="disable" type="text" v-model="compValue" class="j_input_comp" @focus="focus = true" @blur="hide_comp" @keydown="listen_comp">
  8.                 </div>
  9.                 <div class="div_options" v-if='selected.length < data.length' :class="{'hide':!focus}">
  10.                     <span @mouseover="clear_style" class="j_sp_option" @click='select_comp(option)' v-for="(option,key) in data" v-if="selected.indexOf(option.id) === -1 && (option.name.indexOf(compValue) !== -1 || !compValue)" :class="{'j_sp_option_hover':key === i}">
  11.                         <span class="j_sp_margin">{{option.name}}</span>
  12.                     </span>
  13.                 </div>
  14.             </div>
  15.         </div>
script methods部分
  1. select_comp: function(obj){
  2.                 /* complete 点击选择某个选项 */
  3.                 if(this.disable)return;
  4.                 this.compValue = null;
  5.                 this.selected.push(obj.id);
  6.                 this.$emit('callback',this.selected);
  7. 			},
  8. 			cancel_comp: function(obj){
  9. 				/* complete 取消某个选项 */
  10. 				if(this.disable)return;
  11. 				this.selected.splice(this.selected.indexOf(obj.id),1);
  12. 				this.$emit('callback',this.selected);
  13.             },
  14.             hide_comp: function(){
  15.                 /* complete 隐藏选项 */
  16.                 let t = this;
  17.                 setTimeout(function(){
  18.                     t.focus = false;
  19.                 },150);
  20.             },
  21.             get_focus_comp: function(){
  22.                 /* complete 文本框获得焦点 */
  23.                 if(this.disable)return;
  24.                 let e = event;
  25.                 if(e.target.nodeName === 'INPUT' || e.target.nodeName === 'SPAN')return;
  26.                 setTimeout(function(){
  27.                     e.target.lastChild.focus();
  28.                 },150);
  29.                 this.i = 0;
  31.             },
  32.             listen_comp: function(){ 
  33.                 /* complete js监听键盘事件，模拟上下键 */
  34.                 if(this.disable)return;
  35.                 let code = event.keyCode;
  36.                 if(code === 40){
  37.                     /* 向上键触发事件 */
  38.                     let nodes = event.target.parentNode.parentNode.lastChild.childNodes;
  39.                     let nodes_new = [];
  40.                     for(let i = 0; i < nodes.length; i++){
  41.                         if(nodes[i].nodeName === 'SPAN'){
  42.                             nodes_new.push(nodes[i]);
  43.                         }
  44.                     }
  45.                     if(this.i === null){this.i = 0;}
  46.                     else{
  47.                         if(this.i >= nodes.length -1 )return;
  48.                         this.i++;
  49.                     } 
  50.                     while(nodes[this.i] && nodes[this.i].nodeName !== 'SPAN'){
  51.                         this.i++;
  52.                     }
  53.                     if(this.i >= nodes.length -1 )this.i = nodes.length-1;
  54.                     return;
  55.                 }
  56.                 if(code === 38){
  57.                     /* 向下键触发事件 */
  58.                     let nodes = event.target.parentNode.parentNode.lastChild.childNodes;
  59.                     let nodes_new = [];
  60.                     for(let i = 0; i < nodes.length; i++){
  61.                         if(nodes[i].nodeName === 'SPAN'){
  62.                             nodes_new.push(nodes[i]);
  63.                         }
  64.                     }
  65.                     if(this.i <= 0 || this.i === null)return;
  66.                     this.i--;
  67.                     while(nodes[this.i] && nodes[this.i].nodeName !== 'SPAN'){
  68.                         this.i--
  69.                     }
  70.                     return;
  71.                 }
  72.                 if(code === 13){
  73.                     /* enter键触发事件 */
  74.                     let nodes = event.target.parentNode.parentNode.lastChild.childNodes;
  75.                     let nodes_new = [];
  76.                     for(let i = 0; i < nodes.length; i++){
  77.                         if(nodes[i].nodeName === 'SPAN'){
  78.                             nodes_new.push(nodes[i]);
  79.                         }
  80.                     }
  81.                     if(this.i >= nodes_new.length)this.i = nodes_new.length;
  82.                     if(this.i === null)return;
  83.                     for(let i = 0; i < nodes_new.length; i++){
  84.                         if(nodes_new[i].getAttribute('class') === "j_sp_option j_sp_option_hover"){
  85.                             nodes_new[i].click();
  86.                             break;
  87.                         }
  88.                     }
  89.                     this.i++;
  90.                     while(nodes[this.i] && nodes[this.i].nodeName !== 'SPAN'){
  91.                         this.i++;
  92.                     }
  93.                     return;
  94.                 }
  95.             },
  96.             clear_style: function(){
  97.                 /* complete 清除选项hover样式 */
  98.                 this.i = 0;
  99.                 let nodes = event.target.parentNode.childNodes;
  100.                 for(let i = 0; i < nodes.length; i++){
  101.                     if(nodes[i].nodeName === 'SPAN' && nodes[i].childNodes){
  102.                         nodes[i].setAttribute('class','j_sp_option');
  103.                     }
  104.                 }
  105.             },
css部分
  1. .j_div_complete{user-select:none;}
  2.     .j_div_complete .j_div_inner{position:relative;width:300px;box-shadow:0 0 4px #ddd;}
  3.     .j_div_complete .j_div_selected{border:1px solid #ddd;padding:10px;text-align:left;}
  4.     .j_div_complete .j_sp_selected{padding:3px 5px 3px 18px;border:1px solid #F77825;background-color:#f9eae1;margin:0 5px 5px 0;position:relative;float:left;}
  5.     .j_div_complete .j_close{position:relative;left:-10px;color:#bbb;cursor:pointer;}
  6.     .j_div_complete .j_input_comp{border:none;outline:none;width:100px;background-color:#fff;}
  7.     .j_div_complete .div_options{width:298px;border:1px solid #ddd;border-top:none;position:absolute;z-index:1000;background-color:#fff;max-height:150px;overflow:auto;}
  8.     .j_div_complete .j_sp_option{display:block;height:28px;line-height:28px;text-align:left;cursor:pointer;}
  9.     .j_div_complete .j_sp_option:hover{background-color:#ddd;}
  10.     .j_div_complete .j_sp_option_hover{background-color:#ddd;}
  11.     .j_div_complete .j_sp_margin{ margin-left:10px;}

1.7 switch开关按钮

template 部分
  1. <div v-if="type == 'switch'" class="j_div_switch">
  2.             <span class="switch" :style="{cursor:disable?'not-allowed':'pointer'}" :class="{'j_switch_selected':selected}" @click="selected_switch"><i class=" j_switch_normal" :class="{'j_switch_normal_active':selected}"></i></span>
  3.         </div>
script methods部分
  1. selected_switch: function(){
  2.                 /* switch 按钮 */
  3.                 if (this.disable) {return;}
  4.                 this.selected = !this.selected;
  5.                 this.$emit('callback',this.selected);
  6.             }
css部分
  1. .j_div_switch{float:left;}
  2.     .j_div_switch .switch{display:inline-block;width:80px;height:30px;background-color:#ddd;border-radius:30px;position:realtive;transition: background-color 0.5s;}
  3.     .j_div_switch .j_switch_selected{background-color:#3896f8;}
  4.     .j_div_switch .j_switch_normal{content:'';position:relative;display:inline-block;width:28px;height:28px;border-radius:30px;background-color:#fff;top:1px;left:1px;transition: left 0.5s;}
  5.     .j_div_switch .j_switch_normal_active{left:51px!important;}

2 组件注册和引入不再赘述

具体流程参见评分插件的引用

3 组件配置

3.1 参数配置

参数名参数意义默认值是否必须
type引用类型：select、tab、checkbox、radio、switch、completenull是
data选项列表null/false否(除了switch均必须)
disable是否禁用(除了checkbox可选‘all’、‘part’表示全部、部分禁用，其他一律true全部禁用)false否
selected已选参数（select、radio传入一个数值；checkbox、tab传入一个数组，switch传入Boolean类型参数）null/false否
queryselect下拉列表是否携带query查询false否
multipletab类型是否复选false否

3.2 回调函数

<my-select :select="selectObj" @callback="pick"></my-select>

当选项值改变时触发，可在callback处定义具体操作

4 效果图

8396b4392bae4278fede6f8348543ff.png-30.5kB

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注