uni-app select All In One

uni-app select All In One

https://uniapp.dcloud.io/component/picker

https://hellouniapp.dcloud.net.cn/pages/component/picker/picker

技术选型

https://github.com/dcloudio/uni-app/blob/master/docs/select.md

https://uniapp.dcloud.io/select

picker

https://uniapp.dcloud.io/component/picker

https://ask.dcloud.net.cn/article/36083

select

https://ext.dcloud.net.cn/plugin?id=518
https://ask.dcloud.net.cn/question/69929

https://github.com/xiafl/hx_uniapp_compontent__xfl-select

https://github.com/xiafl/hx_uniapp_compontent__xfl-select/blob/master/test_select/components/xfl-select/xfl-select.vue

<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>

css fonts & base64

data:application/x-font-woff2;charset=utf-8;base64,

https://raw.githubusercontent.com/xiafl/hx_uniapp_compontent__xfl-select/master/test_select/components/xfl-select/xfl-select.vue

//**************************************  以下为字体  ****************************************
@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";
}

refs

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---