ai.touchui-vue 1.30.2 → 1.30.3

package/packages/select/src/select.vue

@@ -1,1445 +1,1445 @@
-<template>
-	<span :id="id" ref="link" v-tip="changed ? t('to.common.originalValue', getLabel(valueStore[0])) : ''" class="to-select" :class="setClass" :style="setStyle" :tabindex="inputable || filterable ? '-1' : tabindex" @mousedown="layerMousedown" @focus="focus" @blur="blur" @keyup.enter="enter" @keyup.esc="closeLayer">
-		<span v-if="verifiable && (rule || required || ToFormItem.required)" v-show="false" :trim="trim" :req="validateRequired" class="to-validate" :desc="validateDesc" :rule="rule" :value="validateValue"></span>
-		<span v-if="$slots.prefix" class="to-selectPrefix"><slot name="prefix"></slot></span>
-		<span class="to-selectContent" :class="setContentClass" @click="click">
-
-			<!-- 前缀文本/图标 -->
-			<to-icon v-if="icon" v-bind="iconProps" :value="icon" mode="none" class="to-selectIcon"></to-icon>
-			<span v-if="prefix" class="to-selectPrefixLabel">{{ prefix }}</span>
-
-			<!-- 原生模式 -->
-			<template v-if="native">
-				<span class="to-selectValue">
-					<select ref="selector" v-model="iValue">
-						<option v-if="clearable" value="">{{ placeholder }}</option>
-						<option v-for="(item, index) in options" :key="index" :value="item[iValueText]">{{ item[iLabelText] }}</option>
-					</select>
-				</span>
-			</template>
-
-			<!-- 模拟选项 -->
-			<template v-else>
-
-				<!-- 单选 -->
-				<template v-if="!multiple">
-					<span v-if="(!inputable && !filterable && !setDataFn) || $phone" class="to-selectValue">
-						<template v-if="selected[iLabelText]">{{ selected[iLabelText] }}</template>
-						<template v-else>{{ placeholder }}</template>
-					</span>
-					<span v-else class="to-selectInput">
-						<to-input v-if="inputable && !filterable && !setDataFn" ref="input" v-model="inputValue" :sp-chars="spChars" :tabindex="tabindex" :clearable="clearable" prevent-focus width="full" mode="none" :placeholder="placeholder" @focus="inputFocus" @keyup="inputInput" @blur="inputBlur"></to-input>
-						<to-input v-if="filterable" ref="filter" v-model="filterValue" :focus-when-clear="focusWhenClear" :sp-chars="inputable ? spChars : false" :tabindex="tabindex" :clearable="clearable" prevent-focus width="full" mode="none" :placeholder="placeholder" @clear="filterClear" @focus="filterFocus" @keyup="filterInput" @blur="filterBlur"></to-input>
-						<to-input v-if="setDataFn" v-model="setDataInputValue" :sp-chars="inputable ? spChars : false" :tabindex="tabindex" :clearable="clearable" prevent-focus width="full" mode="none" :placeholder="placeholder" @clear="filterClear" @focus="filterFocus" @keyup="filterInput" @blur="filterBlur"></to-input>
-					</span>
-				</template>
-
-				<!-- 多选 -->
-				<template v-else>
-					<span v-if="selected.filter(item => !item.hide).length === 0 && !inputable && !filterable && !setDataFn" class="to-selectValue">{{ placeholder }}</span>
-					<span v-if="(isAll && useAllText)" v-color="allTextColor" class="to-selectValue">{{ allText }}</span>
-					<span class="to-selectTag">
-						<template v-if="selected.length > 0 && !(isAll && useAllText)">
-							<template v-for="(item, index) in selected">
-								<to-tag v-if="!item.hide" :key="index" color="fg" mode="plain" :deletable="!disabled" @delete="removeTag(item)">{{ item[iLabelText] }}</to-tag>
-							</template>
-						</template>
-						<template v-if="!$phone || ($phone && selected.length === 0)">
-							<to-input v-if="inputable && !filterable" ref="input" v-model="multipleInputValue" :sp-chars="spChars" :readonly="$phone" prevent-focus mode="none" :placeholder="selected.filter(item => !item.hide).length > 0 ? '' : placeholder " @focus="multipleInputFocus" @blur="multipleInputBlur"></to-input>
-							<to-input v-if="filterable" ref="filter" v-model="multipleFilterValue" :sp-chars="inputable ? spChars : false" :readonly="$phone" prevent-focus mode="none" :placeholder="selected.filter(item => !item.hide).length > 0 ? '' : placeholder " @focus="multipleFilterFocus" @blur="multipleFilterBlur"></to-input>
-							<to-input v-if="setDataFn" ref="filter" v-model="setDataInputValue" :sp-chars="inputable ? spChars : false" prevent-focus mode="none" :placeholder="selected.filter(item => !item.hide).length > 0 ? '' : placeholder " @focus="multipleFilterFocus" @blur="multipleFilterBlur"></to-input>
-						</template>
-					</span>
-				</template>
-
-				<!-- 箭头 -->
-				<span v-if="arrowType === 'browse'" class="to-selectBrowse">
-					<to-icon value="browse" color="primary" mode="none" :link="inputable || filterable"></to-icon>
-				</span>
-				<span v-else-if="arrowType === 'next'" class="to-selectArrow to-selectArrow-right"></span>
-				<span v-else class="to-selectArrow"></span>
-
-			</template>
-
-			<!-- 后缀文本 -->
-			<span v-if="suffix" class="to-selectSuffixLabel">{{ suffix }}</span>
-
-		</span>
-		<span v-if="$slots.suffix" class="to-selectSuffix"><slot name="suffix"></slot></span>
-		<span v-if="errorTip" v-color="'danger'" class="to-box-tip">
-			<template v-if="errorType === 'rule'">
-				<template v-if="inputable">输入有误</template>
-				<template v-else>选择有误</template>
-				<to-icon v-tip.danger="errorTip" value="help" color="danger" mode="toast" fillet="round"></to-icon>
-			</template>
-			<template v-else>
-				不能为空
-			</template>
-		</span>
-		<to-float v-if="optionDisplay !== 'none'" ref="layer" :align="optionAlign" class="to-selectLayer" :lazy="lazy" :slide="layerSlide" :width="iOptionWidth" :position="layerPosition" @closed="layerClose" @mousedown="layerMousedown">
-
-			<to-padding v-if="dataLoading" v-align="'center'" :value="2">
-				<to-icon value="loading"></to-icon>
-			</to-padding>
-
-			<template v-else>
-
-				<slot :data="options">
-					<to-grid v-if="(optionDisplay === 'popup' || ((inputable || filterable) && $phone))" height="full" type="v">
-						<to-grid-item side>
-							<to-header level="0" :title="validateDesc ? t('to.select.float.title', validateDesc) : t('to.select.float.titlePlaceholder', validateDesc)" @back="closeLayer()">
-								<to-button fillet="normal" icon="close" mode="none" color="primary" @click="clear(); closeLayer();">{{ t('to.common.clear') }}</to-button>
-							</to-header>
-							<to-padding v-if="filterable || inputable" position="side">
-								<template v-if="multiple">
-									<template v-if="inputable">
-										<span class="to-select to-select-arrow-none" style="width:100%;" :class="fillet === 'normal' ? 'to-input-fillet-normal' : ''">
-											<span class="to-selectContent">
-												<span class="to-selectTag">
-													<template v-if="selected.length > 0 && !(isAll && useAllText)">
-														<template v-for="(item, index) in selected">
-															<to-tag v-if="!item.hide" :key="index" color="fg" mode="plain" :deletable="!disabled" @delete="removeTag(item)">{{ item[iLabelText] }}</to-tag>
-														</template>
-													</template>
-													<to-input v-if="filterable" ref="popupFilter" v-model="multipleFilterValue" :sp-chars="spChars" prevent-focus mode="none" :placeholder="selected.filter(item => !item.hide).length > 0 ? '' : placeholder ">
-														<to-button icon="ok" mode="none" color="primary" @click="enter"></to-button>
-													</to-input>
-													<to-input v-else ref="popupInput" v-model="multipleInputValue" prevent-focus mode="none" :placeholder="selected.filter(item => !item.hide).length > 0 ? '' : placeholder ">
-														<to-button icon="ok" mode="none" color="primary" @click="enter"></to-button>
-													</to-input>
-												</span>
-											</span>
-										</span>
-									</template>
-									<to-input v-else ref="popupFilter" v-model="multipleFilterValue" :sp-chars="false" width="full" prevent-focus :placeholder="selected.filter(item => !item.hide).length > 0 ? '' : placeholder "></to-input>
-								</template>
-								<template v-else>
-									<to-input v-if="inputable" ref="popupInput" v-model="inputValue" :sp-chars="spChars" prevent-focus width="full" :placeholder="placeholder"></to-input>
-									<to-input v-else ref="popupFilter" v-model="filterValue" :sp-chars="false" prevent-focus width="full" placeholder="筛选" @clear="filterClear"></to-input>
-								</template>
-							</to-padding>
-						</to-grid-item>
-						<to-grid-item>
-
-							<!-- 无数据 -->
-							<to-padding v-if="nodata" v-color="'info'" :value="2">
-								{{ nodataText }}
-							</to-padding>
-
-							<!-- 无匹配项 -->
-							<to-padding v-else-if="nomatch" v-color="'info'" :value="2">
-								{{ nomatchText }}
-							</to-padding>
-
-							<to-scroll v-if="!nodata && !nomatch">
-								<to-padding :value="0.5">
-
-									<!-- 多选 -->
-									<template v-if="multiple">
-										<to-padding :value="0.5">
-											<to-button mode="text" color="primary" fillet="normal" @click="selectAll">{{ t('to.common.selectAll') }}</to-button>
-											<to-button mode="text" color="primary" fillet="normal" @click="Deselect">{{ t('to.common.Deselect') }}</to-button>
-										</to-padding>
-										<to-grid :col="optionCol">
-											<to-grid-item v-for="item in options" v-show="multipleFilter(item)" :key="item[iValueText]" v-dis="!!item.disabled">
-												<to-checkbox :wrap="optionWrap" :title="item[iLabelText]" width="full" :label="item[iLabelText]" :readonly="!!item.disabled" :value="Boolean(selected.find(el => el[iValueText] === item[iValueText]))" @change="value => {return multipleItemChange(value, item)}"></to-checkbox>
-											</to-grid-item>
-										</to-grid>
-									</template>
-
-									<!-- 单选 -->
-									<template v-else>
-										<to-grid :col="optionCol">
-											<to-grid-item v-for="item in options" v-show="filter(item)" :key="item[iValueText]">
-												<to-card v-dis="!!item.disabled" :wrap="optionWrap" :title="optionWrap ? '' : item[iLabelText]" link :color="selected[iValueText] === item[iValueText] ? 'primary' : 'default'" @click.stop="itemChange(item)">
-													<template v-if="item[iLabelText]">{{ item[iLabelText] }}</template>
-													<template v-else>{{ placeholder }}</template>
-												</to-card>
-											</to-grid-item>
-										</to-grid>
-									</template>
-
-								</to-padding>
-							</to-scroll>
-						</to-grid-item>
-						<to-grid-item side>
-							<to-submit width="full" space="0">
-								<to-button v-size="'l'" fillet="none" color="primary" mode="line" @click="phoneCloseLayer(); iValue = '';">{{ t('to.common.clear') }}</to-button>
-								<to-button v-size="'l'" mode="fill" color="primary" fillet="none" @click="phoneCloseLayer();">{{ t('to.common.confirm') }}</to-button>
-							</to-submit>
-						</to-grid-item>
-					</to-grid>
-					<template v-else>
-
-						<!-- 无数据 -->
-						<to-padding v-if="nodata" v-color="'info'" :value="2">
-							{{ nodataText }}
-						</to-padding>
-
-						<!-- 无匹配项 -->
-						<to-padding v-else-if="nomatch" v-color="'info'" :value="2">
-							{{ nomatchText }}
-						</to-padding>
-
-						<to-scroll v-if="!nodata && !nomatch">
-							<to-padding :value="0.5">
-
-								<!-- 多选 -->
-								<template v-if="multiple">
-									<to-padding :value="0.5">
-										<to-button mode="text" color="primary" fillet="normal" @click="selectAll">{{ t('to.common.selectAll') }}</to-button>
-										<to-button mode="text" color="primary" fillet="normal" @click="Deselect">{{ t('to.common.Deselect') }}</to-button>
-									</to-padding>
-									<to-grid :col="optionCol">
-										<to-grid-item v-for="item in options" v-show="multipleFilter(item)" :key="item[iValueText]" v-dis="!!item.disabled">
-											<to-checkbox :wrap="optionWrap" :title="item[iLabelText]" width="full" :label="item[iLabelText]" :readonly="!!item.disabled" :value="Boolean(selected.find(el => el[iValueText] === item[iValueText]))" @change="value => {return multipleItemChange(value, item)}"></to-checkbox>
-										</to-grid-item>
-									</to-grid>
-								</template>
-
-								<!-- 单选 -->
-								<template v-else>
-									<to-grid :col="optionCol">
-										<to-grid-item v-for="item in options" v-show="filter(item)" :key="item[iValueText]">
-											<to-card v-dis="!!item.disabled" :wrap="optionWrap" :title="optionWrap ? '' : item[iLabelText]" link :color="selected[iValueText] === item[iValueText] ? 'primary' : 'default'" @click.stop="itemChange(item)">
-												<template v-if="item[iLabelText]">{{ item[iLabelText] }}</template>
-												<template v-else>{{ placeholder }}</template>
-											</to-card>
-										</to-grid-item>
-									</to-grid>
-								</template>
-
-							</to-padding>
-						</to-scroll>
-
-					</template>
-				</slot>
-
-			</template>
-
-		</to-float>
-	</span>
-</template>
-<script>
-import ajax from 'ai.touchui-vue/src/utils/ajax'
-import { unique } from '../../../src/utils/array.js'
-import Locale from 'ai.touchui-vue/src/mixins/locale'
-import Tip from 'ai.touchui-vue/src/mixins/tip'
-import { t } from 'ai.touchui-vue/src/locale'
-export default {
-	name: 'ToSelect',
-	componentName: 'ToSelect',
-	mixins: [Locale, Tip],
-	model: {
-		event: 'change'
-	},
-	inject: {
-		ToForm: {
-			default: ''
-		},
-		ToFormItem: {
-			default: ''
-		}
-	},
-	props: {
-		lazy: {
-			type: Boolean,
-			default() {
-				if (this.$TouchUI && this.$TouchUI.select && this.$TouchUI.select.lazy === false) {
-					return false
-				} else {
-					return true
-				}
-			}
-		},
-
-		// 原生模式（性能极端低下情况下使用）
-		native: {
-			type: Boolean,
-			default() {
-				if (this.$TouchUI) {
-					return this.$TouchUI.select.native
-				} else {
-					return false
-				}
-			}
-		},
-
-		// 表单校验
-		desc: {
-			type: String,
-			default: ''
-		},
-		rule: {
-			type: String,
-			default: ''
-		},
-		id: {
-			type: String,
-			default: ''
-		},
-		required: Boolean,
-
-		// 安全---------
-		spChars: {
-			type: [String, Boolean],
-			default: '/,\\,[,],{,},"' // 微软拼音输入法使用单引号做上屏前多个字符分隔符，不能过滤单引号
-		},
-
-		// 基本功能
-		splitSymbol: {
-			type: String,
-			default: ''
-		},
-		tabindex: {
-			type: String,
-			default: '1'
-		},
-		valueText: {
-			type: String,
-			default: 'value'
-		},
-		labelText: {
-			type: String,
-			default: 'label'
-		},
-		value: {
-			type: [String, Number, Array],
-			default: ''
-		},
-		data: {
-			type: [Array, String],
-			default: () => t('to.common.data')
-		},
-		placeholder: {
-			type: String,
-			default: () => t('to.common.placeholder.select')
-		},
-		placeholderColor: {
-			type: String,
-			default: ''
-		},
-		nomatchText: {
-			type: String,
-			default: () => t('to.common.noMatch')
-		},
-		nodataText: {
-			type: String,
-			default: () => t('to.common.noData')
-		},
-		readonly: Boolean, // 是否只读
-		multiple: Boolean, // 是否多选
-		filterable: Boolean, // 是否开启选项过滤
-		inputable: Boolean, // 是否动态增加 options
-		useAllText: Boolean,
-		allText: {
-			type: String,
-			default: () => t('to.select.input.allSelected')
-		},
-		allTextColor: {
-			type: String,
-			default: 'primary'
-		},
-		clearable: {
-			type: Boolean,
-			default: true
-		},
-		// 外观设置
-		color: {
-			type: String,
-			default: 'default'
-		},
-		mode: {
-			type: String,
-			default: ''
-		},
-		fillet: {
-			type: String,
-			default() {
-				return this.$TouchUI.select.fillet || this.$TouchUI.global.fillet || 'normal'
-			}
-		},
-		filletPosition: {
-			type: String,
-			default: ''
-		},
-		width: {
-			type: [Number, String],
-			default: ''
-		},
-		arrowType: {
-			// browse / ''
-			type: String,
-			default: ''
-		},
-		// 选项设置
-		optionWidth: {
-			type: [Number, String],
-			default: ''
-		},
-		optionDisplay: {
-			// none / *float / popup
-			type: [Number, String],
-			default: ''
-		},
-		optionCol: {
-			type: [Number, String],
-			default: 1
-		},
-		optionWrap: Boolean,
-		optionAlign: {
-			type: String,
-			default: 'left'
-		},
-		// 异步数据参数
-		httpRequest: {
-			type: Function,
-			default: ajax
-		},
-		api: {
-			type: String,
-			default: ''
-		},
-		apiParam: {
-			type: Object,
-			default: null
-		},
-		apiHeaders: {
-			type: Object,
-			default: () => {}
-		},
-		apiLabel: {
-			type: String,
-			default: ''
-		},
-		resPath: {
-			type: String,
-			default: ''
-		},
-		errorPath: {
-			type: String,
-			default: ''
-		},
-		successCode: {
-			type: String,
-			default: '0'
-		},
-		// 远程异步数据设置
-		setDataFn: {
-			type: Function,
-			default: null
-		},
-		// 插件
-		prefix: {
-			type: String,
-			default: ''
-		},
-		suffix: {
-			type: String,
-			default: ''
-		},
-		icon: {
-			type: String,
-			default: ''
-		},
-		iconProps: {
-			type: Object,
-			default: ()=>{}
-		},
-		// 基本功能
-		trim: {
-			type: Boolean,
-			default: true
-		},
-		closeSelection: {
-			// 多选时，每次选择都关闭弹窗
-			type: Boolean,
-			default: false
-		},
-		verifiable: {
-			type: Boolean,
-			default: true
-		},
-		comparable: Boolean,
-		setLabelFn: undefined, // 传入一个 Function 设置每一项的 label，return String，
-		wrap: Boolean,
-		focusWhenClear: {
-			// filterable模式下清空数据是否弹出下拉框
-			type: Boolean,
-			default: false
-		},
-		beforeChange: {
-			type: Function,
-			default: null
-		},
-		valueType: {
-			type: String,
-			default: ''
-		}
-	},
-	data() {
-		return {
-			isChanging: false,
-			errorTip: '',
-			errorType: 'rule',
-			iValue: '',
-			valueStore: [],
-			dataLoading: false,
-			selected: null,
-			inited: false,
-			multipleInputValue: '',
-			multipleFilterValue: '',
-			setDataInputValue: '',
-			filterValue: '',
-			inputValue: '',
-			focused: false,
-			blurByLayer: false,
-			options: [],
-			anotherOptions: [], // 只作用于手机端
-			layerSlide: false,
-			layerPosition: 'auto',
-			disabled: this.readonly,
-			iApiHeaders: {},
-			inputing: false
-		}
-	},
-	computed: {
-		showTag() {
-			return this.inputable || this.filterable || this.setDataFn || (this.selected.length > 0 && !(this.isAll && this.useAllText))
-		},
-		isAll() {
-			let arr = []
-			this.options.map(item => {
-				arr.push(item[this.iValueText])
-			})
-			if (arr.sort().toString() === this.iValue.toString().split(',').sort().toString()) {
-				return true
-			} else {
-				return false
-			}
-		},
-		nomatch() {
-			let nomatch = true
-			let value = this.multiple ? this.multipleFilterValue : this.filterValue
-			if (value === '' || this.options.findIndex(option=>option[this.iLabelText].includes(value)) > -1) {
-				nomatch = false
-			}
-			return nomatch
-		},
-		nodata() {
-			return this.options.length === 0
-		},
-		label() {
-			if (this.selected[this.iLabelText]) {
-				return this.selected[this.iLabelText]
-			} else {
-				return ''
-			}
-		},
-		labels() {
-			let arr = []
-			this.selected.map(item=>{
-				arr.push(item[this.iLabelText])
-			})
-			return arr
-		},
-		setClass() {
-			let arr = ['to-form-readonly']
-			if (this.fillet !== 'none') {
-				arr.push(`to-input-fillet-${this.fillet}`);
-			}
-			if (this.filletPosition) {
-				arr.push(`to-input-fillet-position-${this.filletPosition}`);
-			}
-			if (this.multiple) {
-				if (this.selected.length === 0) {
-					arr.push('to-select-placeholder')
-				}
-			} else {
-				if (this.selected[this.iValueText] === '') {
-					arr.push('to-select-placeholder')
-				}
-			}
-			if (this.errorTip) {
-				arr.push('to-select-mode-line');
-				arr.push('to-box-mode-line');
-				arr.push('to-select-color-danger');
-				arr.push('to-box-color-danger');
-				arr.push('to-select-tip-show')
-			} else {
-				if (this.color) {
-					if (this.color !== 'radam') {
-						arr.push(`to-select-color-${this.color}`);
-						arr.push(`to-box-color-${this.color}`);
-					} else {
-						let colors = this.$TouchUI.colors
-						let number = Math.round(Math.random() * 6)
-						arr.push(`to-select-color-${ colors[number]}`);
-						arr.push(`to-box-color-${ colors[number]}`);
-					}
-				}
-				if (this.mode) {
-					arr.push(`to-select-mode-${this.mode}`)
-					arr.push(`to-box-mode-${this.mode}`)
-				} else if (this.ToForm && this.ToForm.type === 'list') {
-					arr.push('to-select-mode-none')
-					arr.push('to-box-mode-none')
-				} else {
-					arr.push('to-select-mode-toast')
-					arr.push('to-box-mode-toast')
-				}
-			}
-			if (this.placeholderColor) {
-				arr.push(`to-select-placeholder-color-${this.placeholderColor}`)
-			}
-			if (this.focused) {
-				arr.push('to-select-state-focus')
-			}
-			if (this.disabled) {
-				arr.push('to-select-state-readonly')
-			}
-			if (this.changed) {
-				arr.push('to-select-changed')
-			}
-			if (this.wrap) {
-				arr.push('to-select-wrap')
-			}
-			if (this.native) {
-				arr.push('to-select-native')
-			}
-			if ((this.ToForm && this.ToForm.comparable) || this.comparable) {
-				arr.push('to-compare')
-			}
-			return arr
-		},
-		setStyle() {
-			var obj = {}
-			if (this.width) {
-				if (!isNaN(this.width)) {
-					obj.width = this.width + 'em';
-				} else if (this.width === 'full') {
-					obj.width = '100%';
-				} else {
-					obj.width = this.width;
-				}
-			}
-			return obj
-		},
-		setContentClass() {
-			let arr = []
-			if (!this.inputable && !this.setDataFn && !this.filterable) {
-				arr.push('to-box-link')
-			}
-			if (this.color) {
-				arr.push(`to-box-color-${this.color}`)
-			} else if (this.mode === 'fill' || this.mode === 'line') {
-				arr.push('to-box-color-primary')
-			} else {
-				arr.push('to-box-color-fg')
-			}
-			if (this.mode) {
-				arr.push(`to-box-mode-${this.mode}`)
-			} else if (this.ToForm && this.ToForm.type === 'list') {
-				arr.push('to-box-mode-none')
-			} else {
-				arr.push('to-box-mode-toast')
-			}
-			return arr
-		},
-		validateRequired() {
-			if (this.required) {
-				return 'true'
-			} else if (this.ToFormItem && this.ToFormItem.required) {
-				return 'true'
-			} else {
-				return 'false'
-			}
-		},
-		validateDesc() {
-			if (this.desc) {
-				return this.desc
-			} else if (this.ToFormItem && this.ToFormItem.label) {
-				return this.ToFormItem.label
-			} else {
-				return ''
-			}
-		},
-		validateValue() {
-			if (this.multiple) {
-				if (this.selected.length > 0) {
-					return 'true'
-				} else {
-					return ''
-				}
-			} else {
-				return this.selected[this.iValueText]
-			}
-		},
-		changed() {
-			if ((this.comparable || this.ToForm.comparable) && this.valueStore.length > 0 && this.iValue !== this.valueStore[0]) {
-				return true
-			} else {
-				return false
-			}
-		}
-	},
-	watch: {
-		readonly(val) {
-			this.disabled = val
-		},
-		multiple: {
-			handler(val) {
-				if (val) {
-					this.selected = []
-				} else {
-					this.selected = {}
-				}
-			},
-			immediate: true
-		},
-		selected(val) {
-			this.adjustLayer()
-			if (this.multiple) {
-				let arr = []
-				val.map(item => {
-					arr.push(item[this.iValueText])
-				})
-				if (this.inited) {
-					this.iValue = arr.join(this.splitSymbol || ',')
-				}
-			} else {
-				if (this.inited) {
-					this.isChanging = true // 避免同时给 inputable 的 input 设置 inputValue 的时候触发 change 事件
-					this.iValue = val[this.iValueText]
-					setTimeout(() => {
-						this.isChanging = false
-					}, 100);
-				}
-			}
-			if (!this.inited) {
-				if (Array.isArray(this.value)) {
-					this.iValue = this.value.join(',')
-				} else {
-					this.iValue = this.value
-				}
-				this.$nextTick(()=>{
-					this.inited = true
-				})
-			}
-		},
-		value: {
-			handler(val) {
-				if (Array.isArray(val)) {
-					this.iValue = val.join(',')
-				} else {
-					this.iValue = val
-				}
-			},
-			immediate: true
-		},
-		iValue(val) {
-			this.setSeleted(val)
-			if (this.inited) {
-				if (this.multiple && this.valueType === 'array') {
-					this.$emit('change', val ? val.split(',') : [], this.selected)
-				} else {
-					this.$emit('change', val, this.selected)
-				}
-
-				const detail = {
-					name: 'ToSelect',
-					value: val,
-					desc: this.validateDesc,
-					selected: this.selected
-				}
-				this.$TouchUI.commitTouchReport(detail)
-
-				if (this.native) {
-					this.$refs.selector.blur()
-				}
-			}
-			this.valueChange(val)
-		},
-		filterValue(val) {
-			if (this.inputable) {
-				this.$nextTick(()=>{
-					this.iValue = val
-				})
-			}
-		},
-		inputValue() {
-			if (!this.isChanging) {
-				this.iValue = this.inputValue
-			}
-		},
-		setDataInputValue(val) {
-			if (this.setDataFn) {
-				this.setDataFn(val)
-			}
-			if (this.inputable) {
-				this.$nextTick(()=>{
-					this.iValue = val
-				})
-			}
-		},
-		data: {
-			handler() {
-				this.setOptions()
-				this.valueChange(this.iValue)
-			},
-			deep: true
-		},
-		api() {
-			this.setOptions()
-		}
-	},
-	created() {
-		this.iLabelText = this.labelText
-		this.iValueText = this.valueText
-		this.iResPath = this.resPath
-		this.iSuccessCode = this.successCode
-		this.iApiParam = this.apiParam
-		this.iApiHeaders = this.apiHeaders
-		this.iApiLabel = this.apiLabel
-		this.iErrorPath = this.errorPath
-		this.iOptionWidth = this.optionWidth
-		this.setOptions()
-		// 弹出模式
-		if (this.$platform === 'phone') {
-			this.layerSlide = true
-			this.layerPosition = 'bottom'
-		}
-		if (this.optionDisplay === 'popup' || (this.$phone && (this.filterable || this.inputable))) {
-			this.layerSlide = true
-			this.layerPosition = 'right'
-			if (!this.optionWidth) {
-				this.iOptionWidth = '100%'
-			}
-		}
-	},
-	methods: {
-		valueChange(val) {
-			if (!this.multiple) {
-				if (this.inputable) {
-					this.inputValue = this.getLabel(val) || val
-				}
-				if (this.filterable && !this.inputable) {
-					this.filterValue = this.getLabel(val) || ''
-				}
-				if (this.filterable && this.inputable) {
-					this.filterValue = this.getLabel(val) || val
-				}
-				if (this.setDataFn && !this.inputable) {
-					this.setDataInputValue = this.getLabel(val) || ''
-				}
-				if (this.setDataFn && this.inputable) {
-					this.setDataInputValue = this.getLabel(val) || val
-				}
-			}
-		},
-		setSeleted(val) {
-			let selected = JSON.parse(JSON.stringify(this.selected))
-			if (!this.multiple) {
-				if (this.options.findIndex(option=>option[this.iValueText] === val) === -1) {
-					selected = {
-						[this.iLabelText]: val,
-						[this.iValueText]: val
-					}
-				} else {
-					selected = this.options.find(option=>option[this.iValueText] === val)
-				}
-			} else {
-				if (val === '') {
-					selected = []
-				} else {
-					const arr = Array.isArray(val) ? unique(val) : unique(val.split(this.splitSymbol || ','))
-					let selectedArr = []
-					arr.map(item => {
-						if (item && item.trim()) {
-							if (this.options.findIndex(option=>String(option[this.iValueText]) === String(item)) === -1) {
-								selectedArr.push({
-									[this.iLabelText]: item,
-									[this.iValueText]: item,
-									hide: !this.inputable // 当输入一个不存在的值的时候，如果可自定义则显示，否则不显示
-								})
-							} else {
-								this.options.map(option => {
-									if (String(option[this.iValueText]) === String(item)) {
-										selectedArr.push(option)
-									}
-								})
-							}
-						}
-					})
-					selected = selectedArr
-				}
-			}
-			if (this.beforeChange) {
-				const fn = this.beforeChange(selected)
-				if (fn && fn.then) {
-					fn.then(flag => {
-						this.selected = selected
-					}).catch((e)=>{})
-				} else {
-					if (fn) {
-						this.selected = selected
-					}
-				}
-			} else {
-				this.selected = selected
-			}
-
-		},
-		enter() {
-			if (!(this.multiple && this.inputable)) {
-				this.toggleLayer()
-			} else {
-				// 判断重复项
-				let value = this.filterable ? this.multipleFilterValue : this.multipleInputValue
-				if (
-					this.selected.find(item => item[this.iLabelText] === value) ||
-					this.selected.find(item => item[this.iValueText] === value)
-				) {
-					this.$tip.error(this.t('to.select.tip.error.repetition'))
-					return
-				}
-				// 判断空项
-				if (!value.trim()) {
-					return
-				}
-				const newOption = {
-					[this.iLabelText]: value,
-					[this.iValueText]: value
-				}
-				if (this.beforeChange) {
-					const fn = this.beforeChange(newOption)
-					if (fn && fn.then) {
-						fn.then(flag => {
-							this.selected.push(newOption)
-						}).catch((e)=>{})
-					} else {
-						if (fn) {
-							this.selected.push(newOption)
-						}
-					}
-				} else {
-					this.selected.push(newOption)
-				}
-				if (this.filterable) {
-					this.multipleFilterValue = ''
-				} else {
-					this.multipleInputValue = ''
-				}
-				if (this.$phone) {
-					if (this.filterable) {
-						setTimeout(() => {
-							this.$refs.popupFilter.focus()
-						}, 500);
-					} else {
-						setTimeout(() => {
-							this.$refs.popupInput.focus()
-						}, 500);
-					}
-				}
-			}
-		},
-		filter(item) {
-			if (!this.inputing) {
-				return true
-			}
-			if (this.filterable) {
-				return item[this.iLabelText].includes(this.filterValue)
-			} else {
-				return true
-			}
-		},
-		multipleFilter(item) {
-			if (this.filterable) {
-				return item[this.iLabelText].includes(this.multipleFilterValue)
-			} else {
-				return true
-			}
-		},
-		getLabel(val) {
-			let obj = this.options.find(item => item[this.iValueText] === val)
-			if (obj && obj[this.iLabelText]) {
-				return obj[this.iLabelText]
-			}
-		},
-		setOptions() {
-			// 同步选项
-			if (this.data) {
-				if (typeof this.data === 'string') {
-					// 字符串模式传值（如：:data="选项1, 选项2, 选项3"）
-					let arr = []
-					for (let i = 0; i < this.data.split(',').length; i++) {
-						const el = this.data.split(',')[i]
-						let obj = {}
-						obj[this.iLabelText] = obj[this.iValueText] = el
-						arr.push(obj)
-					}
-					if (this.$phone && this.filterable) {
-						this.options = arr.slice(0, 100)
-						this.anotherOptions = arr.slice(100)
-					} else {
-						this.options = arr
-					}
-				} else {
-					// 如果是手机端，则先取前 100 项，再拼接后面的
-					if (this.$phone && this.filterable) {
-						this.options = this.data.slice(0, 100)
-						this.anotherOptions = this.data.slice(100)
-					} else {
-						// 对象数组模式传值
-						this.options = [...this.data]
-					}
-					// 如果设置了方法，则替换为方法
-					if (typeof this.setLabelFn === 'function') {
-						this.options.forEach(item => {
-							item.label = this.setLabelFn(item)
-						})
-					}
-				}
-
-				// 设置 selected
-				this.setSeleted(this.value)
-				this.setPlaceholder()
-			}
-
-			// 异步选项
-			if (this.api) {
-				// 通过配置自动设置 labelText 与 valueText
-				if (this.$TouchUI.staticDataApiConfig.labelText && this.labelText === 'label') {
-					this.iLabelText = this.$TouchUI.staticDataApiConfig.labelText
-				}
-				if (this.$TouchUI.staticDataApiConfig.valueText && this.valueText === 'value') {
-					this.iValueText = this.$TouchUI.staticDataApiConfig.valueText
-				}
-				if (this.$TouchUI.staticDataApiConfig.resPath && !this.resPath) {
-					this.iResPath = this.$TouchUI.staticDataApiConfig.resPath
-				}
-				if (this.$TouchUI.staticDataApiConfig.apiParam && !this.apiParam) {
-					this.iApiParam = this.$TouchUI.staticDataApiConfig.apiParam
-				}
-				if (this.$TouchUI.staticDataApiConfig.apiHeaders && !this.apiHeaders) {
-					this.iApiHeaders = this.$TouchUI.staticDataApiConfig.apiHeaders
-				}
-				if (this.$TouchUI.staticDataApiConfig.apiLabel && !this.apiLabel) {
-					this.iApiLabel = this.$TouchUI.staticDataApiConfig.apiLabel
-				}
-				if (this.$TouchUI.staticDataApiConfig.errorPath && !this.errorPath) {
-					this.iErrorPath = this.$TouchUI.staticDataApiConfig.errorPath
-				}
-				if (this.$TouchUI.staticDataApiConfig.resPath && !this.successCode) {
-					this.iSuccessCode = this.$TouchUI.staticDataApiConfig.successCode
-				}
-
-				// 从缓存中取数据，如果没有则异步获取
-				if (sessionStorage.getItem('static.' + this.api)) {
-					this.options = JSON.parse(sessionStorage.getItem('static.' + this.api))
-
-					// 设置 selected
-					this.setSeleted(this.value)
-					this.setPlaceholder()
-					this.$emit('option-loaded', this.options)
-
-				} else {
-					let action = ''
-					if (this.iApiLabel && this.api) {
-						Object.assign(this.iApiParam, { [this.iApiLabel]: this.api })
-					}
-					if (this.api.indexOf('http') > -1) {
-						action = this.api
-					} else {
-						if (this.$TouchUI.staticDataApiConfig.action && this.$TouchUI.staticDataApiConfig.action.indexOf('=') > -1 && this.$TouchUI.staticDataApiConfig.action.indexOf('?') > -1) {
-							// 兼容 GET 格式的 POST 请求
-							action = this.$TouchUI.staticDataApiConfig.action + this.api
-						} else {
-							action = this.$TouchUI.staticDataApiConfig.action
-						}
-					}
-					const options = {
-						data: this.iApiParam,
-						action,
-						headers: Object.assign({}, this.iApiHeaders),
-						onSuccess: res => {
-							if (typeof res === 'string') {
-								res = JSON.parse(res)
-							}
-
-							// 直接返回一个 select 所需要的 data 对象时，不需要任何解析
-							// 如：[{name:'张三', id:0},{name:'李四', id:1}]
-							if (Array.isArray(res)) {
-								this.options = res
-								sessionStorage.setItem('static.' + this.api, JSON.stringify(res))
-
-								// 设置 selected
-								this.setSeleted(this.value)
-								this.setPlaceholder()
-								this.$emit('option-loaded', this.options)
-							} else if (res.code === this.iSuccessCode) {
-								// 按照 json 格式返回，需要根据配置路径进行解析
-								// 如：{ code:'0', data:[{name:'张三', id:0},{name:'李四', id:1}]}
-								let data = []
-								if (this.iResPath) {
-									let resPath = this.iResPath.split('/')
-									resPath.forEach(el => {
-										data = res[el]
-									})
-								}
-								this.options = data
-								sessionStorage.setItem('static.' + this.api, JSON.stringify(data))
-
-								// 设置 selected
-								this.setSeleted(this.value)
-								this.setPlaceholder()
-								this.$emit('option-loaded', this.options)
-							} else {
-								this.options = []
-								this.t('to.select.tip.error.res', `select api(${this.api})`)
-							}
-						},
-						onError: res => {
-							this.$tip.danger(this.t('to.select.tip.error.api', `select api(${this.api}) `))
-						}
-					}
-					const req = this.httpRequest(options)
-					if (req && req.then) {
-						req.then(options.onSuccess, options.onError)
-					}
-				}
-			}
-		},
-		setPlaceholder() {
-			if (this.native) {
-				return
-			}
-			// 设置 placeholder
-			if (!this.multiple && this.clearable && !this.inputable && !this.setDataFn && !this.filterable && (!this.optionDisplay || this.optionDisplay === 'float')) {
-				this.options.unshift({})
-				this.$set(this.options, 0, {
-					[this.iLabelText]: '',
-					[this.iValueText]: ''
-				})
-			}
-		},
-		setValue(val) {
-			this.iValue = val
-			if (!this.multiple || this.closeSelection) {
-				this.closeLayer()
-			}
-		},
-		selectAll() {
-			let arr = []
-			this.options.map(item=>{
-				if (!item.disabled) {
-					arr.push(item[this.iValueText])
-				}
-			})
-			this.iValue = arr.toString()
-		},
-		Deselect() {
-			let arr = []
-			this.options.map(item=>{
-				if (!item.disabled && !this.iValue.split(',').includes(item[this.iValueText])) {
-					arr.push(item[this.iValueText])
-				}
-			})
-			this.iValue = arr.toString()
-		},
-		clear() {
-			this.setValue('')
-		},
-		itemChange(item) {
-			if (item.disabled) {
-				return
-			}
-			this.setSeleted(item[this.iValueText])
-			// this.selected = item
-			this.$nextTick(()=>{
-				this.$emit('selected', item)
-				this.closeLayer()
-			})
-		},
-		adjustLayer() {
-			if (this.optionDisplay !== 'none' && this.$refs.layer.show) {
-				this.$nextTick(()=>{
-					this.$refs.layer.set(this.$refs.link)
-				})
-			}
-		},
-		openLayer() {
-			if (!this.disabled && this.optionDisplay !== 'none') {
-				this.$refs.layer.open('link')
-				if (this.filterable && this.$phone) {
-					setTimeout(() => {
-						if (this.$refs.popupFilter) {
-							this.$refs.popupFilter.focus()
-						}
-						this.$nextTick(() => {
-							this.options = this.options.concat(this.anotherOptions)
-						})
-					}, 500);
-				}
-				if (this.inputable && this.$phone) {
-					setTimeout(() => {
-						if (this.$refs.popupInput) {
-							this.$refs.popupInput.focus()
-						}
-					}, 500);
-				}
-			}
-		},
-		closeLayer() {
-			if (!this.disabled && this.optionDisplay !== 'none') {
-				this.inputing = false
-				this.phoneCloseLayer()
-			}
-		},
-		phoneCloseLayer() {
-			this.$refs.layer.close()
-			if (this.filterable && this.$phone) {
-				this.options = this.options.slice(0, 100)
-			}
-		},
-		toggleLayer() {
-			if (this.$refs.layer) {
-				if (this.$refs.layer.show) {
-					this.closeLayer()
-				} else {
-					this.openLayer()
-				}
-			}
-		},
-		click() {
-			if (!this.native) {
-				this.toggleLayer()
-			}
-			this.$emit('click')
-		},
-		layerClose() {
-			if (!this.multiple) {
-				if (this.filterable && !this.inputable) {
-					if (this.iValue) {
-						const label = this.getLabel(this.iValue)
-						if (label) {
-							this.filterValue = label
-						} else {
-							this.filterValue = ''
-						}
-					} else {
-						this.filterValue = ''
-					}
-				}
-			} else {
-				if (this.inputable) {
-					this.multipleInputValue = ''
-				}
-				if (this.filterable) {
-					this.multipleFilterValue = ''
-				}
-			}
-		},
-		layerMousedown() {
-			this.blurByLayer = true
-			let timer = null
-			timer = setTimeout(() => {
-				this.blurByLayer = false
-				clearTimeout(timer)
-				timer = null
-			}, 200);
-		},
-		focus() {
-			this.errorTip = ''
-			this.focused = true
-		},
-		blur() {
-			this.focused = false
-			if (!this.blurByLayer && !this.$phone) {
-				this.closeLayer()
-			}
-		},
-		inputBlur() {
-			this.focused = false
-			if (!this.blurByLayer && !this.$phone) {
-				this.closeLayer()
-			}
-		},
-		inputFocus() {
-			this.focused = true
-			if (this.value === '') {
-				this.openLayer()
-			}
-		},
-		inputInput(e) {
-			if (e && e.keyCode === 13) {
-				this.$emit('inputEnter')
-			}
-			this.$nextTick(()=>{
-				if (this.value === '') {
-					this.openLayer()
-				} else {
-					this.closeLayer()
-				}
-			})
-		},
-		filterBlur() {
-			this.focused = false
-			if (!this.blurByLayer && !this.$phone) {
-				this.closeLayer()
-			}
-		},
-		filterFocus() {
-			this.focused = true
-			this.openLayer()
-		},
-		filterInput(e) {
-			if (e && e.keyCode === 13) {
-				this.$emit('inputEnter')
-			}
-			this.$nextTick(()=>{
-				this.inputing = true
-				this.adjustLayer()
-				this.openLayer()
-			})
-		},
-		filterClear() {
-			this.iValue = ''
-		},
-		multipleInputBlur() {
-			this.focused = false
-			if (!this.blurByLayer && !this.$phone) {
-				this.closeLayer()
-			}
-		},
-		multipleInputFocus() {
-			this.focused = true
-			if (this.value === '') {
-				this.openLayer()
-			}
-		},
-		multipleItemChange(value, item) {
-			let val = this.selected.map(option => option[this.iValueText])
-			if (value) {
-				val.push(item[this.iValueText])
-				this.setSeleted(val.join(','))
-			} else {
-				this.removeItem(val, item[this.iValueText])
-				this.setSeleted(val.join(','))
-			}
-			if (this.inputable && !this.filterable) {
-				if (this.$phone) {
-					setTimeout(() => {
-						this.$refs.popupInput.focus()
-					}, 500);
-				} else {
-					setTimeout(() => {
-						this.$refs.input.focus()
-					}, 500);
-				}
-				this.multipleInputValue = ''
-			}
-			if (this.filterable) {
-				if (this.$phone) {
-					setTimeout(() => {
-						this.$refs.popupFilter.focus()
-					}, 500);
-				} else {
-					setTimeout(() => {
-						this.$refs.filter.focus()
-					}, 500);
-				}
-				this.multipleFilterValue = ''
-			}
-			if (this.setDataFn) {
-				setTimeout(() => {
-					this.$refs.filter.focus()
-				}, 500);
-				this.setDataInputValue = ''
-			}
-		},
-		removeTag(item) {
-			let val = this.selected.map(option => option[this.iValueText])
-			this.removeItem(val, item[this.iValueText])
-			this.setSeleted(val.join(','))
-			if (this.inputable) {
-				if (this.$phone) {
-					if (this.filterable) {
-						if (this.$refs.popupFilter) {
-							setTimeout(() => {
-								this.$refs.popupFilter.focus()
-							}, 500);
-						}
-					} else {
-						if (this.$refs.popupInput) {
-							setTimeout(() => {
-								this.$refs.popupInput.focus()
-							}, 500);
-						}
-					}
-				} else {
-					if (this.filterable) {
-						setTimeout(() => {
-							this.$refs.filter.focus()
-						}, 500);
-					} else {
-						setTimeout(() => {
-							this.$refs.input.focus()
-						}, 500);
-					}
-				}
-			}
-		},
-		multipleFilterBlur() {
-			this.focused = false
-			if (!this.blurByLayer && !this.$phone) {
-				this.closeLayer()
-			}
-		},
-		multipleFilterFocus() {
-			this.focused = true
-			if (this.value === '') {
-				this.openLayer()
-			}
-		},
-		removeItem(obj, val) {
-			let index
-
-			// 字符串
-			if (typeof obj === 'string') {
-				let arr = obj.split(',')
-				index = arr.findIndex(item=>item === val)
-				obj = arr.join(',')
-			}
-
-			// 字符串数组
-			else if (Array.isArray(obj) && typeof obj[0] === 'string') {
-				index = obj.findIndex(item=>item === val)
-				obj.splice(index, 1)
-			}
-
-			// 对象数组
-			else {
-				index = obj.findIndex(item=>item[this.iValueText] === val)
-				obj.splice(index, 1)
-			}
-		},
-		setDataLoading(val) {
-			this.dataLoading = val
-		},
-
-		// 记录历史值，以便对比或者取值
-		compare() {
-			this.valueStore.unshift(this.iValue)
-		},
-		setDisabled(f) {
-			this.disabled = f
-		},
-		// 撤销
-		restore() {
-			this.data = this.valueStore[0]
-			this.valueStore.splice(0, 1)
-		}
-	}
-}
-</script>
+<template>
+	<span :id="id" ref="link" v-tip="changed ? t('to.common.originalValue', getLabel(valueStore[0])) : ''" class="to-select" :class="setClass" :style="setStyle" :tabindex="inputable || filterable ? '-1' : tabindex" @mousedown="layerMousedown" @focus="focus" @blur="blur" @keyup.enter="enter" @keyup.esc="closeLayer">
+		<span v-if="verifiable && (rule || required || ToFormItem.required)" v-show="false" :trim="trim" :req="validateRequired" class="to-validate" :desc="validateDesc" :rule="rule" :value="validateValue"></span>
+		<span v-if="$slots.prefix" class="to-selectPrefix"><slot name="prefix"></slot></span>
+		<span class="to-selectContent" :class="setContentClass" @click="click">
+
+			<!-- 前缀文本/图标 -->
+			<to-icon v-if="icon" v-bind="iconProps" :value="icon" mode="none" class="to-selectIcon"></to-icon>
+			<span v-if="prefix" class="to-selectPrefixLabel">{{ prefix }}</span>
+
+			<!-- 原生模式 -->
+			<template v-if="native">
+				<span class="to-selectValue">
+					<select ref="selector" v-model="iValue">
+						<option v-if="clearable" value="">{{ placeholder }}</option>
+						<option v-for="(item, index) in options" :key="index" :value="item[iValueText]">{{ item[iLabelText] }}</option>
+					</select>
+				</span>
+			</template>
+
+			<!-- 模拟选项 -->
+			<template v-else>
+
+				<!-- 单选 -->
+				<template v-if="!multiple">
+					<span v-if="(!inputable && !filterable && !setDataFn) || $phone" class="to-selectValue">
+						<template v-if="selected[iLabelText]">{{ selected[iLabelText] }}</template>
+						<template v-else>{{ placeholder }}</template>
+					</span>
+					<span v-else class="to-selectInput">
+						<to-input v-if="inputable && !filterable && !setDataFn" ref="input" v-model="inputValue" :sp-chars="spChars" :tabindex="tabindex" :clearable="clearable" prevent-focus width="full" mode="none" :placeholder="placeholder" @focus="inputFocus" @keyup="inputInput" @blur="inputBlur"></to-input>
+						<to-input v-if="filterable" ref="filter" v-model="filterValue" :focus-when-clear="focusWhenClear" :sp-chars="inputable ? spChars : false" :tabindex="tabindex" :clearable="clearable" prevent-focus width="full" mode="none" :placeholder="placeholder" @clear="filterClear" @focus="filterFocus" @keyup="filterInput" @blur="filterBlur"></to-input>
+						<to-input v-if="setDataFn" v-model="setDataInputValue" :sp-chars="inputable ? spChars : false" :tabindex="tabindex" :clearable="clearable" prevent-focus width="full" mode="none" :placeholder="placeholder" @clear="filterClear" @focus="filterFocus" @keyup="filterInput" @blur="filterBlur"></to-input>
+					</span>
+				</template>
+
+				<!-- 多选 -->
+				<template v-else>
+					<span v-if="selected.filter(item => !item.hide).length === 0 && !inputable && !filterable && !setDataFn" class="to-selectValue">{{ placeholder }}</span>
+					<span v-if="(isAll && useAllText)" v-color="allTextColor" class="to-selectValue">{{ allText }}</span>
+					<span class="to-selectTag">
+						<template v-if="selected.length > 0 && !(isAll && useAllText)">
+							<template v-for="(item, index) in selected">
+								<to-tag v-if="!item.hide" :key="index" color="fg" mode="plain" :deletable="!disabled" @delete="removeTag(item)">{{ item[iLabelText] }}</to-tag>
+							</template>
+						</template>
+						<template v-if="!$phone || ($phone && selected.length === 0)">
+							<to-input v-if="inputable && !filterable" ref="input" v-model="multipleInputValue" :sp-chars="spChars" :readonly="$phone" prevent-focus mode="none" :placeholder="selected.filter(item => !item.hide).length > 0 ? '' : placeholder " @focus="multipleInputFocus" @blur="multipleInputBlur"></to-input>
+							<to-input v-if="filterable" ref="filter" v-model="multipleFilterValue" :sp-chars="inputable ? spChars : false" :readonly="$phone" prevent-focus mode="none" :placeholder="selected.filter(item => !item.hide).length > 0 ? '' : placeholder " @focus="multipleFilterFocus" @blur="multipleFilterBlur"></to-input>
+							<to-input v-if="setDataFn" ref="filter" v-model="setDataInputValue" :sp-chars="inputable ? spChars : false" prevent-focus mode="none" :placeholder="selected.filter(item => !item.hide).length > 0 ? '' : placeholder " @focus="multipleFilterFocus" @blur="multipleFilterBlur"></to-input>
+						</template>
+					</span>
+				</template>
+
+				<!-- 箭头 -->
+				<span v-if="arrowType === 'browse'" class="to-selectBrowse">
+					<to-icon value="browse" color="primary" mode="none" :link="inputable || filterable"></to-icon>
+				</span>
+				<span v-else-if="arrowType === 'next'" class="to-selectArrow to-selectArrow-right"></span>
+				<span v-else class="to-selectArrow"></span>
+
+			</template>
+
+			<!-- 后缀文本 -->
+			<span v-if="suffix" class="to-selectSuffixLabel">{{ suffix }}</span>
+
+		</span>
+		<span v-if="$slots.suffix" class="to-selectSuffix"><slot name="suffix"></slot></span>
+		<span v-if="errorTip" v-color="'danger'" class="to-box-tip">
+			<template v-if="errorType === 'rule'">
+				<template v-if="inputable">输入有误</template>
+				<template v-else>选择有误</template>
+				<to-icon v-tip.danger="errorTip" value="help" color="danger" mode="toast" fillet="round"></to-icon>
+			</template>
+			<template v-else>
+				不能为空
+			</template>
+		</span>
+		<to-float v-if="optionDisplay !== 'none'" ref="layer" :align="optionAlign" class="to-selectLayer" :lazy="lazy" :slide="layerSlide" :width="iOptionWidth" :position="layerPosition" @closed="layerClose" @mousedown="layerMousedown">
+
+			<to-padding v-if="dataLoading" v-align="'center'" :value="2">
+				<to-icon value="loading"></to-icon>
+			</to-padding>
+
+			<template v-else>
+
+				<slot :data="options">
+					<to-grid v-if="(optionDisplay === 'popup' || ((inputable || filterable) && $phone))" height="full" type="v">
+						<to-grid-item side>
+							<to-header level="0" :title="validateDesc ? t('to.select.float.title', validateDesc) : t('to.select.float.titlePlaceholder', validateDesc)" @back="closeLayer()">
+								<to-button fillet="normal" icon="close" mode="none" color="primary" @click="clear(); closeLayer();">{{ t('to.common.clear') }}</to-button>
+							</to-header>
+							<to-padding v-if="filterable || inputable" position="side">
+								<template v-if="multiple">
+									<template v-if="inputable">
+										<span class="to-select to-select-arrow-none" style="width:100%;" :class="fillet === 'normal' ? 'to-input-fillet-normal' : ''">
+											<span class="to-selectContent">
+												<span class="to-selectTag">
+													<template v-if="selected.length > 0 && !(isAll && useAllText)">
+														<template v-for="(item, index) in selected">
+															<to-tag v-if="!item.hide" :key="index" color="fg" mode="plain" :deletable="!disabled" @delete="removeTag(item)">{{ item[iLabelText] }}</to-tag>
+														</template>
+													</template>
+													<to-input v-if="filterable" ref="popupFilter" v-model="multipleFilterValue" :sp-chars="spChars" prevent-focus mode="none" :placeholder="selected.filter(item => !item.hide).length > 0 ? '' : placeholder ">
+														<to-button icon="ok" mode="none" color="primary" @click="enter"></to-button>
+													</to-input>
+													<to-input v-else ref="popupInput" v-model="multipleInputValue" prevent-focus mode="none" :placeholder="selected.filter(item => !item.hide).length > 0 ? '' : placeholder ">
+														<to-button icon="ok" mode="none" color="primary" @click="enter"></to-button>
+													</to-input>
+												</span>
+											</span>
+										</span>
+									</template>
+									<to-input v-else ref="popupFilter" v-model="multipleFilterValue" :sp-chars="false" width="full" prevent-focus :placeholder="selected.filter(item => !item.hide).length > 0 ? '' : placeholder "></to-input>
+								</template>
+								<template v-else>
+									<to-input v-if="inputable" ref="popupInput" v-model="inputValue" :sp-chars="spChars" prevent-focus width="full" :placeholder="placeholder"></to-input>
+									<to-input v-else ref="popupFilter" v-model="filterValue" :sp-chars="false" prevent-focus width="full" placeholder="筛选" @clear="filterClear"></to-input>
+								</template>
+							</to-padding>
+						</to-grid-item>
+						<to-grid-item>
+
+							<!-- 无数据 -->
+							<to-padding v-if="nodata" v-color="'info'" :value="2">
+								{{ nodataText }}
+							</to-padding>
+
+							<!-- 无匹配项 -->
+							<to-padding v-else-if="nomatch" v-color="'info'" :value="2">
+								{{ nomatchText }}
+							</to-padding>
+
+							<to-scroll v-if="!nodata && !nomatch">
+								<to-padding :value="0.5">
+
+									<!-- 多选 -->
+									<template v-if="multiple">
+										<to-padding :value="0.5">
+											<to-button mode="text" color="primary" fillet="normal" @click="selectAll">{{ t('to.common.selectAll') }}</to-button>
+											<to-button mode="text" color="primary" fillet="normal" @click="Deselect">{{ t('to.common.Deselect') }}</to-button>
+										</to-padding>
+										<to-grid :col="optionCol">
+											<to-grid-item v-for="item in options" v-show="multipleFilter(item)" :key="item[iValueText]" v-dis="!!item.disabled">
+												<to-checkbox :wrap="optionWrap" :title="item[iLabelText]" width="full" :label="item[iLabelText]" :readonly="!!item.disabled" :value="Boolean(selected.find(el => el[iValueText] === item[iValueText]))" @change="value => {return multipleItemChange(value, item)}"></to-checkbox>
+											</to-grid-item>
+										</to-grid>
+									</template>
+
+									<!-- 单选 -->
+									<template v-else>
+										<to-grid :col="optionCol">
+											<to-grid-item v-for="item in options" v-show="filter(item)" :key="item[iValueText]">
+												<to-card v-dis="!!item.disabled" :wrap="optionWrap" :title="optionWrap ? '' : item[iLabelText]" link :color="selected[iValueText] === item[iValueText] ? 'primary' : 'default'" @click.stop="itemChange(item)">
+													<template v-if="item[iLabelText]">{{ item[iLabelText] }}</template>
+													<template v-else>{{ placeholder }}</template>
+												</to-card>
+											</to-grid-item>
+										</to-grid>
+									</template>
+
+								</to-padding>
+							</to-scroll>
+						</to-grid-item>
+						<to-grid-item side>
+							<to-submit width="full" space="0">
+								<to-button v-size="'l'" fillet="none" color="primary" mode="line" @click="phoneCloseLayer(); iValue = '';">{{ t('to.common.clear') }}</to-button>
+								<to-button v-size="'l'" mode="fill" color="primary" fillet="none" @click="phoneCloseLayer();">{{ t('to.common.confirm') }}</to-button>
+							</to-submit>
+						</to-grid-item>
+					</to-grid>
+					<template v-else>
+
+						<!-- 无数据 -->
+						<to-padding v-if="nodata" v-color="'info'" :value="2">
+							{{ nodataText }}
+						</to-padding>
+
+						<!-- 无匹配项 -->
+						<to-padding v-else-if="nomatch" v-color="'info'" :value="2">
+							{{ nomatchText }}
+						</to-padding>
+
+						<to-scroll v-if="!nodata && !nomatch">
+							<to-padding :value="0.5">
+
+								<!-- 多选 -->
+								<template v-if="multiple">
+									<to-padding :value="0.5">
+										<to-button mode="text" color="primary" fillet="normal" @click="selectAll">{{ t('to.common.selectAll') }}</to-button>
+										<to-button mode="text" color="primary" fillet="normal" @click="Deselect">{{ t('to.common.Deselect') }}</to-button>
+									</to-padding>
+									<to-grid :col="optionCol">
+										<to-grid-item v-for="item in options" v-show="multipleFilter(item)" :key="item[iValueText]" v-dis="!!item.disabled">
+											<to-checkbox :wrap="optionWrap" :title="item[iLabelText]" width="full" :label="item[iLabelText]" :readonly="!!item.disabled" :value="Boolean(selected.find(el => el[iValueText] === item[iValueText]))" @change="value => {return multipleItemChange(value, item)}"></to-checkbox>
+										</to-grid-item>
+									</to-grid>
+								</template>
+
+								<!-- 单选 -->
+								<template v-else>
+									<to-grid :col="optionCol">
+										<to-grid-item v-for="item in options" v-show="filter(item)" :key="item[iValueText]">
+											<to-card v-dis="!!item.disabled" :wrap="optionWrap" :title="optionWrap ? '' : item[iLabelText]" link :color="selected[iValueText] === item[iValueText] ? 'primary' : 'default'" @click.stop="itemChange(item)">
+												<template v-if="item[iLabelText]">{{ item[iLabelText] }}</template>
+												<template v-else>{{ placeholder }}</template>
+											</to-card>
+										</to-grid-item>
+									</to-grid>
+								</template>
+
+							</to-padding>
+						</to-scroll>
+
+					</template>
+				</slot>
+
+			</template>
+
+		</to-float>
+	</span>
+</template>
+<script>
+import ajax from 'ai.touchui-vue/src/utils/ajax'
+import { unique } from '../../../src/utils/array.js'
+import Locale from 'ai.touchui-vue/src/mixins/locale'
+import Tip from 'ai.touchui-vue/src/mixins/tip'
+import { t } from 'ai.touchui-vue/src/locale'
+export default {
+	name: 'ToSelect',
+	componentName: 'ToSelect',
+	mixins: [Locale, Tip],
+	model: {
+		event: 'change'
+	},
+	inject: {
+		ToForm: {
+			default: ''
+		},
+		ToFormItem: {
+			default: ''
+		}
+	},
+	props: {
+		lazy: {
+			type: Boolean,
+			default() {
+				if (this.$TouchUI && this.$TouchUI.select && this.$TouchUI.select.lazy === false) {
+					return false
+				} else {
+					return true
+				}
+			}
+		},
+
+		// 原生模式（性能极端低下情况下使用）
+		native: {
+			type: Boolean,
+			default() {
+				if (this.$TouchUI) {
+					return this.$TouchUI.select.native
+				} else {
+					return false
+				}
+			}
+		},
+
+		// 表单校验
+		desc: {
+			type: String,
+			default: ''
+		},
+		rule: {
+			type: String,
+			default: ''
+		},
+		id: {
+			type: String,
+			default: ''
+		},
+		required: Boolean,
+
+		// 安全---------
+		spChars: {
+			type: [String, Boolean],
+			default: '/,\\,[,],{,},"' // 微软拼音输入法使用单引号做上屏前多个字符分隔符，不能过滤单引号
+		},
+
+		// 基本功能
+		splitSymbol: {
+			type: String,
+			default: ''
+		},
+		tabindex: {
+			type: String,
+			default: '1'
+		},
+		valueText: {
+			type: String,
+			default: 'value'
+		},
+		labelText: {
+			type: String,
+			default: 'label'
+		},
+		value: {
+			type: [String, Number, Array],
+			default: ''
+		},
+		data: {
+			type: [Array, String],
+			default: () => t('to.common.data')
+		},
+		placeholder: {
+			type: String,
+			default: () => t('to.common.placeholder.select')
+		},
+		placeholderColor: {
+			type: String,
+			default: ''
+		},
+		nomatchText: {
+			type: String,
+			default: () => t('to.common.noMatch')
+		},
+		nodataText: {
+			type: String,
+			default: () => t('to.common.noData')
+		},
+		readonly: Boolean, // 是否只读
+		multiple: Boolean, // 是否多选
+		filterable: Boolean, // 是否开启选项过滤
+		inputable: Boolean, // 是否动态增加 options
+		useAllText: Boolean,
+		allText: {
+			type: String,
+			default: () => t('to.select.input.allSelected')
+		},
+		allTextColor: {
+			type: String,
+			default: 'primary'
+		},
+		clearable: {
+			type: Boolean,
+			default: true
+		},
+		// 外观设置
+		color: {
+			type: String,
+			default: 'default'
+		},
+		mode: {
+			type: String,
+			default: ''
+		},
+		fillet: {
+			type: String,
+			default() {
+				return this.$TouchUI.select.fillet || this.$TouchUI.global.fillet || 'normal'
+			}
+		},
+		filletPosition: {
+			type: String,
+			default: ''
+		},
+		width: {
+			type: [Number, String],
+			default: ''
+		},
+		arrowType: {
+			// browse / ''
+			type: String,
+			default: ''
+		},
+		// 选项设置
+		optionWidth: {
+			type: [Number, String],
+			default: ''
+		},
+		optionDisplay: {
+			// none / *float / popup
+			type: [Number, String],
+			default: ''
+		},
+		optionCol: {
+			type: [Number, String],
+			default: 1
+		},
+		optionWrap: Boolean,
+		optionAlign: {
+			type: String,
+			default: 'left'
+		},
+		// 异步数据参数
+		httpRequest: {
+			type: Function,
+			default: ajax
+		},
+		api: {
+			type: String,
+			default: ''
+		},
+		apiParam: {
+			type: Object,
+			default: null
+		},
+		apiHeaders: {
+			type: Object,
+			default: () => {}
+		},
+		apiLabel: {
+			type: String,
+			default: ''
+		},
+		resPath: {
+			type: String,
+			default: ''
+		},
+		errorPath: {
+			type: String,
+			default: ''
+		},
+		successCode: {
+			type: String,
+			default: '0'
+		},
+		// 远程异步数据设置
+		setDataFn: {
+			type: Function,
+			default: null
+		},
+		// 插件
+		prefix: {
+			type: String,
+			default: ''
+		},
+		suffix: {
+			type: String,
+			default: ''
+		},
+		icon: {
+			type: String,
+			default: ''
+		},
+		iconProps: {
+			type: Object,
+			default: ()=>{}
+		},
+		// 基本功能
+		trim: {
+			type: Boolean,
+			default: true
+		},
+		closeSelection: {
+			// 多选时，每次选择都关闭弹窗
+			type: Boolean,
+			default: false
+		},
+		verifiable: {
+			type: Boolean,
+			default: true
+		},
+		comparable: Boolean,
+		setLabelFn: undefined, // 传入一个 Function 设置每一项的 label，return String，
+		wrap: Boolean,
+		focusWhenClear: {
+			// filterable模式下清空数据是否弹出下拉框
+			type: Boolean,
+			default: false
+		},
+		beforeChange: {
+			type: Function,
+			default: null
+		},
+		valueType: {
+			type: String,
+			default: ''
+		}
+	},
+	data() {
+		return {
+			isChanging: false,
+			errorTip: '',
+			errorType: 'rule',
+			iValue: '',
+			valueStore: [],
+			dataLoading: false,
+			selected: null,
+			inited: false,
+			multipleInputValue: '',
+			multipleFilterValue: '',
+			setDataInputValue: '',
+			filterValue: '',
+			inputValue: '',
+			focused: false,
+			blurByLayer: false,
+			options: [],
+			anotherOptions: [], // 只作用于手机端
+			layerSlide: false,
+			layerPosition: 'auto',
+			disabled: this.readonly,
+			iApiHeaders: {},
+			inputing: false
+		}
+	},
+	computed: {
+		showTag() {
+			return this.inputable || this.filterable || this.setDataFn || (this.selected.length > 0 && !(this.isAll && this.useAllText))
+		},
+		isAll() {
+			let arr = []
+			this.options.map(item => {
+				arr.push(item[this.iValueText])
+			})
+			if (arr.sort().toString() === this.iValue.toString().split(',').sort().toString()) {
+				return true
+			} else {
+				return false
+			}
+		},
+		nomatch() {
+			let nomatch = true
+			let value = this.multiple ? this.multipleFilterValue : this.filterValue
+			if (value === '' || this.options.findIndex(option=>option[this.iLabelText].includes(value)) > -1) {
+				nomatch = false
+			}
+			return nomatch
+		},
+		nodata() {
+			return this.options.length === 0
+		},
+		label() {
+			if (this.selected[this.iLabelText]) {
+				return this.selected[this.iLabelText]
+			} else {
+				return ''
+			}
+		},
+		labels() {
+			let arr = []
+			this.selected.map(item=>{
+				arr.push(item[this.iLabelText])
+			})
+			return arr
+		},
+		setClass() {
+			let arr = ['to-form-readonly']
+			if (this.fillet !== 'none') {
+				arr.push(`to-input-fillet-${this.fillet}`);
+			}
+			if (this.filletPosition) {
+				arr.push(`to-input-fillet-position-${this.filletPosition}`);
+			}
+			if (this.multiple) {
+				if (this.selected.length === 0) {
+					arr.push('to-select-placeholder')
+				}
+			} else {
+				if (this.selected[this.iValueText] === '') {
+					arr.push('to-select-placeholder')
+				}
+			}
+			if (this.errorTip) {
+				arr.push('to-select-mode-line');
+				arr.push('to-box-mode-line');
+				arr.push('to-select-color-danger');
+				arr.push('to-box-color-danger');
+				arr.push('to-select-tip-show')
+			} else {
+				if (this.color) {
+					if (this.color !== 'radam') {
+						arr.push(`to-select-color-${this.color}`);
+						arr.push(`to-box-color-${this.color}`);
+					} else {
+						let colors = this.$TouchUI.colors
+						let number = Math.round(Math.random() * 6)
+						arr.push(`to-select-color-${ colors[number]}`);
+						arr.push(`to-box-color-${ colors[number]}`);
+					}
+				}
+				if (this.mode) {
+					arr.push(`to-select-mode-${this.mode}`)
+					arr.push(`to-box-mode-${this.mode}`)
+				} else if (this.ToForm && this.ToForm.type === 'list') {
+					arr.push('to-select-mode-none')
+					arr.push('to-box-mode-none')
+				} else {
+					arr.push('to-select-mode-toast')
+					arr.push('to-box-mode-toast')
+				}
+			}
+			if (this.placeholderColor) {
+				arr.push(`to-select-placeholder-color-${this.placeholderColor}`)
+			}
+			if (this.focused) {
+				arr.push('to-select-state-focus')
+			}
+			if (this.disabled) {
+				arr.push('to-select-state-readonly')
+			}
+			if (this.changed) {
+				arr.push('to-select-changed')
+			}
+			if (this.wrap) {
+				arr.push('to-select-wrap')
+			}
+			if (this.native) {
+				arr.push('to-select-native')
+			}
+			if ((this.ToForm && this.ToForm.comparable) || this.comparable) {
+				arr.push('to-compare')
+			}
+			return arr
+		},
+		setStyle() {
+			var obj = {}
+			if (this.width) {
+				if (!isNaN(this.width)) {
+					obj.width = this.width + 'em';
+				} else if (this.width === 'full') {
+					obj.width = '100%';
+				} else {
+					obj.width = this.width;
+				}
+			}
+			return obj
+		},
+		setContentClass() {
+			let arr = []
+			if (!this.inputable && !this.setDataFn && !this.filterable) {
+				arr.push('to-box-link')
+			}
+			if (this.color) {
+				arr.push(`to-box-color-${this.color}`)
+			} else if (this.mode === 'fill' || this.mode === 'line') {
+				arr.push('to-box-color-primary')
+			} else {
+				arr.push('to-box-color-fg')
+			}
+			if (this.mode) {
+				arr.push(`to-box-mode-${this.mode}`)
+			} else if (this.ToForm && this.ToForm.type === 'list') {
+				arr.push('to-box-mode-none')
+			} else {
+				arr.push('to-box-mode-toast')
+			}
+			return arr
+		},
+		validateRequired() {
+			if (this.required) {
+				return 'true'
+			} else if (this.ToFormItem && this.ToFormItem.required) {
+				return 'true'
+			} else {
+				return 'false'
+			}
+		},
+		validateDesc() {
+			if (this.desc) {
+				return this.desc
+			} else if (this.ToFormItem && this.ToFormItem.label) {
+				return this.ToFormItem.label
+			} else {
+				return ''
+			}
+		},
+		validateValue() {
+			if (this.multiple) {
+				if (this.selected.length > 0) {
+					return 'true'
+				} else {
+					return ''
+				}
+			} else {
+				return this.selected[this.iValueText]
+			}
+		},
+		changed() {
+			if ((this.comparable || this.ToForm.comparable) && this.valueStore.length > 0 && this.iValue !== this.valueStore[0]) {
+				return true
+			} else {
+				return false
+			}
+		}
+	},
+	watch: {
+		readonly(val) {
+			this.disabled = val
+		},
+		multiple: {
+			handler(val) {
+				if (val) {
+					this.selected = []
+				} else {
+					this.selected = {}
+				}
+			},
+			immediate: true
+		},
+		selected(val) {
+			this.adjustLayer()
+			if (this.multiple) {
+				let arr = []
+				val.map(item => {
+					arr.push(item[this.iValueText])
+				})
+				if (this.inited) {
+					this.iValue = arr.join(this.splitSymbol || ',')
+				}
+			} else {
+				if (this.inited) {
+					this.isChanging = true // 避免同时给 inputable 的 input 设置 inputValue 的时候触发 change 事件
+					this.iValue = val[this.iValueText]
+					setTimeout(() => {
+						this.isChanging = false
+					}, 100);
+				}
+			}
+			if (!this.inited) {
+				if (Array.isArray(this.value)) {
+					this.iValue = this.value.join(',')
+				} else {
+					this.iValue = this.value
+				}
+				this.$nextTick(()=>{
+					this.inited = true
+				})
+			}
+		},
+		value: {
+			handler(val) {
+				if (Array.isArray(val)) {
+					this.iValue = val.join(',')
+				} else {
+					this.iValue = val
+				}
+			},
+			immediate: true
+		},
+		iValue(val) {
+			this.setSeleted(val)
+			if (this.inited) {
+				if (this.multiple && this.valueType === 'array') {
+					this.$emit('change', val ? val.split(',') : [], this.selected)
+				} else {
+					this.$emit('change', val, this.selected)
+				}
+
+				const detail = {
+					name: 'ToSelect',
+					value: val,
+					desc: this.validateDesc,
+					selected: this.selected
+				}
+				this.$TouchUI.commitTouchReport(detail)
+
+				if (this.native) {
+					this.$refs.selector.blur()
+				}
+			}
+			this.valueChange(val)
+		},
+		filterValue(val) {
+			if (this.inputable) {
+				this.$nextTick(()=>{
+					this.iValue = val
+				})
+			}
+		},
+		inputValue() {
+			if (!this.isChanging) {
+				this.iValue = this.inputValue
+			}
+		},
+		setDataInputValue(val) {
+			if (this.setDataFn) {
+				this.setDataFn(val)
+			}
+			if (this.inputable) {
+				this.$nextTick(()=>{
+					this.iValue = val
+				})
+			}
+		},
+		data: {
+			handler() {
+				this.setOptions()
+				this.valueChange(this.iValue)
+			},
+			deep: true
+		},
+		api() {
+			this.setOptions()
+		}
+	},
+	created() {
+		this.iLabelText = this.labelText
+		this.iValueText = this.valueText
+		this.iResPath = this.resPath
+		this.iSuccessCode = this.successCode
+		this.iApiParam = this.apiParam
+		this.iApiHeaders = this.apiHeaders
+		this.iApiLabel = this.apiLabel
+		this.iErrorPath = this.errorPath
+		this.iOptionWidth = this.optionWidth
+		this.setOptions()
+		// 弹出模式
+		if (this.$platform === 'phone') {
+			this.layerSlide = true
+			this.layerPosition = 'bottom'
+		}
+		if (this.optionDisplay === 'popup' || (this.$phone && (this.filterable || this.inputable))) {
+			this.layerSlide = true
+			this.layerPosition = 'right'
+			if (!this.optionWidth) {
+				this.iOptionWidth = '100%'
+			}
+		}
+	},
+	methods: {
+		valueChange(val) {
+			if (!this.multiple) {
+				if (this.inputable) {
+					this.inputValue = this.getLabel(val) || val
+				}
+				if (this.filterable && !this.inputable) {
+					this.filterValue = this.getLabel(val) || ''
+				}
+				if (this.filterable && this.inputable) {
+					this.filterValue = this.getLabel(val) || val
+				}
+				if (this.setDataFn && !this.inputable) {
+					this.setDataInputValue = this.getLabel(val) || ''
+				}
+				if (this.setDataFn && this.inputable) {
+					this.setDataInputValue = this.getLabel(val) || val
+				}
+			}
+		},
+		setSeleted(val) {
+			let selected = JSON.parse(JSON.stringify(this.selected))
+			if (!this.multiple) {
+				if (this.options.findIndex(option=>option[this.iValueText] === val) === -1) {
+					selected = {
+						[this.iLabelText]: val,
+						[this.iValueText]: val
+					}
+				} else {
+					selected = this.options.find(option=>option[this.iValueText] === val)
+				}
+			} else {
+				if (val === '') {
+					selected = []
+				} else {
+					const arr = Array.isArray(val) ? unique(val) : unique(val.split(this.splitSymbol || ','))
+					let selectedArr = []
+					arr.map(item => {
+						if (item && item.trim()) {
+							if (this.options.findIndex(option=>String(option[this.iValueText]) === String(item)) === -1) {
+								selectedArr.push({
+									[this.iLabelText]: item,
+									[this.iValueText]: item,
+									hide: !this.inputable // 当输入一个不存在的值的时候，如果可自定义则显示，否则不显示
+								})
+							} else {
+								this.options.map(option => {
+									if (String(option[this.iValueText]) === String(item)) {
+										selectedArr.push(option)
+									}
+								})
+							}
+						}
+					})
+					selected = selectedArr
+				}
+			}
+			if (this.beforeChange) {
+				const fn = this.beforeChange(selected)
+				if (fn && fn.then) {
+					fn.then(flag => {
+						this.selected = selected
+					}).catch((e)=>{})
+				} else {
+					if (fn) {
+						this.selected = selected
+					}
+				}
+			} else {
+				this.selected = selected
+			}
+
+		},
+		enter() {
+			if (!(this.multiple && this.inputable)) {
+				this.toggleLayer()
+			} else {
+				// 判断重复项
+				let value = this.filterable ? this.multipleFilterValue : this.multipleInputValue
+				if (
+					this.selected.find(item => item[this.iLabelText] === value) ||
+					this.selected.find(item => item[this.iValueText] === value)
+				) {
+					this.$tip.error(this.t('to.select.tip.error.repetition'))
+					return
+				}
+				// 判断空项
+				if (!value.trim()) {
+					return
+				}
+				const newOption = {
+					[this.iLabelText]: value,
+					[this.iValueText]: value
+				}
+				if (this.beforeChange) {
+					const fn = this.beforeChange(newOption)
+					if (fn && fn.then) {
+						fn.then(flag => {
+							this.selected.push(newOption)
+						}).catch((e)=>{})
+					} else {
+						if (fn) {
+							this.selected.push(newOption)
+						}
+					}
+				} else {
+					this.selected.push(newOption)
+				}
+				if (this.filterable) {
+					this.multipleFilterValue = ''
+				} else {
+					this.multipleInputValue = ''
+				}
+				if (this.$phone) {
+					if (this.filterable) {
+						setTimeout(() => {
+							this.$refs.popupFilter.focus()
+						}, 500);
+					} else {
+						setTimeout(() => {
+							this.$refs.popupInput.focus()
+						}, 500);
+					}
+				}
+			}
+		},
+		filter(item) {
+			if (!this.inputing) {
+				return true
+			}
+			if (this.filterable) {
+				return item[this.iLabelText].includes(this.filterValue)
+			} else {
+				return true
+			}
+		},
+		multipleFilter(item) {
+			if (this.filterable) {
+				return item[this.iLabelText].includes(this.multipleFilterValue)
+			} else {
+				return true
+			}
+		},
+		getLabel(val) {
+			let obj = this.options.find(item => item[this.iValueText] === val)
+			if (obj && obj[this.iLabelText]) {
+				return obj[this.iLabelText]
+			}
+		},
+		setOptions() {
+			// 同步选项
+			if (this.data) {
+				if (typeof this.data === 'string') {
+					// 字符串模式传值（如：:data="选项1, 选项2, 选项3"）
+					let arr = []
+					for (let i = 0; i < this.data.split(',').length; i++) {
+						const el = this.data.split(',')[i]
+						let obj = {}
+						obj[this.iLabelText] = obj[this.iValueText] = el
+						arr.push(obj)
+					}
+					if (this.$phone && this.filterable) {
+						this.options = arr.slice(0, 100)
+						this.anotherOptions = arr.slice(100)
+					} else {
+						this.options = arr
+					}
+				} else {
+					// 如果是手机端，则先取前 100 项，再拼接后面的
+					if (this.$phone && this.filterable) {
+						this.options = this.data.slice(0, 100)
+						this.anotherOptions = this.data.slice(100)
+					} else {
+						// 对象数组模式传值
+						this.options = [...this.data]
+					}
+					// 如果设置了方法，则替换为方法
+					if (typeof this.setLabelFn === 'function') {
+						this.options.forEach(item => {
+							item.label = this.setLabelFn(item)
+						})
+					}
+				}
+
+				// 设置 selected
+				this.setSeleted(this.value)
+				this.setPlaceholder()
+			}
+
+			// 异步选项
+			if (this.api) {
+				// 通过配置自动设置 labelText 与 valueText
+				if (this.$TouchUI.staticDataApiConfig.labelText && this.labelText === 'label') {
+					this.iLabelText = this.$TouchUI.staticDataApiConfig.labelText
+				}
+				if (this.$TouchUI.staticDataApiConfig.valueText && this.valueText === 'value') {
+					this.iValueText = this.$TouchUI.staticDataApiConfig.valueText
+				}
+				if (this.$TouchUI.staticDataApiConfig.resPath && !this.resPath) {
+					this.iResPath = this.$TouchUI.staticDataApiConfig.resPath
+				}
+				if (this.$TouchUI.staticDataApiConfig.apiParam && !this.apiParam) {
+					this.iApiParam = this.$TouchUI.staticDataApiConfig.apiParam
+				}
+				if (this.$TouchUI.staticDataApiConfig.apiHeaders && !this.apiHeaders) {
+					this.iApiHeaders = this.$TouchUI.staticDataApiConfig.apiHeaders
+				}
+				if (this.$TouchUI.staticDataApiConfig.apiLabel && !this.apiLabel) {
+					this.iApiLabel = this.$TouchUI.staticDataApiConfig.apiLabel
+				}
+				if (this.$TouchUI.staticDataApiConfig.errorPath && !this.errorPath) {
+					this.iErrorPath = this.$TouchUI.staticDataApiConfig.errorPath
+				}
+				if (this.$TouchUI.staticDataApiConfig.resPath && !this.successCode) {
+					this.iSuccessCode = this.$TouchUI.staticDataApiConfig.successCode
+				}
+
+				// 从缓存中取数据，如果没有则异步获取
+				if (sessionStorage.getItem('static.' + this.api)) {
+					this.options = JSON.parse(sessionStorage.getItem('static.' + this.api))
+
+					// 设置 selected
+					this.setSeleted(this.value)
+					this.setPlaceholder()
+					this.$emit('option-loaded', this.options)
+
+				} else {
+					let action = ''
+					if (this.iApiLabel && this.api) {
+						Object.assign(this.iApiParam, { [this.iApiLabel]: this.api })
+					}
+					if (this.api.indexOf('http') > -1) {
+						action = this.api
+					} else {
+						if (this.$TouchUI.staticDataApiConfig.action && this.$TouchUI.staticDataApiConfig.action.indexOf('=') > -1 && this.$TouchUI.staticDataApiConfig.action.indexOf('?') > -1) {
+							// 兼容 GET 格式的 POST 请求
+							action = this.$TouchUI.staticDataApiConfig.action + this.api
+						} else {
+							action = this.$TouchUI.staticDataApiConfig.action
+						}
+					}
+					const options = {
+						data: this.iApiParam,
+						action,
+						headers: Object.assign({}, this.iApiHeaders),
+						onSuccess: res => {
+							if (typeof res === 'string') {
+								res = JSON.parse(res)
+							}
+
+							// 直接返回一个 select 所需要的 data 对象时，不需要任何解析
+							// 如：[{name:'张三', id:0},{name:'李四', id:1}]
+							if (Array.isArray(res)) {
+								this.options = res
+								sessionStorage.setItem('static.' + this.api, JSON.stringify(res))
+
+								// 设置 selected
+								this.setSeleted(this.value)
+								this.setPlaceholder()
+								this.$emit('option-loaded', this.options)
+							} else if (res.code === this.iSuccessCode) {
+								// 按照 json 格式返回，需要根据配置路径进行解析
+								// 如：{ code:'0', data:[{name:'张三', id:0},{name:'李四', id:1}]}
+								let data = []
+								if (this.iResPath) {
+									let resPath = this.iResPath.split('/')
+									resPath.forEach(el => {
+										data = res[el]
+									})
+								}
+								this.options = data
+								sessionStorage.setItem('static.' + this.api, JSON.stringify(data))
+
+								// 设置 selected
+								this.setSeleted(this.value)
+								this.setPlaceholder()
+								this.$emit('option-loaded', this.options)
+							} else {
+								this.options = []
+								this.t('to.select.tip.error.res', `select api(${this.api})`)
+							}
+						},
+						onError: res => {
+							this.$tip.danger(this.t('to.select.tip.error.api', `select api(${this.api}) `))
+						}
+					}
+					const req = this.httpRequest(options)
+					if (req && req.then) {
+						req.then(options.onSuccess, options.onError)
+					}
+				}
+			}
+		},
+		setPlaceholder() {
+			if (this.native) {
+				return
+			}
+			// 设置 placeholder
+			if (!this.multiple && this.clearable && !this.inputable && !this.setDataFn && !this.filterable && (!this.optionDisplay || this.optionDisplay === 'float')) {
+				this.options.unshift({})
+				this.$set(this.options, 0, {
+					[this.iLabelText]: '',
+					[this.iValueText]: ''
+				})
+			}
+		},
+		setValue(val) {
+			this.iValue = val
+			if (!this.multiple || this.closeSelection) {
+				this.closeLayer()
+			}
+		},
+		selectAll() {
+			let arr = []
+			this.options.map(item=>{
+				if (!item.disabled) {
+					arr.push(item[this.iValueText])
+				}
+			})
+			this.iValue = arr.toString()
+		},
+		Deselect() {
+			let arr = []
+			this.options.map(item=>{
+				if (!item.disabled && !this.iValue.split(',').includes(item[this.iValueText])) {
+					arr.push(item[this.iValueText])
+				}
+			})
+			this.iValue = arr.toString()
+		},
+		clear() {
+			this.setValue('')
+		},
+		itemChange(item) {
+			if (item.disabled) {
+				return
+			}
+			this.setSeleted(item[this.iValueText])
+			// this.selected = item
+			this.$nextTick(()=>{
+				this.$emit('selected', item)
+				this.closeLayer()
+			})
+		},
+		adjustLayer() {
+			if (this.optionDisplay !== 'none' && this.$refs.layer.show) {
+				this.$nextTick(()=>{
+					this.$refs.layer.set(this.$refs.link)
+				})
+			}
+		},
+		openLayer() {
+			if (!this.disabled && this.optionDisplay !== 'none') {
+				this.$refs.layer.open('link')
+				if (this.filterable && this.$phone) {
+					setTimeout(() => {
+						if (this.$refs.popupFilter) {
+							this.$refs.popupFilter.focus()
+						}
+						this.$nextTick(() => {
+							this.options = this.options.concat(this.anotherOptions)
+						})
+					}, 500);
+				}
+				if (this.inputable && this.$phone) {
+					setTimeout(() => {
+						if (this.$refs.popupInput) {
+							this.$refs.popupInput.focus()
+						}
+					}, 500);
+				}
+			}
+		},
+		closeLayer() {
+			if (!this.disabled && this.optionDisplay !== 'none') {
+				this.inputing = false
+				this.phoneCloseLayer()
+			}
+		},
+		phoneCloseLayer() {
+			this.$refs.layer.close()
+			if (this.filterable && this.$phone) {
+				this.options = this.options.slice(0, 100)
+			}
+		},
+		toggleLayer() {
+			if (this.$refs.layer) {
+				if (this.$refs.layer.show) {
+					this.closeLayer()
+				} else {
+					this.openLayer()
+				}
+			}
+		},
+		click() {
+			if (!this.native) {
+				this.toggleLayer()
+			}
+			this.$emit('click')
+		},
+		layerClose() {
+			if (!this.multiple) {
+				if (this.filterable && !this.inputable) {
+					if (this.iValue) {
+						const label = this.getLabel(this.iValue)
+						if (label) {
+							this.filterValue = label
+						} else {
+							this.filterValue = ''
+						}
+					} else {
+						this.filterValue = ''
+					}
+				}
+			} else {
+				if (this.inputable) {
+					this.multipleInputValue = ''
+				}
+				if (this.filterable) {
+					this.multipleFilterValue = ''
+				}
+			}
+		},
+		layerMousedown() {
+			this.blurByLayer = true
+			let timer = null
+			timer = setTimeout(() => {
+				this.blurByLayer = false
+				clearTimeout(timer)
+				timer = null
+			}, 200);
+		},
+		focus() {
+			this.errorTip = ''
+			this.focused = true
+		},
+		blur() {
+			this.focused = false
+			if (!this.blurByLayer && !this.$phone) {
+				this.closeLayer()
+			}
+		},
+		inputBlur() {
+			this.focused = false
+			if (!this.blurByLayer && !this.$phone) {
+				this.closeLayer()
+			}
+		},
+		inputFocus() {
+			this.focused = true
+			if (this.value === '') {
+				this.openLayer()
+			}
+		},
+		inputInput(e) {
+			if (e && e.keyCode === 13) {
+				this.$emit('inputEnter')
+			}
+			this.$nextTick(()=>{
+				if (this.value === '') {
+					this.openLayer()
+				} else {
+					this.closeLayer()
+				}
+			})
+		},
+		filterBlur() {
+			this.focused = false
+			if (!this.blurByLayer && !this.$phone) {
+				this.closeLayer()
+			}
+		},
+		filterFocus() {
+			this.focused = true
+			this.openLayer()
+		},
+		filterInput(e) {
+			if (e && e.keyCode === 13) {
+				this.$emit('inputEnter')
+			}
+			this.$nextTick(()=>{
+				this.inputing = true
+				this.adjustLayer()
+				this.openLayer()
+			})
+		},
+		filterClear() {
+			this.iValue = ''
+		},
+		multipleInputBlur() {
+			this.focused = false
+			if (!this.blurByLayer && !this.$phone) {
+				this.closeLayer()
+			}
+		},
+		multipleInputFocus() {
+			this.focused = true
+			if (this.value === '') {
+				this.openLayer()
+			}
+		},
+		multipleItemChange(value, item) {
+			let val = this.selected.map(option => option[this.iValueText])
+			if (value) {
+				val.push(item[this.iValueText])
+				this.setSeleted(val.join(','))
+			} else {
+				this.removeItem(val, item[this.iValueText])
+				this.setSeleted(val.join(','))
+			}
+			if (this.inputable && !this.filterable) {
+				if (this.$phone) {
+					setTimeout(() => {
+						this.$refs.popupInput.focus()
+					}, 500);
+				} else {
+					setTimeout(() => {
+						this.$refs.input.focus()
+					}, 500);
+				}
+				this.multipleInputValue = ''
+			}
+			if (this.filterable) {
+				if (this.$phone) {
+					setTimeout(() => {
+						this.$refs.popupFilter.focus()
+					}, 500);
+				} else {
+					setTimeout(() => {
+						this.$refs.filter.focus()
+					}, 500);
+				}
+				this.multipleFilterValue = ''
+			}
+			if (this.setDataFn) {
+				setTimeout(() => {
+					this.$refs.filter.focus()
+				}, 500);
+				this.setDataInputValue = ''
+			}
+		},
+		removeTag(item) {
+			let val = this.selected.map(option => option[this.iValueText])
+			this.removeItem(val, item[this.iValueText])
+			this.setSeleted(val.join(','))
+			if (this.inputable) {
+				if (this.$phone) {
+					if (this.filterable) {
+						if (this.$refs.popupFilter) {
+							setTimeout(() => {
+								this.$refs.popupFilter.focus()
+							}, 500);
+						}
+					} else {
+						if (this.$refs.popupInput) {
+							setTimeout(() => {
+								this.$refs.popupInput.focus()
+							}, 500);
+						}
+					}
+				} else {
+					if (this.filterable) {
+						setTimeout(() => {
+							this.$refs.filter.focus()
+						}, 500);
+					} else {
+						setTimeout(() => {
+							this.$refs.input.focus()
+						}, 500);
+					}
+				}
+			}
+		},
+		multipleFilterBlur() {
+			this.focused = false
+			if (!this.blurByLayer && !this.$phone) {
+				this.closeLayer()
+			}
+		},
+		multipleFilterFocus() {
+			this.focused = true
+			if (this.value === '') {
+				this.openLayer()
+			}
+		},
+		removeItem(obj, val) {
+			let index
+
+			// 字符串
+			if (typeof obj === 'string') {
+				let arr = obj.split(',')
+				index = arr.findIndex(item=>item === val)
+				obj = arr.join(',')
+			}
+
+			// 字符串数组
+			else if (Array.isArray(obj) && typeof obj[0] === 'string') {
+				index = obj.findIndex(item=>item === val)
+				obj.splice(index, 1)
+			}
+
+			// 对象数组
+			else {
+				index = obj.findIndex(item=>item[this.iValueText] === val)
+				obj.splice(index, 1)
+			}
+		},
+		setDataLoading(val) {
+			this.dataLoading = val
+		},
+
+		// 记录历史值，以便对比或者取值
+		compare() {
+			this.valueStore.unshift(this.iValue)
+		},
+		setDisabled(f) {
+			this.disabled = f
+		},
+		// 撤销
+		restore() {
+			this.data = this.valueStore[0]
+			this.valueStore.splice(0, 1)
+		}
+	}
+}
+</script>