From ca94da05530ca792c81a286ecb64db204a4e68db Mon Sep 17 00:00:00 2001 From: whycq <10027870+whycq@user.noreply.gitee.com> Date: 星期二, 05 十二月 2023 08:03:00 +0800 Subject: [PATCH] # --- uni_modules/riko-combox/package.json | 86 ++++++++++++ uni_modules/riko-combox/components/riko-combox/riko-combox.vue | 293 +++++++++++++++++++++++++++++++++++++++++ uni_modules/riko-combox/changelog.md | 17 ++ uni_modules/riko-combox/readme.md | 7 + 4 files changed, 403 insertions(+), 0 deletions(-) diff --git a/uni_modules/riko-combox/changelog.md b/uni_modules/riko-combox/changelog.md new file mode 100644 index 0000000..900d4d6 --- /dev/null +++ b/uni_modules/riko-combox/changelog.md @@ -0,0 +1,17 @@ +## 2.0.0锛�2023-04-15锛� +- 涓汉浼樺寲 By LuckyRiko +## 1.0.1锛�2021-11-23锛� +- 浼樺寲 label銆乴abel-width 灞炴�� +## 1.0.0锛�2021-11-19锛� +- 浼樺寲 缁勪欢UI锛屽苟鎻愪緵璁捐璧勬簮锛岃瑙�:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource) +- 鏂囨。杩佺Щ锛岃瑙�:[https://uniapp.dcloud.io/component/uniui/uni-combox](https://uniapp.dcloud.io/component/uniui/uni-combox) +## 0.1.0锛�2021-07-30锛� +- 缁勪欢鍏煎 vue3锛屽浣曞垱寤簐ue3椤圭洰锛岃瑙� [uni-app 椤圭洰鏀寔 vue3 浠嬬粛](https://ask.dcloud.net.cn/article/37834) +## 0.0.6锛�2021-05-12锛� +- 鏂板 缁勪欢绀轰緥鍦板潃 +## 0.0.5锛�2021-04-21锛� +- 浼樺寲 娣诲姞渚濊禆 uni-icons, 瀵煎叆鍚庤嚜鍔ㄤ笅杞戒緷璧� +## 0.0.4锛�2021-02-05锛� +- 浼樺寲 缁勪欢寮曠敤鍏崇郴锛岄�氳繃uni_modules寮曠敤缁勪欢 +## 0.0.3锛�2021-02-04锛� +- 璋冩暣涓簎ni_modules鐩綍瑙勮寖 diff --git a/uni_modules/riko-combox/components/riko-combox/riko-combox.vue b/uni_modules/riko-combox/components/riko-combox/riko-combox.vue new file mode 100644 index 0000000..7b1155a --- /dev/null +++ b/uni_modules/riko-combox/components/riko-combox/riko-combox.vue @@ -0,0 +1,293 @@ +<template> + <view class="uni-combox" :class="border ? '' : 'uni-combox__no-border'"> + <view v-if="label" class="uni-combox__label" :style="labelStyle"> + <text>{{label}}</text> + </view> + <view class="uni-combox__input-box"> + <input class="uni-combox__input" type="text" :placeholder="placeholder" :disabled="!inputFlag" + placeholder-class="uni-combox__input-plac" v-model="inputVal" :focus="showSelector && inputFlag" + @click="toggleSelector" /> + <uni-icons :type="showSelector? 'top' : 'bottom'" size="14" color="#999" @click="toggleSelector"> + </uni-icons> + </view> + <view class="uni-combox__selector" v-if="showSelector"> + <view class="uni-popper__arrow"></view> + <scroll-view scroll-y="true" class="uni-combox__selector-scroll"> + <view class="uni-combox__selector-empty" v-if="filterCandidatesLength === 0"> + <text>{{emptyTips}}</text> + </view> + + <block v-else> + <view class="uni-combox__selector-item" @click="onSelectorClick('')"> + <text style="color: #ff5353;">娓呴櫎鎵�閫夊唴瀹�</text> + </view> + <view class="uni-combox__selector-item" v-for="(item,index) in filterCandidates" :key="item.id" + @click="onSelectorClick(item.name)"> + <text>{{item.name}}</text> + </view> + </block> + </scroll-view> + </view> + </view> +</template> + +<script> + /** + * Combox 缁勫悎杈撳叆妗� + * @description 缁勫悎杈撳叆妗嗕竴鑸敤浜庢棦鍙互杈撳叆涔熷彲浠ラ�夋嫨鐨勫満鏅� + * @tutorial https://ext.dcloud.net.cn/plugin?id=1261 + * @property {String} label 宸︿晶鏂囧瓧 + * @property {String} labelWidth 宸︿晶鍐呭瀹藉害 + * @property {String} placeholder 杈撳叆妗嗗崰浣嶇 + * @property {Array} candidates 鍊欓�夐」鍒楄〃 + * @property {String} emptyTips 绛涢�夌粨鏋滀负绌烘椂鏄剧ず鐨勬枃瀛� + * @property {String} value 缁勫悎妗嗙殑鍊� + */ + export default { + name: 'uniCombox', + emits: ['input', 'update:modelValue'], + props: { + inputFlag: { + type: Boolean, + default: false + }, + border: { + type: Boolean, + default: true + }, + label: { + type: String, + default: '' + }, + labelWidth: { + type: String, + default: 'auto' + }, + placeholder: { + type: String, + default: '' + }, + candidates: { + type: Array, + default () { + return [] + } + }, + emptyTips: { + type: String, + default: '鏃犲尮閰嶉」' + }, + // #ifndef VUE3 + value: { + type: [String, Number], + default: '' + }, + // #endif + // #ifdef VUE3 + modelValue: { + type: [String, Number], + default: '' + }, + // #endif + }, + data() { + return { + showSelector: false, + inputVal: '' + } + }, + computed: { + labelStyle() { + if (this.labelWidth === 'auto') { + return "" + } + return `width: ${this.labelWidth}` + }, + filterCandidates() { + console.log('---this.inputVal---', this.inputVal); + if (this.inputVal && this.inputFlag == true) { + return this.candidates.filter((item) => { + return item.name.indexOf(this.inputVal) > -1; + }) + } else { + return this.candidates; + } + }, + filterCandidatesLength() { + return this.filterCandidates.length + } + }, + watch: { + // #ifndef VUE3 + value: { + handler(newVal) { + this.inputVal = newVal + }, + immediate: true + }, + // #endif + // #ifdef VUE3 + modelValue: { + handler(newVal) { + this.inputVal = newVal + }, + immediate: true + }, + // #endif + }, + methods: { + toggleSelector() { + this.showSelector = !this.showSelector; + if(this.inputFlag == true && this.showSelector == false){ + this.onSelectorClick(this.inputVal); + } + }, + onSelectorClick(itemName) { + let item = ''; + if (itemName) { + item = this.filterCandidates.find(item => item.name === itemName); + } + + if (!item) { + this.inputVal = '' + } else { + this.inputVal = itemName + } + + this.$emit('input', item) + // #ifdef VUE3 + this.$emit('update:modelValue', item) + // #endif + + this.showSelector = false + }, + + } + } +</script> + +<style lang="scss" scoped> + .uni-combox { + font-size: 14px; + border: 1px solid #DCDFE6; + border-radius: 4px; + padding: 6px 10px; + position: relative; + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + // height: 40px; + flex-direction: row; + align-items: center; + // border-bottom: solid 1px #DDDDDD; + } + + .uni-combox__label { + font-size: 16px; + line-height: 22px; + padding-right: 10px; + color: #999999; + } + + .uni-combox__input-box { + position: relative; + /* #ifndef APP-NVUE */ + display: flex; + /* #endif */ + flex: 1; + flex-direction: row; + align-items: center; + } + + .uni-combox__input { + flex: 1; + font-size: 14px; + height: 22px; + line-height: 22px; + } + + .uni-combox__input-plac { + font-size: 14px; + color: #999; + } + + .uni-combox__selector { + /* #ifndef APP-NVUE */ + box-sizing: border-box; + /* #endif */ + position: absolute; + top: calc(100% + 12px); + left: 0; + width: 100%; + background-color: #FFFFFF; + border: 1px solid #EBEEF5; + border-radius: 6px; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + z-index: 2; + padding: 4px 0; + } + + .uni-combox__selector-scroll { + /* #ifndef APP-NVUE */ + max-height: 200px; + box-sizing: border-box; + /* #endif */ + } + + .uni-combox__selector-empty, + .uni-combox__selector-item { + /* #ifndef APP-NVUE */ + display: flex; + cursor: pointer; + /* #endif */ + line-height: 36px; + font-size: 14px; + text-align: center; + // border-bottom: solid 1px #DDDDDD; + padding: 0px 10px; + } + + .uni-combox__selector-item:hover { + background-color: #f9f9f9; + } + + .uni-combox__selector-empty:last-child, + .uni-combox__selector-item:last-child { + /* #ifndef APP-NVUE */ + border-bottom: none; + /* #endif */ + } + + // picker 寮瑰嚭灞傞�氱敤鐨勬寚绀哄皬涓夎 + .uni-popper__arrow, + .uni-popper__arrow::after { + position: absolute; + display: block; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + border-width: 6px; + } + + .uni-popper__arrow { + filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03)); + top: -6px; + left: 10%; + margin-right: 3px; + border-top-width: 0; + border-bottom-color: #EBEEF5; + } + + .uni-popper__arrow::after { + content: " "; + top: 1px; + margin-left: -6px; + border-top-width: 0; + border-bottom-color: #fff; + } + + .uni-combox__no-border { + border: none; + } +</style> \ No newline at end of file diff --git a/uni_modules/riko-combox/package.json b/uni_modules/riko-combox/package.json new file mode 100644 index 0000000..c261882 --- /dev/null +++ b/uni_modules/riko-combox/package.json @@ -0,0 +1,86 @@ +{ + "id": "riko-combox", + "displayName": "riko-combox 涓嬫媺鍗曢�夋", + "version": "2.0.0", + "description": "鍙互閫夋嫨涔熷彲浠ユ悳绱㈢殑涓嬫媺鍗曢�夋 瀹樻柟榄旀敼鐗� By LuckyRiko", + "keywords": [ + "uni-ui", + "uniui", + "combox", + "缁勫悎妗�", + "select" +], + "repository": "", +"engines": { + }, + "directories": { + "example": "../../temps/example_temps" + }, +"dcloudext": { + "sale": { + "regular": { + "price": "0.00" + }, + "sourcecode": { + "price": "0.00" + } + }, + "contact": { + "qq": "" + }, + "declaration": { + "ads": "鏃�", + "data": "鏃�", + "permissions": "鏃�" + }, + "npmurl": "", + "type": "component-vue" + }, + "uni_modules": { + "dependencies": [ + "uni-scss", + "uni-icons" + ], + "encrypt": [], + "platforms": { + "cloud": { + "tcb": "y", + "aliyun": "y" + }, + "client": { + "App": { + "app-vue": "y", + "app-nvue": "n" + }, + "H5-mobile": { + "Safari": "y", + "Android Browser": "y", + "寰俊娴忚鍣�(Android)": "y", + "QQ娴忚鍣�(Android)": "y" + }, + "H5-pc": { + "Chrome": "y", + "IE": "y", + "Edge": "y", + "Firefox": "y", + "Safari": "y" + }, + "灏忕▼搴�": { + "寰俊": "y", + "闃块噷": "y", + "鐧惧害": "y", + "瀛楄妭璺冲姩": "y", + "QQ": "y" + }, + "蹇簲鐢�": { + "鍗庝负": "u", + "鑱旂洘": "u" + }, + "Vue": { + "vue2": "y", + "vue3": "y" + } + } + } + } +} \ No newline at end of file diff --git a/uni_modules/riko-combox/readme.md b/uni_modules/riko-combox/readme.md new file mode 100644 index 0000000..3310998 --- /dev/null +++ b/uni_modules/riko-combox/readme.md @@ -0,0 +1,7 @@ +## Combox 缁勫悎妗� +> **缁勪欢鍚嶏細riko-combox** + +缁勫悎妗嗙粍浠躲�� + +### [鏌ョ湅鏂囨。](https://uniapp.dcloud.io/component/uniui/uni-combox) +#### 濡備娇鐢ㄨ繃绋嬩腑鏈変换浣曢棶棰橈紝鎴栬�呮偍瀵箄ni-ui鏈変竴浜涘ソ鐨勫缓璁紝娆㈣繋鍔犲叆 uni-ui 浜ゆ祦缇わ細871950839 \ No newline at end of file -- Gitblit v1.9.1