feat：门卫样式

wk

2024-07-25 c4aef9b623635d49cf87308bfb874f4141c9d448

 uni_modules/niceui-data-select-input/components/niceui-data-select-input/niceui-data-select-input.vue

@@ -1,29 +1,58 @@
<template>
   <view class="uni-stat__select">
      <span v-if="label" class="uni-label-text hide-on-phone">{{label + '：'}}</span>
      <view class="uni-stat-box" :class="{'uni-stat__actived': current}">
         <view class="uni-select" :class="{'uni-select--disabled':disabled}">
      <span v-if="label"
         class="uni-label-text hide-on-phone">{{label + '：'}}</span>
      <view class="uni-stat-box"
         :class="{'uni-stat__actived': current}">
         <view class="uni-select"
            :class="{'uni-select--disabled':disabled}">
            <view class="uni-select__input-box">
               <input class="uni-select__input-text" v-if="!multiple" v-model="current" @click="toggleSelector" @input="inputEnter" :placeholder="typePlaceholder"></input>
               <input class="uni-select__input-text"
                  v-if="!multiple"
                  v-model="current"
                  @click="toggleSelector"
                  @input="inputEnter"
                  :placeholder="typePlaceholder"
                  readonly
                  :disabled="true"></input>
               <!-- <view v-else class="uni-select__input-text uni-select__input-placeholder">{{typePlaceholder}}</view> -->
               <input class="uni-select__input-text" v-if="multiple" v-model="current" @click="toggleSelector" @input="inputEnter" :placeholder="typePlaceholder"></input>
               <view v-if="current && clear && !disabled" @click.stop="clearVal" >
                  <uni-icons type="clear" color="#c0c4cc" size="24"/>
               <input class="uni-select__input-text"
                  v-if="multiple"
                  v-model="current"
                  @click="toggleSelector"
                  @input="inputEnter"
                  :placeholder="typePlaceholder"></input>
               <view v-if="current && clear && !disabled"
                  @click.stop="clearVal">
                  <uni-icons type="clear"
                     color="#c0c4cc"
                     size="24" />
               </view>
               <view v-else>
                  <uni-icons :type="showSelector? 'top' : 'bottom'" size="14" color="#999" />
                  <uni-icons :type="showSelector? 'top' : 'bottom'"
                     size="14"
                     color="#999" />
               </view>
            </view>
            <view class="uni-select--mask" v-if="showSelector" @click="toggleSelector" />
            <view class="uni-select__selector" v-if="showSelector">
            <view class="uni-select--mask"
               v-if="showSelector"
               @click="toggleSelector" />
            <view class="uni-select__selector"
               v-if="showSelector">
               <view class="uni-popper__arrow"></view>
               <scroll-view scroll-y="true" class="uni-select__selector-scroll">
                  <view class="uni-select__selector-empty" v-if="mixinDatacomResData.length === 0">
               <scroll-view scroll-y="true"
                  class="uni-select__selector-scroll">
                  <view class="uni-select__selector-empty"
                     v-if="mixinDatacomResData.length === 0">
                     <text>{{emptyTips}}</text>
                  </view>
                  <view v-else class="uni-select__selector-item" v-for="(item,index) in mixinDatacomResData" :key="index"
                  <view v-else
                     class="uni-select__selector-item"
                     v-for="(item,index) in mixinDatacomResData"
                     :key="index"
                     @click="change(item)">
                     <text :class="{'uni-select__selector__disabled': item.disable,'active':currentArr.includes(item.text)}">{{formatItemName(item)}}</text>
                     <text
                        :class="{'uni-select__selector__disabled': item.disable,'active':currentArr.includes(item.text)}">{{formatItemName(item)}}</text>
                  </view>
               </scroll-view>
            </view>
