瀏覽代碼

添加空选项提示

icssoa 5 月之前
父節點
當前提交
13f8c8d51d
共有 2 個文件被更改,包括 21 次插入1 次删除
  1. 6 0
      pages/demo/form/select.uvue
  2. 15 1
      uni_modules/cool-ui/components/cl-select/cl-select.uvue

+ 6 - 0
pages/demo/form/select.uvue

@@ -91,6 +91,10 @@
 					</cl-list-item>
 				</cl-list>
 			</demo-item>
+
+			<demo-item :label="t('空数据')">
+				<cl-select v-model="form.selected" :options="options4"></cl-select>
+			</demo-item>
 		</view>
 	</cl-page>
 </template>
@@ -368,6 +372,8 @@ const options3 = ref<ClSelectOption[]>([
 	}
 ]);
 
+const options4 = ref<ClSelectOption[]>([]);
+
 function openSelect2() {
 	selectRef2.value!.open((value) => {
 		const d = options2.value.find((item) => item.value == value);

+ 15 - 1
uni_modules/cool-ui/components/cl-select/cl-select.uvue

@@ -15,10 +15,19 @@
 			<slot name="prepend"></slot>
 
 			<view class="cl-select-popup__picker">
+				<cl-empty
+					v-if="noOptions"
+					:fixed="false"
+					:pt="{
+						className: '!h-[600rpx]'
+					}"
+				></cl-empty>
+
 				<cl-picker-view
 					:value="indexes"
 					:columns="columns"
 					@change-index="onChange"
+					v-else
 				></cl-picker-view>
 			</view>
 
@@ -38,7 +47,7 @@
 					>{{ cancelText }}</cl-button
 				>
 				<cl-button
-					v-if="showConfirm"
+					v-if="showConfirm && !noOptions"
 					size="large"
 					:pt="{
 						className: 'flex-1 !rounded-xl h-[80rpx]'
@@ -158,6 +167,11 @@ const ptTrigger = computed(() => parseToObject(pt.value.trigger));
 // 解析弹窗透传样式配置
 const ptPopup = computed(() => parseToObject(pt.value.popup));
 
+// 是否为空选项
+const noOptions = computed(() => {
+	return isEmpty(props.options);
+});
+
 // 当前选中的值
 const value = ref<any[]>([]);