123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921 |
- <template>
- <div class="show-box" :class="{disabled: disabled, active: isShowList}" :style="style_Container">
- <!-- 输入框,仅在可输入模式下使用 -->
- <input
- v-if="showInput" class="input" placeholder-style="color: #bbb;"
- type="text" v-model="selectText" :placeholder="placeholder"
- @focus="onFocus" @blur="onBlur" @input="onInput" @confirm="$emit('confirm', $event)"
- >
- <!-- 显示框 -->
- <div v-else class="input" :class="{placeholder: selectText === placeholder}" @click="onUpperClick" >{{selectText}}</div>
- <!-- 右侧的小三角图标 -->
- <span
- @click="onUpperClick"
- class="iconfont iconarrowBottom-fill right-arrow"
- :class="{isRotate: isRotate}"
- ></span>
-
- <!-- 清除按钮图标 -->
- <span
- v-if="clearable && selectText && selectText != placeholder"
- class="right-arrow" @click="onClear"
- >
- <span class="iconfont iconshanchu1 clear"></span>
- </span>
-
-
- <!-- 列表框 -->
- <div class="list-container"
- @click.stop="onListClick"
- :style="'top:' + listTop__ + 'px;'" v-show="isShowList">
- <span class="popper__arrow"></span> <!-- 列表框左上角的空心小三角 -->
- <scroll-view
- class="list" style="background-color: #fff;"
- :style="'max-height: ' + listBoxHeight__ +'em;'"
- scroll-y=true scroll-x=true
- >
- <div
- class="item" @click="onClickItem(index, item.value)"
- v-for="(item, index) in innerList" :key="index"
- :class="{active: activeIndex == index, disabled: item.disabled}"
- >
- <div>{{item.value}}</div>
- </div>
- <div v-show="innerList.length==0" class="data-state item">无数据</div>
- <!-- <slot></slot> -->
- </scroll-view>
- </div>
-
- </div>
- </template>
- <script>
- /**
- * v1.1.1
- * 最后修改: 2019.7.29
- * 创建: 2019.6.27
- */
- import Vue from 'vue';
- Vue.__xfl_select = Vue.__xfl_select || new Vue(); // 这个实例专门用来做xfl-select多个实例之间的通信中间站
- export default {
- name: 'xfl-select',
- props: {
- list: { // 原始数据
- type: Array,
- default: function(){
- return [];
- }
- },
- focusShowList: null, // 当input获取焦点时,是否自动弹出列表框
- initValue: null, // 选择框的初始值
- isCanInput: { // 选择框是否可以输入值
- type: Boolean,
- default: false,
- },
- selectHideType: { // 本选择框与其它选择框之间的关系
- type: String,
- default: 'hideAll', // 'independent' - 是独立的,与其它选择框互不影响 'hideAll' - 任何一个选择框展开时,隐藏所有其它选择框
- // 'hideOthers'- 当本选择框展开时,隐藏其它的选择框。 当其它选择框展开时,不隐藏本选择框。
- // 'hideSelf' - 当本选择框展开时,不隐藏其它的选择框。当其它选择框展开时,隐藏本选择框。
- },
- placeholder: { // 选择框的placeholder
- type: String,
- default: '请选择',
- },
- style_Container: { // 最外层的样式
- type: String,
- default: ''
- },
- disabled: { // 是否禁用整个选择框
- type: Boolean,
- default: false,
- },
- showItemNum: { // 显示列表框的窗口高度,数字表示能显示几个列表项
- type: Number,
- default: 5
- },
- listShow: { // 是否显示列表框
- type: Boolean,
- default: false
- },
- clearable: { // 是否显示右侧的清除按钮
- type: Boolean,
- default: true
- },
- },
- data() {
- return {
- isShowList: false, // 是否显示列表框
- selectText: '', // 已经选择的内容
- activeIndex: -1, // 列表中当前活动的索引号
- isRotate: false, // 右侧的小三角是否旋转
- listTop__: 50, // 列表框的top位置,在初始时,根据input节点的高度来调整
- };
- },
- // 进行监听的话,在组件外改变这个值,组件内就能响应变化
- watch: { // 监听变化 ,注意,初始的值是不会被监听到的,只有在mounted回调中手动赋值
- listShow(newVal, oldVal){
- this.onDataChange_listShow(newVal, oldVal);
- },
- },
- computed:{
- focusShowList__(){ // 是否在输入框获得焦点时,自动弹出列表框
- if(this.focusShowList == null ){
- // 应该是判断在 pc端还是移动端
- // #ifdef H5
- return isPC();
- // #endif
- // #ifndef H5
- return false;
- // #endif
- }else{
- return this.focusShowList;
- }
- },
- listBoxHeight__(){ // 列表框的总高度
- const itemHeight = 2; // 每个列表项的高度(em), 默认为2个文字高
- return this.showItemNum*itemHeight;
- },
- showInput(){ // 是否显示输入框
- return this.isCanInput && !this.disabled;
- },
- innerList(){ // 转换列表的数据格式
- const arr = [], orginArr = this.list;
- orginArr.forEach((val, index)=>{
- let value = typeof val === 'object' && 'value' in val ? val.value : val;
- let isDisabled = typeof val === 'object' && val.disabled == true;
- arr.push({
- isActive: false,
- value: value,
- disabled: isDisabled,
- });
- });
- return arr;
- },
- },
- mounted(){
- Vue.__xfl_select.$on('open', this.onOtherXflSelectOpen);
- this.switchMgr = new Switch(this.onListShow, this.onListHide); // 创建开关对象
- this.onDataChange_listShow(this.listShow, null); // 由于 watch 不到初始值,所以需要在这里手动调用一次
- this.init(); //进行初始化
- },
- beforeDestroy(){
- Vue.__xfl_select.$off('open', this.onOtherXflSelectOpen);
- },
- methods: {
- onOtherXflSelectOpen(component){ //当本组件的其它实例展开时的回调
- if(this.selectHideType === 'independent' || this.selectHideType === 'hideOthers'){
- return;
- }
- component !== this && this.switchMgr.close(100);
- },
- /************************** 初始化函数 ****************************/
- //进行初始化
- init(){
- this.clearInput(); // 清空输入框中的显示,主要是设置placeholder
- this.setInput(this.initValue); // 在输入框中显示初始值
- this.changeActiveIndex(this.initValue); // 根据初始值设置列表框中的活动项
- this.getInputBoxHeight(); // 初始化列表框的top值
- },
-
- // 获取输入框的总高度 px
- getInputBoxHeight(){
- let component = this;
- // #ifdef H5
- component = undefined; // 在h5中传入了component反而拿不到数据
- // #endif
- getNodeInfo('.show-box', component, (data)=>{
- if(data){
- const trangleHeight = 6; //列表框左上角的小的空心三角形的高度(px)
- this.listTop__ = data[0].height + trangleHeight;
- }
- })
- },
- /************************** 初始化函数 ****************************/
- /************************** 数据 ****************************/
- getIndex(value){ // 将值转换为索引
- let activeIndex = searchIndex(
- this.innerList, value, 'value')
- return activeIndex; // 转换失败,则返回-1
- },
- itemIsDisabled(index){ // 某个列表项是否已经被禁用了
- return this.innerList[index].disabled;
- },
- itemIsActive(index){ // 某个列表项是否是被选中的(活动的)
- return index === this.activeIndex;
- },
- // listShow 这个字段的值变化时的回调
- onDataChange_listShow(newVal = false, oldVal){
- newVal ? this.switchMgr.open() : this.switchMgr.close(100);
- },
- /************************** 数据 ****************************/
-
-
- /************************** “输入框”的操作 ****************************/
- // 输入框获得焦点时
- onFocus(event){
- this.focusShowList__ && this.switchMgr.open();
- this.$emit('focus', event);
- },
-
- // 输入框失去焦点时
- onBlur(event){
- // 失去焦点时隐藏,在电脑上很好,但在移动端体验不好,因为会弹出数字键盘,然后隐藏键盘时会失去焦点
- this.focusShowList__ && this.switchMgr.close(100);
- this.$emit('blur', event);
- },
-
- //当显示的不是输入框时,上面的点击事件
- onUpperClick(){
- if(this.disabled){
- return;
- }
- this.switchMgr.toggle('auto', -1, 100);
- this.$emit('input-click');
- },
-
- //清空已经选择的内容
- onClear(){
- this.clearItemActive(); // 清空列表框中的所有活动项
- this.clearInput(); // 清空输入框中的显示
- this.$emit('clear');
- },
-
- // 输入框的值变化时
- onInput(event){
- const inputVal = event.detail.value;
- this.changeActiveIndex(inputVal);
- this.$emit('input', event);
- },
- // 清空input中显示的内容
- clearInput(placeholder = null){
- this.placeholder = placeholder== null ? this.placeholder : placeholder;
- this.selectText = this.showInput ? '' : this.placeholder;
- },
- // 设置input中显示的内容
- setInput(text = null){
- if(text == null){
- return;
- }
- this.selectText = text;
- },
- /************************** “输入框”的操作 ****************************/
-
-
- /************************** 列表的操作(显示/隐藏/点击) ****************************/
- /**
- * 传入数字表示索引,其它值表示value, 会自动去搜索对应的索引
- * 注意:
- * 1. 如果没有找到对应的索引,则什么也不会做
- * 2. 如果找到了,只会把对应项设置为活动的,并不会清除其它的活动项
- */
- changeActiveIndex(value_index){ //改变列表中的活动项
- if(value_index == null){
- return;
- }
- let activeIndex = value_index, value = value_index;
- if(typeof value_index !== 'number'){ //认为是值,否则就是索引
- activeIndex = this.getIndex(value); // 搜索对应的值所在的索引
- }else{
- value = this.innerList[activeIndex].value;
- }
- if(activeIndex > -1){
- !this.itemIsActive(activeIndex) && this.setItemActive(activeIndex, value);
- }else{
- this.clearItemActive();
- }
- this.setInput(value); // 更改输入框的值
- },
- clearItemActive(index = -1){ // 设置为不选中
- if(index < 0){ // 清空全部
- this.activeIndex = -1;
- }
- },
- setItemActive(index, value){ //选中某一项,必须传入索引和对应的值
- if(this.itemIsDisabled(index)){
- return;
- }
- this.activeIndex = index;
- },
- // 整个列表框上的点击事件
- onListClick(){
- },
- onClickItem(index, value){ // 列表项上的点击事件
- if( this.itemIsDisabled(index) ){
- this.switchMgr.open(); // 点在禁用项上,就不隐藏
- return;
- }
- this.switchMgr.close(100); // 开始隐藏,因为会延迟隐藏,所以可以写在这里
- if(this.disabled){ //如果本项被禁用 或 整个列表框被禁用
- return;
- }
- if( !this.itemIsActive(index) ){ //如果点在非选中项上
- this.clearItemActive(); // 清空其它的选中的列表项
- this.setItemActive(index, value); // 将这一项设置为选中项
- this.$emit('change', {newVal: value, oldVal: this.selectText,
- index: index, orignItem: this.list[index]});
-
- this.setInput(value); // 更改输入框的值
- }
- },
- onListHide(){ //列表隐藏时的回调
- this.isRotate = false;
- this.isShowList = false;
- this.$emit('visible-change', false);
- },
- onListShow(){ //列表显示时的回调
- this.isShowList = true;
- this.isRotate = true;
- this.$emit('visible-change', true);
-
- if(this.selectHideType === 'independent' || this.selectHideType === 'hideSelf'){
- return;
- }
- Vue.__xfl_select.$emit('open', this);
- }
- /************************** 列表的操作(显示/隐藏/点击) ****************************/
- }
- }
- /************************** uniapp libs ****************************/
- /**
- * 是否是web的移动端
- * @public
- * @returns {boolean} true表示当前环境是web,并且是移动端,false表示非web或是pc端
- */
- function isMobile(){
- try{ // 可能不存在window对象
- let reg = /iPhone|iPad|iPod|iOS|Android|SymbianOS|Windows Phone|coolpad|mmp|smartphone|midp|wap|xoom|symbian|j2me|blackberry|wince/i;
- return reg.test(navigator.userAgent);
- }catch(e){
- return false;
- }
- }
- /**
- * 是否是web的pc端
- * @public
- * @returns {boolean} true表示当前环境是web,并且是pc端,false表示非web或是移动端
- */
- function isPC(){
- try{ // 可能不存在window对象
- let reg = /iPhone|iPad|iPod|iOS|Android|SymbianOS|Windows Phone|coolpad|mmp|smartphone|midp|wap|xoom|symbian|j2me|blackberry|wince/i;
- return !reg.test(navigator.userAgent);
- }catch(e){
- return false;
- }
- }
- /**
- * 获取指定元素的样式
- * 注意:
- * 1. 必须在使用这个函数的文件中 导入 import Vue from 'vue'
- * 2. 自定义组件编译模式(默认模式)时, 必须传入component参数。(h5中测试时不管传不传都能正常获取,但wx中必须传入才行)
- * @public
- * @param {Object|string} options - 配置对象,如果传入一个字符串,则识别为selector
- * selector - dom元素的选择器,仅支持以下选择器:
- * 1. ID选择器:'#the-id'
- 2. class选择器(可以连续指定多个):'.a-class.another-class'
- 3. 子元素选择器:'.the-parent > .the-child'
- 4. 后代选择器:'.the-ancestor .the-descendant'
- 5. 跨自定义组件的后代选择器:'.the-ancestor >>> .the-descendant'
- 6. 多选择器的并集:'#a-node, .some-other-nodes'
- 7. 传入 'viewport' 表示获取视口对象,有点类似于选中window。
- * @param {function|component} [callback=null] - 如果传入一个函数,则识别为获取到样式后的回调,也可以传入一个组件,
- 回调的第一个参数如下:
- // 获取信息成功时,是对象数组,
- // 对象根据options的配置而有不同的字段
- {
- id: '', // String 节点的 ID, 经测试,这个id并不一定正确(特别是选中多个节点时)
- dataset: null, // Object 节点的 dataset
- left: 0, // Number 节点的包围盒的左边界坐标(px)(page元素的左上角为坐标原点)
- right: 0, // Number 节点的包围盒的右边界坐标(px)
- top: 0, // Number 节点的包围盒的上边界坐标(px)
- bottom: 0, // Number 节点的包围盒的下边界坐标(px)
- width: 0, // Number 节点的宽度(px)
- height: 0, // Number 节点的高度(px)
- scrollLeft: 0, // Number 节点的水平滚动位置(px)
- scrollTop: 0, // Number 节点的竖直滚动位置(px)
- context: {} || null, // Object节点对应的Context对象(如VideoContext、CanvasContext、和MapContext)
- ... // properties 数组中指定的属性值和computedStyle数组中指定的样式值
- }
- // 当获取信息失败,则为null
- * @param {any} [thisObj=null] 回调中的this, 可能位于第三个参数或第四个参数。
- * @return {undefined|promise} 当没有callback时,则返回promise,否则返回undefined
- * @example
- * 1. 传入选择器,返回promise
- * getNodeInfo('#aa').then((data)=>{ console.log(data);});
- *
- * 2. 传入选择器和component, 返回promise
- * getNodeInfo('#aa', this).then((data)=>{ console.log(data);});
- *
- * 3. 传入选择器和callback, 返回undefined
- * getNodeInfo('#aa', (data)=>{ console.log(data);});
- *
- * 4. 传入配置对象和callback, 返回undefined
- * getNodeInfo({selector: '#aa', component: this}, (data)=>{ console.log(data);});
- */
- function getNodeInfo({
- selector = 'selector', // 选择器
- component = null, // 选择器所在的组件,不传入的话,相当于是在整个当前页面中选择
- attemptSpaceTime = 16, // 尝试获取节点信息的时间间隔(ms): 16 24 36 54 81 122 183 275 413
- attemptSpaceRate = 1.5, // 时间间隔的增长系数
- totalAttemptNum = 8, // 如果获取信息失败,再次进行尝试获的最大次数
- // 以下为获取到的结果字段的配置
- id = true, // Boolean 是否返回节点 id
- dataset = true, // Boolean 是否返回节点 dataset
- rect = true, // Boolean 是否返回节点布局位置(left right top bottom)
- size = true, // Boolean 是否返回节点尺寸(width height)
- scrollOffset = true, //Boolean 是否返回节点的 scrollLeft scrollTop
- // 以下三个 仅 App 和微信小程序支持
- properties = [], // Array<string> 指定属性名列表,返回节点对应属性名的当前属性值
- // 只能获得组件文档中标注的常规属性值,
- // id class style 和事件绑定的属性值不可获取
- computedStyle = [], //Array<string>指定样式名列表,返回节点对应样式名的当前值
- context = true, // Boolean 是否返回节点对应的 Context 对象
- } = {}, callback = null, thisObj = null){
- // arguments 始终会记录最原始的传进来的参数,而不管这些默认值会怎么转换
- // 因为传入一个对象或非字符串会报错,强制转换为字符串
- const args = arguments;
- selector = typeof args[0] === 'string' ? args[0] : String(selector);
- if(typeof args[1] !== 'function'){
- component = args[1]; callback = args[2]; thisObj = args[3];
- }
- !component instanceof Vue && (component = null); //传入非组件对象,会报错
-
- // 不能把 component 字符添加到这个对象上,否则在wx中会报循环引用的错误
- const options = { selector, attemptSpaceTime, totalAttemptNum, attemptSpaceRate,
- id, dataset, rect, size, scrollOffset, properties, computedStyle, context };
-
- const selectorQuery = uni.createSelectorQuery();
- component && selectorQuery.in(component);
- const nodesRef = selector === 'viewport' ? selectorQuery.selectViewport() : selectorQuery.selectAll(selector);
- nodesRef.fields(options); // 注意,只注册了这一个命令
- let result; // 必须把创建promise的代码放在前面,否则在h5端会出现exec先执行完成的情况
- if(typeof callback !== 'function'){
- result = new Promise(resolve=>callback = resolve);
- }
- stepRunFunc((next, currNum)=>{
- selectorQuery.exec( ([data]) => { // 开始查询页面中的节点
- data && data.length === 0 && (data = null);
- data || totalAttemptNum <= currNum ? typeof callback === 'function' && callback.call(thisObj, data) : next(attemptSpaceTime);
- attemptSpaceTime = Math.round( attemptSpaceTime * attemptSpaceRate );
- });
- })(); // 立即执行一次
-
- return result;
- }
- /************************** uniapp libs ****************************/
- /************************** js libs ****************************/
- /**
- * 开关类,管理两个状态的切换
- * 特点是: 状态的切换可能是延迟进行的。
- * @class
- */
- class Switch{
- constructor(onopen = null, onclose = null){
- this.onopen = onopen; // 打开后的回调
- this.onclose = onclose; // 关闭后的回调
- this.isOpen = false; // 初始时状态是关闭的
- }
- toggle(toState = 'auto', ...args){ //切换开关的状态
- if( !(toState === 'close' || toState === 'open') ){
- toState = this.isOpen ? 'close' : 'open';
- }
- let delayTime_open, delayTime_close, cancelType_open, cancelType_close;
- for(let i=0, arg; i<args.length; i++){
- arg = args[i];
- switch(typeof arg){
- case 'number': delayTime_open == null ? (delayTime_open = arg) : (delayTime_close = arg); break;
- case 'string': cancelType_open == null ? (cancelType_open = arg) : (cancelType_close = arg); break;
- }
- }
- const delayTime = toState === 'open' ? delayTime_open : delayTime_close;
- const cancelType = toState === 'open' ? cancelType_open : cancelType_close;
- this.change(toState, delayTime == null ? -1 : delayTime, cancelType == null ? 'both' : cancelType);
- }
- open(delayTime = -1, cancelType = 'both'){ // 打开
- this.change('open', delayTime, cancelType);
- }
- close(delayTime = -1, cancelType = 'both'){ // 关闭
- this.change('close', delayTime, cancelType);
- }
- cancel(type = 'both'){ // 取消定时器
- if(type === 'open'){
- clearTimeout(this.openTimer); this.openTimer = null;
- }else if(type === 'close'){
- clearTimeout(this.closeTimer); this.closeTimer = null;
- }else if(type === 'both'){
- clearTimeout(this.closeTimer); this.closeTimer = null;
- clearTimeout(this.openTimer); this.openTimer = null;
- }
- }
- change(toState, delayTime = -1, cancelType = 'both' ){ // 改变到指定的状态
- this.cancel(cancelType); // 取消定时器
- if(this.isOpen && toState === 'open' || !this.isOpen && toState === 'close'){
- return;
- }
- const funcName = 'on' + toState;
- if(delayTime < 0){
- this.isOpen = toState === 'open';
- typeof this[funcName] === 'function' && this[funcName]();
- }else{
- this[toState + 'Timer'] = setTimeout(()=>{
- this.isOpen = toState === 'open';
- typeof this[funcName] === 'function' && this[funcName]();
- }, delayTime)
- }
- }
- }
- /**
- * 从一个数组中进行搜索,返回一个索引, 主要特点是可以深层搜索
- * 依赖: forEach props 这两个函数
- * @public
- * @param {Array} arr - 要搜索的数组或类数组或普通对象
- * @param {any} searchVal - 要搜索的值
- * @param {string|Array} [propPath=''] - 要搜索的值的路径, 如 'aa.bb.cc' 或 ['aa', 'bb', 'cc']
- * @param {function} [compareFunc=null] - 比较函数 compareFunc(val, searchVal, arrElem, index, orignArr)
- * 省略时,表示进行全等比较。
- * @example
- * 1. 简单的使用
- * searchIndex([1, 2, 3], 2); // => 1
- *
- * 2. 使用自定义的比较函数
- * searchIndex([1, 2, 3], '2', '', (val, searchVal)=>val==searchVal); // => 1
- *
- * 3. 指定用值的路径
- * searchIndex([1, {aa: 3}, {aa: {bb: 3}}, {aa: {bb: 4}], 3, 'aa.bb'); // => 1
- */
- function searchIndex(arr, searchVal, propPath = '', compareFunc = null){
- let result_index= -1;
- if(propPath){
- if(typeof propPath === 'string'){
- propPath = propPath.split(/\s*[\,\.]\s*/);
- }else if( !Array.isArray(propPath) ){
- propPath = '';
- }
- }
- forEach(arr, (val, index, orignArr)=>{
- if(propPath){
- val = props(val, propPath);
- }
- if(
- typeof compareFunc === 'function'
- ? compareFunc(val, searchVal, arrElem, index, orignArr)
- : val === searchVal
- ){
- result_index = index;
- return false;
- }
- });
- return result_index;
- }
- /**
- * 遍历数组或类数组或普通对象
- * 跟原生的forEach的差别是: 可以遍历普通对象,也可以中途可以退出。
- * 注意,类数组只会遍历其中的数字属性。
- * @public
- * @param {object|Array} obj - 要遍历的对象
- * @param {function} func - 回调 func.call(thisObj, value, prop, obj);
- * @param {any} [thisObj=null] - 回调中的this
- * @example
- * 1. forEach({a: 3, b: 4}, (val, prop, obj)=>{ // 遍历普通对象
- * return false; //返回false 表示退出循环
- * });
- *
- * 2. forEach([3, 4], (val, index, obj)=>{ // 遍历数组
- * return false; //返回false 表示退出循环
- * });
- *
- * 3. forEach({1: 3, 5: 10, a: 'aa', length: 20}, (val, index, obj)=>{ // 遍历类数组
- * return false; //返回false 表示退出循环
- * });
- */
- function forEach(obj, func, thisObj = null) {
- if (obj == null || typeof obj === 'function' || typeof func !== 'function') {
- return obj;
- }
- //对象自身的(不含继承的)所有可遍历(enumerable)属性
- let keys = Object.keys(obj);
- const length = obj.length;
- const isArrayLike = typeof length == 'number' && length > -1 && length % 1 == 0 && length <= 9007199254740991;
- //如果是类数组或数组,只遍历其中的数字属性
- if (isArrayLike) {
- const reg = /^(?:0|[1-9]\d*)$/,
- maxNum = 9007199254740991,
- numPropArr = [];
- for (let i = 0, val; i < keys.length; i++) {
- val = keys[i];
- if (reg.test(val) && +val <= maxNum) {
- numPropArr.push(val);
- }
- }
- keys = numPropArr;
- }
- // 开始遍历所有的数字属性
- for (let i = 0; i < keys.length; i++) {
- if ( func.call(thisObj, obj[keys[i]], keys[i], obj) === false ) { break; }
- }
- return obj;
- }
- /**
- * 从一个对象上取指定的属性 或 设置属性的值
- * @public
- * @param {Object} obj - 对象, 当设置时,会更改这个对象
- * @param {Array} propArr - 属性名称的数组,指出要操作的属性的路径
- * @param {any} [val=undefined] - 要设置的值 省略时表示获取,否则就是设置
- * @param {Boolean} [fource=false] - 在设置时,如果不存在对应的属性,是否创建
- * @returns {any|undefined} 设置时一定返回undefined, 获取时,返回对应的值,如果不存在则返回undefined
- * @example
- * 1. props({}, ['aa', 'bb', 'cc'], 5); // => undefined 什么也没做
- * 2. props({}, ['aa', 'bb', 'cc'], 5, true); // => undefined 在空对象上创建了多层属性 {aa: {bb: {cc: 5} }}
- * 3. props({}, ['aa', 'bb', 'cc']); // => undefined
- * 4. props({aa: {bb: 77}}, ['aa', 'bb']); // => 77
- * 5. props({aa: 3}, ['aa', 'bb', 'cc'], 5); // => undefined 什么也没做
- * 6. props({aa: 3}, ['aa'], 5); // => undefined 设置了 aa 的值为5
- * 7. props({aa: 3}, [], 5); // => undefined 什么也没做
- */
- function props(obj, propArr, val = undefined, fource = false){
- for(let i=0, subObj = obj, len = propArr.length, propName; i<len; i++){
- if(!subObj || typeof subObj !== 'object'){
- return;
- }
- propName = propArr[i];
- if(i === len -1 ){
- if(val === undefined){
- return subObj[ propName ];
- }else{
- subObj[ propName ] = val;
- }
- }else{
- if( !(subObj[ propName ] && typeof subObj[ propName ] === 'object') ){
- if(fource && val !== undefined){
- subObj[ propName ] = {};
- }else{
- return;
- }
- }
- subObj = subObj[ propName ];
- }
- }
- }
-
- /**
- * 分次执行某个函数
- * 使用场景: 异步执行某个操作,这个操作可能会失败,所以当失败时,需要再尝试几次,直到成功或尝试次数用完
- * @public
- * @param {function} callback - 要执行的函数 callback.call(thisObj, next, currCount, timers)
- * @param {any} [thisObj=null] - callback中的this
- * @returns {function} 返回next函数,next函数可以传入以下两个参数
- * {any} [delayTime=-1] - 延迟多久(ms)再执行下一次callback回调
- * 负数、NaN、Infinite表示立即同步调用,其它值表示延迟执行
- * {string} [type='both'] - 当调用next时,如果其它地方也调用了next并且还没有完成,此时该保留哪次调用
- * 'new' - 保留本次的,清除所有原来的
- * 'old' - 保留所有原来的,舍弃本次的
- * 'both' - 两个都保留
- * @example
- * 1. 最简单的使用
- * stepRunFunc((next, currCount, timers)=>{
- * console.log('执行第' + currCount + '次');
- * currCount <= 2 && next(2000);
- * })();
- * // => 会立即执行第一次,然后2s后再执行第二次
- *
- * 2. next()函数的第二个参数,是考虑到,用户可能会在短时间内连续调用多次,此时应该怎么处理这些next调用之间的关系
- * stepRunFunc((next, currCount, timers)=>{
- * console.log('执行第' + currCount + '次');
- * if(currCount <= 2 ){
- * next(3000);
- * setTimeout(()=>{next(1000, 'old')}, 1000); // 这一次next调用将不起作用
- * }
- * })();
- * // => 会立即执行第一次,然后3s后再执行第二次
- */
- function stepRunFunc(callback, thisObj = null){
- const getDelayTime = (delayTime)=>{ // 转换delayTime的格式
- delayTime = parseInt(delayTime);
- if(isNaN(delayTime) || !isFinite(delayTime)){
- delayTime = -1;
- }
- return delayTime;
- }
- const timers = []; // 记录所有正在执行的计时器
- const clearTimer = (oneTimer)=>{ // 清除定时器
- if(oneTimer == null){
- for(let i=0; i<timers.length; i++){
- clearTimeout(timers[i]);
- }
- timers.length = 0;
- }else{
- const index = timers.indexOf(oneTimer);
- if(index > -1){
- clearTimeout(timers[index]);
- timers.splice(index, 1);
- }
- }
- }
- let currCount = 0; // 记录callback当前已经执行了的次数
- const next = function(delayTime = -1, type = 'both'){
- if(type === 'new'){ // 如果只保留最新的next回调
- clearTimer();
- }else if(type === 'old' && timers.length > 0){ // 保留以前的next回调,忽略本次next回调
- return;
- }
- delayTime = getDelayTime(delayTime);
- if(delayTime < 0){
- callback.call(thisObj, next, ++currCount, timers);
- }else{
- const oneTimer = setTimeout(()=>{
- clearTimer(oneTimer);
- callback.call(thisObj, next, ++currCount, timers);
- }, delayTime);
- timers.push(oneTimer);
- }
- }
- return next;
- }
- /************************** js libs ****************************/
- </script>
- <style scoped lang="less">
- @normal-color: #606266; //正常情况下的字体颜色
- @hover-color: #c0c4cc; //边框的颜色
- @active-color: #409eff; //活动的颜色
- @mouse-move-color: #f5f7fa; //在列表项上按下时的列表项的背景色
- @padding-left: 5%; //两侧的边距
- @arrowWidth: 12%; //右边的小三角按钮区域的宽度
- .placeholder11{
- color: red; top: 10px;
- }
- .show-box{
- &.active{
- border-color: @active-color;
- }
- // &:hover{
- // border-color: @normal-color;
- // &.active{
- // border-color: @active-color;
- // }
- // }
- &.disabled{
- background-color: #f0f0f0;
- }
- text-align: left;
- -webkit-appearance: none;
- background-color: #fff;
- background-image: none;
- border-radius: 4px;
- border: 1px solid @hover-color;
- box-sizing: border-box;
- color: @normal-color;
- display: inline-block;
- font-size: inherit;
- height: 3em;
- line-height: inherit;
- outline: none;
- padding: 0 @arrowWidth 0 @padding-left;
- transition: border-color .2s cubic-bezier(.645,.045,.355,1);
- width: 100%;
- position: relative;
- .input{
- width: 100%; height: 100%;
- display: flex; align-items: center; justify-content: flex-start;
- }
- .placeholder{
- color: #bbb;
- }
-
- //*************************** 右侧的小箭头 ***************************
- .right-arrow{
- &.isRotate{
- transform: rotate(180deg);
- }
- transition: transform .2s cubic-bezier(.645,.045,.355,1);
- position: absolute; font-size: 1em; right: 0px; display: flex;
- top: 0;
- align-items: center; color: @hover-color; height: 100%;
- font-weight: 100; width: @arrowWidth; justify-content: center;
- }
- .clear{
- color: #fff; line-height: 1;
- background-color: @hover-color; border-radius: 50%; padding: 2px;
- }
-
- /****** 列表框部分样式 *****/
- .list-container{
- position: absolute; width: 100%; left: 0; top: 50px;
- box-sizing: border-box; z-index: 100;
-
- //*************************** 弹出框上面的小三角 ***************************
- .popper__arrow{
- transform: translateX(-400%);
- position: absolute;
- display: block;
- width: 0;
- height: 0;
- border-color: transparent;
- border-style: solid;
- border-width: 6px;
- filter: drop-shadow(0 2px 12px rgba(0,0,0,.03));
- left: 30%;
- margin-right: 3px;
- border-top-width: 0;
- border-bottom-color: #dcdfe6;
- top: -5px;
- &:after{
- content: " ";
- border-width: 6px;
- position: absolute;
- display: block;
- width: 0;
- height: 0;
- border-color: transparent;
- border-style: solid;
- top: 1px;
- margin-left: -6px;
- border-top-width: 0;
- border-bottom-color: #fff;
- }
- }
- .list{
- border-radius: 4px;
- border: 1px solid #dcdfe6;
- width: 100%;
- max-height: 10em;
- background-color: #fff;
- box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
- padding: 5px 0;
-
- //*************************** 弹出框中每一项样式 ***************************
- .item{
- &:hover{
- background-color: @mouse-move-color;
- &.disabled{
- background-color: transparent;
- }
- }
- &.active{
- color: @active-color;
- font-weight: 500;
- background-color: @mouse-move-color;
- }
- &.disabled{
- color: @hover-color;
- }
- padding: 0 @padding-left;
- line-height: 2;
- }
- .data-state{
- color: @hover-color;
- }
- }
- }
- }
-
- //************************************** 以下为字体 ****************************************
- @font-face {font-family: "iconfont";
- src:
- url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAM8AAsAAAAAB1gAAALvAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAqCEIFsATYCJAMQCwoABCAFhG0HSxthBhEVlKdkPwvsmHgLNqmwEc2pDxvYjI1gkX0f4uFrv9dz3+772RAqQJV8FbKANj5RiB1f1q0ioyorK1THs2Qj0gAJVYn///3mxT27TKyJJ63gD/KkYhr/9woe4ghtLxKJk5AWd7icc+CiJuQLU5SVQ48+ST+l0H2/pM2sm89zOb2VZYHMb1luYy3a0496AWYLKLA9sQ0UaAEFxC2yi7gTF3GaQJtRTbFxcfcIRYYmBeKyjDJQCiFZNrJFaDSszOI11Ep1IQZeRd+P/zAXcip1gmbuHJ/nYeWX9redqtuqPU6AYj4vjHUkNJGJ08bUviQMXtL2m2wJRVHxS/sz/N1+2CZOdizDemP/eBXRgCo7wIKcTvzSUnlmGMoSgt/tChX8EEOBlNvCLsQdpgv8HuNG8wuia9YA1Tfni5TZR1QthTxh8ZM2VCAHtiBtzfWtz1RtObA8IXowr5rzRK4/sRYpfjm1FBA9nrPl/qNAJRZLKJNsUumMKdb3dkIlkqjEtt8VrbNjZgnB48fG1XqNHax98/uI4xs768DFXVceFql2do6594N/t9vl/tw+ZlhKP6ngFjorHQq/AOmpcAlI98L7Pz/KG7P0OqU7+SuqQ7d8OXhYRvZsnLHcTCD4zwpgXfZVyJGzq6byIJiNgyZUaNOGv5ujz885jIPgWkIxOCLYYiRDUkyTmdNErd0CGopltJm1vb5dv3tJ5DDjpYTQ4wMqXT4h6fGZzJwfqA2R/SGlDxGUnsO0o4onyuKUUDLWoDbodPCGuFjE1U9sJispr4r4X6Sxi0IRiZWzD/RIc8wZ56ZkNmAoOLhL56G1ASKFHjWnLXOssmix6UWpDm4nnCJIYqgGlA3oaIFneHMmKp9/Qo2JJVEHqyf9hcio6x0UUjmAfOg9iHUvl4xmjRJjBjBI4IC7NAxZVgBi87Ae0liqHZGIKhluZKD6dH2j+8Jd0AY9MUcVKXLU5I9a6XU7FUcUppMkCss5MAeXmM7a3Q4A') format('woff2'),
- url('data:application/x-font-woff;charset=utf-8;base64,d09GMgABAAAAAAM8AAsAAAAAB1gAAALvAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAqCEIFsATYCJAMQCwoABCAFhG0HSxthBhEVlKdkPwvsmHgLNqmwEc2pDxvYjI1gkX0f4uFrv9dz3+772RAqQJV8FbKANj5RiB1f1q0ioyorK1THs2Qj0gAJVYn///3mxT27TKyJJ63gD/KkYhr/9woe4ghtLxKJk5AWd7icc+CiJuQLU5SVQ48+ST+l0H2/pM2sm89zOb2VZYHMb1luYy3a0496AWYLKLA9sQ0UaAEFxC2yi7gTF3GaQJtRTbFxcfcIRYYmBeKyjDJQCiFZNrJFaDSszOI11Ep1IQZeRd+P/zAXcip1gmbuHJ/nYeWX9redqtuqPU6AYj4vjHUkNJGJ08bUviQMXtL2m2wJRVHxS/sz/N1+2CZOdizDemP/eBXRgCo7wIKcTvzSUnlmGMoSgt/tChX8EEOBlNvCLsQdpgv8HuNG8wuia9YA1Tfni5TZR1QthTxh8ZM2VCAHtiBtzfWtz1RtObA8IXowr5rzRK4/sRYpfjm1FBA9nrPl/qNAJRZLKJNsUumMKdb3dkIlkqjEtt8VrbNjZgnB48fG1XqNHax98/uI4xs768DFXVceFql2do6594N/t9vl/tw+ZlhKP6ngFjorHQq/AOmpcAlI98L7Pz/KG7P0OqU7+SuqQ7d8OXhYRvZsnLHcTCD4zwpgXfZVyJGzq6byIJiNgyZUaNOGv5ujz885jIPgWkIxOCLYYiRDUkyTmdNErd0CGopltJm1vb5dv3tJ5DDjpYTQ4wMqXT4h6fGZzJwfqA2R/SGlDxGUnsO0o4onyuKUUDLWoDbodPCGuFjE1U9sJispr4r4X6Sxi0IRiZWzD/RIc8wZ56ZkNmAoOLhL56G1ASKFHjWnLXOssmix6UWpDm4nnCJIYqgGlA3oaIFneHMmKp9/Qo2JJVEHqyf9hcio6x0UUjmAfOg9iHUvl4xmjRJjBjBI4IC7NAxZVgBi87Ae0liqHZGIKhluZKD6dH2j+8Jd0AY9MUcVKXLU5I9a6XU7FUcUppMkCss5MAeXmM7a3Q4A') format('woff')
- }
- .iconfont {
- font-family: "iconfont" !important;
- font-size: 16px;
- font-style: normal;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- }
- .iconshanchu1:before {
- content: "\e68c";
- }
- .icongou:before {
- content: "\e786";
- }
- .iconarrowBottom-fill:before {
- content: "\e60e";
- }
- </style>
|