@@ -107,8 +136,8 @@
            apps: [],
            channels: [],
            cacheKey: "uni-data-select-lastSelectedValue",
            tempData:[],
            currentArr:[],
            tempData: [],
            currentArr: [],
         };
      },
      created() {
@@ -132,7 +161,7 @@
               common + placeholder :
               common
         },
         valueCom(){
         valueCom() {
            // #ifdef VUE3
            return this.modelValue;
            // #endif
@@ -163,27 +192,25 @@
         }
      },
      methods: {
         inputEnter(v){
         inputEnter(v) {
            console.log(v);
            let val = v.detail.value
            if(val){
               const arr = this.mixinDatacomResData.filter(d=>d.text.indexOf(val)>-1)
               if(arr.length>0){
            if (val) {
               const arr = this.mixinDatacomResData.filter(d => d.text.indexOf(val) > -1)
               if (arr.length > 0) {
                  this.mixinDatacomResData = JSON.parse(JSON.stringify(arr))
               }else{
               } else {
                  this.mixinDatacomResData = []
                  this.mixinDatacomResData.push(
                    { value: val, text: val}
                  )
                  this.mixinDatacomResData.push({ value: val, text: val })
                  this.tempData = this.mixinDatacomResData
                  this.current = val
               }
            }else{
            } else {
               this.initDefVal()
            }
				

         },
         debounce(fn, time = 100){
         debounce(fn, time = 100) {
            let timer = null
            return function(...args) {
               if (timer) clearTimeout(timer)
@@ -193,11 +220,11 @@
            }
         },
         // 执行数据库查询
         query(){
         query() {
            this.mixinDatacomEasyGet();
         },
         // 监听查询条件变更事件
         onMixinDatacomPropsChange(){
         onMixinDatacomPropsChange() {
            if (this.collection) {
               this.debounceGet();
            }
@@ -220,22 +247,22 @@
                  }
                  defValue = defItem
               }
                 if (defValue || defValue === 0) {
                          this.emit(defValue)
                 }
               if (defValue || defValue === 0) {
                  this.emit(defValue)
               }
            }
            const def = this.mixinDatacomResData.find(item => item.value === defValue)
            this.current = def ? this.formatItemName(def) : ''
            if(this.current==''){
               if(this.mixinDatacomResData.length==1){
            if (this.current == '') {
               if (this.mixinDatacomResData.length == 1) {
                  this.current = this.formatItemName(this.mixinDatacomResData[0])
               }
            }
            if(this.multiple){
               if(this.currentArr.length>0){
            if (this.multiple) {
               if (this.currentArr.length > 0) {
                  this.current = this.currentArr.join(',')
               }
					

            }
         },

@@ -257,7 +284,7 @@

         clearVal() {
            this.current = ''
            if(this.multiple) this.currentArr=[]
            if (this.multiple) this.currentArr = []
            this.emit('')
            if (this.collection) {
               this.removeCache()
@@ -265,17 +292,17 @@
         },
         change(item) {
            if (!item.disable) {
               if(!this.multiple){
               if (!this.multiple) {
                  this.showSelector = false
                  this.current = this.formatItemName(item)
                  this.emit(item.value)
               }else{
                  if(!this.currentArr.includes(item.text)){
               } else {
                  if (!this.currentArr.includes(item.text)) {
                     this.currentArr.push(this.formatItemName(item))
                  }else{
                     this.currentArr.forEach((it,index)=>{
                        if(it==this.formatItemName(item)){
                           this.currentArr.splice(index,1)
                  } else {
                     this.currentArr.forEach((it, index) => {
                        if (it == this.formatItemName(item)) {
                           this.currentArr.splice(index, 1)
                        }
                     })
                  }
@@ -314,7 +341,7 @@
               let str = "";
               str = this.format;
               for (let key in item) {
                  str = str.replace(new RegExp(`{${key}}`,"g"),item[key]);
                  str = str.replace(new RegExp(`{${key}}`, "g"), item[key]);
               }
               return str;
            } else {
@@ -328,26 +355,26 @@
            }
         },
         // 获取当前加载的数据
         getLoadData(){
         getLoadData() {
            return this.mixinDatacomResData;
         },
         // 获取当前缓存key
         getCurrentCacheKey(){
         getCurrentCacheKey() {
            return this.collection;
         },
         // 获取缓存
         getCache(name=this.getCurrentCacheKey()){
         getCache(name = this.getCurrentCacheKey()) {
            let cacheData = uni.getStorageSync(this.cacheKey) || {};
            return cacheData[name];
         },
         // 设置缓存
         setCache(value, name=this.getCurrentCacheKey()){
         setCache(value, name = this.getCurrentCacheKey()) {
            let cacheData = uni.getStorageSync(this.cacheKey) || {};
            cacheData[name] = value;
            uni.setStorageSync(this.cacheKey, cacheData);
         },
         // 删除缓存
         removeCache(name=this.getCurrentCacheKey()){
         removeCache(name = this.getCurrentCacheKey()) {
            let cacheData = uni.getStorageSync(this.cacheKey) || {};
            delete cacheData[name];
            uni.setStorageSync(this.cacheKey, cacheData);
@@ -446,9 +473,11 @@
      flex-direction: row;
      align-items: center;
   }

   ::v-deep uni-input {
      font-size: 14px;
   }

   .uni-select__input {
      flex: 1;
      font-size: 14px;
@@ -490,11 +519,13 @@
         max-height: 600px;
      }
   }

   /* #endif */

   .active{
      color:#2979ff;
   .active {
      color: #2979ff;
   }

   .uni-select__selector-empty,
   .uni-select__selector-item {
      /* #ifndef APP-NVUE */
@@ -554,7 +585,7 @@
   }

   .uni-select__input-text {
       // width: 280px;
      // width: 280px;
      width: 100%;
      color: $uni-main-color;
      white-space: nowrap;
@@ -576,4 +607,4 @@
      left: 0;
      z-index: 2;
   }
</style>
</style>