项目初始化

gaoluyang

4 天以前 92230c9a97dc9ce9df3313d11d26999c04bb6b26

 src/uni_modules/uni-data-checkbox/components/uni-data-checkbox/uni-data-checkbox.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,821 @@
<template>
   <view class="uni-data-checklist" :style="{'margin-top':isTop+'px'}">
      <template v-if="!isLocal">
         <view class="uni-data-loading">
            <uni-load-more v-if="!mixinDatacomErrorMessage" status="loading" iconType="snow" :iconSize="18" :content-text="contentText"></uni-load-more>
            <text v-else>{{mixinDatacomErrorMessage}}</text>
         </view>
      </template>
      <template v-else>
         <checkbox-group v-if="multiple" class="checklist-group" :class="{'is-list':mode==='list' || wrap}" @change="chagne">
            <label class="checklist-box" :class="['is--'+mode,item.selected?'is-checked':'',(disabled || !!item.disabled)?'is-disable':'',index!==0&&mode==='list'?'is-list-border':'']"
             :style="item.styleBackgroud" v-for="(item,index) in dataList" :key="index">
               <checkbox class="hidden" hidden :disabled="disabled || !!item.disabled" :value="item[map.value]+''" :checked="item.selected" />
               <view v-if="(mode !=='tag' && mode !== 'list') || ( mode === 'list' && icon === 'left')" class="checkbox__inner"  :style="item.styleIcon">
                  <view class="checkbox__inner-icon"></view>
               </view>
               <view class="checklist-content" :class="{'list-content':mode === 'list' && icon ==='left'}">
                  <text class="checklist-text" :style="item.styleIconText">{{item[map.text]}}</text>
                  <view v-if="mode === 'list' && icon === 'right'" class="checkobx__list" :style="item.styleBackgroud"></view>
               </view>
            </label>
         </checkbox-group>
         <radio-group v-else class="checklist-group" :class="{'is-list':mode==='list','is-wrap':wrap}" @change="chagne">
            <!-- -->
            <label class="checklist-box" :class="['is--'+mode,item.selected?'is-checked':'',(disabled || !!item.disabled)?'is-disable':'',index!==0&&mode==='list'?'is-list-border':'']"
             :style="item.styleBackgroud" v-for="(item,index) in dataList" :key="index">
               <radio class="hidden" hidden :disabled="disabled || item.disabled" :value="item[map.value]+''" :checked="item.selected" />
               <view v-if="(mode !=='tag' && mode !== 'list') || ( mode === 'list' && icon === 'left')" class="radio__inner"
                :style="item.styleBackgroud">
                  <view class="radio__inner-icon" :style="item.styleIcon"></view>
               </view>
               <view class="checklist-content" :class="{'list-content':mode === 'list' && icon ==='left'}">
                  <text class="checklist-text" :style="item.styleIconText">{{item[map.text]}}</text>
                  <view v-if="mode === 'list' && icon === 'right'" :style="item.styleRightIcon" class="checkobx__list"></view>
               </view>
            </label>
         </radio-group>
      </template>
   </view>
</template>

<script>
   /**
    * DataChecklist æ•°æ®é€‰æ‹©å™¨
    * @description é€šè¿‡æ•°æ®æ¸²æŸ“ checkbox å’Œ radio
    * @tutorial https://ext.dcloud.net.cn/plugin?id=xxx
    * @property {String} mode = [default| list | button | tag] æ˜¾ç¤ºæ¨¡å¼
    * @value default     é»˜è®¤æ¨ªæŽ’模式
    * @value list      åˆ—表模式
    * @value button   æŒ‰é’®æ¨¡å¼
    * @value tag       æ ‡ç­¾æ¨¡å¼
    * @property {Boolean} multiple = [true|false] æ˜¯å¦å¤šé€‰
    * @property {Array|String|Number} value é»˜è®¤å€¼
    * @property {Array} localdata æœ¬åœ°æ•°æ® ï¼Œæ ¼å¼ [{text:'',value:''}]
    * @property {Number|String} min æœ€å°é€‰æ‹©ä¸ªæ•° ï¼Œmultiple为true时生效
    * @property {Number|String} max æœ€å¤§é€‰æ‹©ä¸ªæ•° ï¼Œmultiple为true时生效
    * @property {Boolean} wrap æ˜¯å¦æ¢è¡Œæ˜¾ç¤º
    * @property {String} icon = [left|right]  list åˆ—表模式下icon显示位置
    * @property {Boolean} selectedColor é€‰ä¸­é¢œè‰²
    * @property {Boolean} emptyText æ²¡æœ‰æ•°æ®æ—¶æ˜¾ç¤ºçš„文字 ï¼Œæœ¬åœ°æ•°æ®æ— æ•ˆ
    * @property {Boolean} selectedTextColor é€‰ä¸­æ–‡æœ¬é¢œè‰²ï¼Œå¦‚不填写则自动显示
    * @property {Object} map å­—段映射， é»˜è®¤ map={text:'text',value:'value'}
    * @value left å·¦ä¾§æ˜¾ç¤º
    * @value right å³ä¾§æ˜¾ç¤º
    * @event {Function} change  é€‰ä¸­å‘生变化触发
    */

   export default {
      name: 'uniDataChecklist',
      mixins: [uniCloud.mixinDatacom || {}],
      emits:['input','update:modelValue','change'],
      props: {
         mode: {
            type: String,
            default: 'default'
         },

         multiple: {
            type: Boolean,
            default: false
         },
         value: {
            type: [Array, String, Number],
            default () {
               return ''
            }
         },
         // TODO vue3
         modelValue: {
            type: [Array, String, Number],
            default() {
               return '';
            }
         },
         localdata: {
            type: Array,
            default () {
               return []
            }
         },
         min: {
            type: [Number, String],
            default: ''
         },
         max: {
            type: [Number, String],
            default: ''
         },
         wrap: {
            type: Boolean,
            default: false
         },
         icon: {
            type: String,
            default: 'left'
         },
         selectedColor: {
            type: String,
            default: ''
         },
         selectedTextColor: {
            type: String,
            default: ''
         },
         emptyText:{
            type: String,
            default: '暂无数据'
         },
         disabled:{
            type: Boolean,
            default: false
         },
         map:{
            type: Object,
            default(){
               return {
                  text:'text',
                  value:'value'
               }
            }
         }
      },
      watch: {
         localdata: {
            handler(newVal) {
               this.range = newVal
               this.dataList = this.getDataList(this.getSelectedValue(newVal))
            },
            deep: true
         },
         mixinDatacomResData(newVal) {
            this.range = newVal
            this.dataList = this.getDataList(this.getSelectedValue(newVal))
         },
         value(newVal) {
            this.dataList = this.getDataList(newVal)
            // fix by mehaotian is_reset åœ¨ uni-forms ä¸­å®šä¹‰
            // if(!this.is_reset){
            //    this.is_reset = false
            //    this.formItem && this.formItem.setValue(newVal)
            // }
         },
         modelValue(newVal) {
            this.dataList = this.getDataList(newVal);
            // if(!this.is_reset){
            //    this.is_reset = false
            //    this.formItem && this.formItem.setValue(newVal)
            // }
         }
      },
      data() {
         return {
            dataList: [],
            range: [],
            contentText: {
               contentdown: '查看更多',
               contentrefresh: '加载中',
               contentnomore: '没有更多'
            },
            isLocal:true,
            styles: {
               selectedColor: '#2979ff',
               selectedTextColor: '#666',
            },
            isTop:0
         };
      },
      computed:{
         dataValue(){
            if(this.value === '')return this.modelValue
            if(this.modelValue === '') return this.value
            return this.value
         }
      },
      created() {
         // this.form = this.getForm('uniForms')
         // this.formItem = this.getForm('uniFormsItem')
         // this.formItem && this.formItem.setValue(this.value)

         // if (this.formItem) {
         //    this.isTop = 6
         //    if (this.formItem.name) {
         //       // å¦‚果存在name添加默认值,否则formData ä¸­ä¸å­˜åœ¨è¿™ä¸ªå­—段不校验
         //       if(!this.is_reset){
         //          this.is_reset = false
         //          this.formItem.setValue(this.dataValue)
         //       }
         //       this.rename = this.formItem.name
         //       this.form.inputChildrens.push(this)
         //    }
         // }

         if (this.localdata && this.localdata.length !== 0) {
            this.isLocal = true
            this.range = this.localdata
            this.dataList = this.getDataList(this.getSelectedValue(this.range))
         } else {
            if (this.collection) {
               this.isLocal = false
               this.loadData()
            }
         }
      },
      methods: {
         loadData() {
            this.mixinDatacomGet().then(res=>{
               this.mixinDatacomResData = res.result.data
               if(this.mixinDatacomResData.length === 0){
                  this.isLocal = false
                  this.mixinDatacomErrorMessage = this.emptyText
               }else{
                  this.isLocal = true
               }
            }).catch(err=>{
               this.mixinDatacomErrorMessage = err.message
            })
         },
         /**
          * èŽ·å–父元素实例
          */
         getForm(name = 'uniForms') {
            let parent = this.$parent;
            let parentName = parent.$options.name;
            while (parentName !== name) {
               parent = parent.$parent;
               if (!parent) return false
               parentName = parent.$options.name;
            }
            return parent;
         },
         chagne(e) {
            const values = e.detail.value

            let detail = {
               value: [],
               data: []
            }

            if (this.multiple) {
               this.range.forEach(item => {

                  if (values.includes(item[this.map.value] + '')) {
                     detail.value.push(item[this.map.value])
                     detail.data.push(item)
                  }
               })
            } else {
               const range = this.range.find(item => (item[this.map.value] + '') === values)
               if (range) {
                  detail = {
                     value: range[this.map.value],
                     data: range
                  }
               }
            }
            // this.formItem && this.formItem.setValue(detail.value)
            // TODO å…¼å®¹ vue2
            this.$emit('input', detail.value);
            // // TOTO å…¼å®¹ vue3
            this.$emit('update:modelValue', detail.value);
            this.$emit('change', {
               detail
            })
            if (this.multiple) {
               // å¦‚æžœ v-model æ²¡æœ‰ç»‘定 ï¼Œåˆ™èµ°å†…部逻辑
               // if (this.value.length === 0) {
               this.dataList = this.getDataList(detail.value, true)
               // }
            } else {
               this.dataList = this.getDataList(detail.value)
            }
         },

         /**
          * èŽ·å–渲染的新数组
          * @param {Object} value é€‰ä¸­å†…容
          */
         getDataList(value) {
            // è§£é™¤å¼•ç”¨å…³ç³»ï¼Œç ´ååŽŸå¼•ç”¨å…³ç³»ï¼Œé¿å…æ±¡æŸ“源数据
            let dataList = JSON.parse(JSON.stringify(this.range))
            let list = []
            if (this.multiple) {
               if (!Array.isArray(value)) {
                  value = []
               }
            }
            dataList.forEach((item, index) => {
               item.disabled = item.disable || item.disabled || false
               if (this.multiple) {
                  if (value.length > 0) {
                     let have = value.find(val => val === item[this.map.value])
                     item.selected = have !== undefined
                  } else {
                     item.selected = false
                  }
               } else {
                  item.selected = value === item[this.map.value]
               }

               list.push(item)
            })
            return this.setRange(list)
         },
         /**
          * å¤„理最大最小值
          * @param {Object} list
          */
         setRange(list) {
            let selectList = list.filter(item => item.selected)
            let min = Number(this.min) || 0
            let max = Number(this.max) || ''
            list.forEach((item, index) => {
               if (this.multiple) {
                  if (selectList.length <= min) {
                     let have = selectList.find(val => val[this.map.value] === item[this.map.value])
                     if (have !== undefined) {
                        item.disabled = true
                     }
                  }

                  if (selectList.length >= max && max !== '') {
                     let have = selectList.find(val => val[this.map.value] === item[this.map.value])
                     if (have === undefined) {
                        item.disabled = true
                     }
                  }
               }
               this.setStyles(item, index)
               list[index] = item
            })
            return list
         },
         /**
          * è®¾ç½® class
          * @param {Object} item
          * @param {Object} index
          */
         setStyles(item, index) {
            //  è®¾ç½®è‡ªå®šä¹‰æ ·å¼
            item.styleBackgroud = this.setStyleBackgroud(item)
            item.styleIcon = this.setStyleIcon(item)
            item.styleIconText = this.setStyleIconText(item)
            item.styleRightIcon = this.setStyleRightIcon(item)
         },

         /**
          * èŽ·å–选中值
          * @param {Object} range
          */
         getSelectedValue(range) {
            if (!this.multiple) return this.dataValue
            let selectedArr = []
            range.forEach((item) => {
               if (item.selected) {
                  selectedArr.push(item[this.map.value])
               }
            })
            return this.dataValue.length > 0 ? this.dataValue : selectedArr
         },

         /**
          * è®¾ç½®èƒŒæ™¯æ ·å¼
          */
         setStyleBackgroud(item) {
            let styles = {}
            let selectedColor = this.selectedColor?this.selectedColor:'#2979ff'
            if (this.selectedColor) {
               if (this.mode !== 'list') {
                  styles['border-color'] = item.selected?selectedColor:'#DCDFE6'
               }
               if (this.mode === 'tag') {
                  styles['background-color'] = item.selected? selectedColor:'#f5f5f5'
               }
            }
            let classles = ''
            for (let i in styles) {
               classles += `${i}:${styles[i]};`
            }
            return classles
         },
         setStyleIcon(item) {
            let styles = {}
            let classles = ''
            if (this.selectedColor) {
               let selectedColor = this.selectedColor?this.selectedColor:'#2979ff'
               styles['background-color'] = item.selected?selectedColor:'#fff'
               styles['border-color'] = item.selected?selectedColor:'#DCDFE6'
					
               if(!item.selected && item.disabled){
                  styles['background-color'] = '#F2F6FC'
                  styles['border-color'] = item.selected?selectedColor:'#DCDFE6'
               }
            }
            for (let i in styles) {
               classles += `${i}:${styles[i]};`
            }
            return classles
         },
         setStyleIconText(item) {
            let styles = {}
            let classles = ''
            if (this.selectedColor) {
               let selectedColor = this.selectedColor?this.selectedColor:'#2979ff'
               if (this.mode === 'tag') {
                  styles.color = item.selected?(this.selectedTextColor?this.selectedTextColor:'#fff'):'#666'
               } else {
                  styles.color = item.selected?(this.selectedTextColor?this.selectedTextColor:selectedColor):'#666'
               }
               if(!item.selected && item.disabled){
                  styles.color = '#999'
               }
            }
            for (let i in styles) {
               classles += `${i}:${styles[i]};`
            }
            return classles
         },
         setStyleRightIcon(item) {
            let styles = {}
            let classles = ''
            if (this.mode === 'list') {
               styles['border-color'] = item.selected?this.styles.selectedColor:'#DCDFE6'
            }
            for (let i in styles) {
               classles += `${i}:${styles[i]};`
            }

            return classles
         }
      }
   }
</script>

<style lang="scss">
   $uni-primary: #2979ff !default;
   $border-color: #DCDFE6;
   $disable:0.4;

   @mixin flex {
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
   }

   .uni-data-loading {
      @include flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      height: 36px;
      padding-left: 10px;
      color: #999;
   }

   .uni-data-checklist {
      position: relative;
      z-index: 0;
      flex: 1;
      // å¤šé€‰æ ·å¼
      .checklist-group {
         @include flex;
         flex-direction: row;
         flex-wrap: wrap;

         &.is-list {
            flex-direction: column;
         }

         .checklist-box {
            @include flex;
            flex-direction: row;
            align-items: center;
            position: relative;
            margin: 5px 0;
            margin-right: 25px;

            .hidden {
               position: absolute;
               opacity: 0;
            }

            // æ–‡å­—样式
            .checklist-content {
               @include flex;
               flex: 1;
               flex-direction: row;
               align-items: center;
               justify-content: space-between;
               .checklist-text {
                  font-size: 14px;
                  color: #666;
                  margin-left: 5px;
                  line-height: 14px;
               }

               .checkobx__list {
                  border-right-width: 1px;
                  border-right-color: #007aff;
                  border-right-style: solid;
                  border-bottom-width:1px;
                  border-bottom-color: #007aff;
                  border-bottom-style: solid;
                  height: 12px;
                  width: 6px;
                  left: -5px;
                  transform-origin: center;
                  transform: rotate(45deg);
                  opacity: 0;
               }
            }

            // å¤šé€‰æ ·å¼
            .checkbox__inner {
               /* #ifndef APP-NVUE */
               flex-shrink: 0;
               box-sizing: border-box;
               /* #endif */
               position: relative;
               width: 16px;
               height: 16px;
               border: 1px solid $border-color;
               border-radius: 4px;
               background-color: #fff;
               z-index: 1;
               .checkbox__inner-icon {
                  position: absolute;
                  /* #ifdef APP-NVUE */
                  top: 2px;
                  /* #endif */
                  /* #ifndef APP-NVUE */
                  top: 1px;
                  /* #endif */
                  left: 5px;
                  height: 8px;
                  width: 4px;
                  border-right-width: 1px;
                  border-right-color: #fff;
                  border-right-style: solid;
                  border-bottom-width:1px ;
                  border-bottom-color: #fff;
                  border-bottom-style: solid;
                  opacity: 0;
                  transform-origin: center;
                  transform: rotate(40deg);
               }
            }

            // å•é€‰æ ·å¼
            .radio__inner {
               @include flex;
               /* #ifndef APP-NVUE */
               flex-shrink: 0;
               box-sizing: border-box;
               /* #endif */
               justify-content: center;
               align-items: center;
               position: relative;
               width: 16px;
               height: 16px;
               border: 1px solid $border-color;
               border-radius: 16px;
               background-color: #fff;
               z-index: 1;

               .radio__inner-icon {
                  width: 8px;
                  height: 8px;
                  border-radius: 10px;
                  opacity: 0;
               }
            }

            // é»˜è®¤æ ·å¼
            &.is--default {

               // ç¦ç”¨
               &.is-disable {
                  /* #ifdef H5 */
                  cursor: not-allowed;
                  /* #endif */
                  .checkbox__inner {
                     background-color: #F2F6FC;
                     border-color: $border-color;
                     /* #ifdef H5 */
                     cursor: not-allowed;
                     /* #endif */
                  }

                  .radio__inner {
                     background-color: #F2F6FC;
                     border-color: $border-color;
                  }
                  .checklist-text {
                     color: #999;
                  }
               }

               // é€‰ä¸­
               &.is-checked {
                  .checkbox__inner {
                     border-color: $uni-primary;
                     background-color: $uni-primary;

                     .checkbox__inner-icon {
                        opacity: 1;
                        transform: rotate(45deg);
                     }
                  }
                  .radio__inner {
                     border-color: $uni-primary;
                     .radio__inner-icon {
                        opacity: 1;
                        background-color: $uni-primary;
                     }
                  }
                  .checklist-text {
                     color: $uni-primary;
                  }
                  // é€‰ä¸­ç¦ç”¨
                  &.is-disable {
                     .checkbox__inner {
                        opacity: $disable;
                     }

                     .checklist-text {
                        opacity: $disable;
                     }
                     .radio__inner {
                        opacity: $disable;
                     }
                  }
               }
            }

            // æŒ‰é’®æ ·å¼
            &.is--button {
               margin-right: 10px;
               padding: 5px 10px;
               border: 1px $border-color solid;
               border-radius: 3px;
               transition: border-color 0.2s;

               // ç¦ç”¨
               &.is-disable {
                  /* #ifdef H5 */
                  cursor: not-allowed;
                  /* #endif */
                  border: 1px #eee solid;
                  opacity: $disable;
                  .checkbox__inner {
                     background-color: #F2F6FC;
                     border-color: $border-color;
                     /* #ifdef H5 */
                     cursor: not-allowed;
                     /* #endif */
                  }
                  .radio__inner {
                     background-color: #F2F6FC;
                     border-color: $border-color;
                     /* #ifdef H5 */
                     cursor: not-allowed;
                     /* #endif */
                  }
                  .checklist-text {
                     color: #999;
                  }
               }

               &.is-checked {
                  border-color: $uni-primary;
                  .checkbox__inner {
                     border-color: $uni-primary;
                     background-color: $uni-primary;
                     .checkbox__inner-icon {
                        opacity: 1;
                        transform: rotate(45deg);
                     }
                  }

                  .radio__inner {
                     border-color: $uni-primary;

                     .radio__inner-icon {
                        opacity: 1;
                        background-color: $uni-primary;
                     }
                  }

                  .checklist-text {
                     color: $uni-primary;
                  }

                  // é€‰ä¸­ç¦ç”¨
                  &.is-disable {
                     opacity: $disable;
                  }
               }
            }

            // æ ‡ç­¾æ ·å¼
            &.is--tag {
               margin-right: 10px;
               padding: 5px 10px;
               border: 1px $border-color solid;
               border-radius: 3px;
               background-color: #f5f5f5;

               .checklist-text {
                  margin: 0;
                  color: #666;
               }

               // ç¦ç”¨
               &.is-disable {
                  /* #ifdef H5 */
                  cursor: not-allowed;
                  /* #endif */
                  opacity: $disable;
               }

               &.is-checked {
                  background-color: $uni-primary;
                  border-color: $uni-primary;

                  .checklist-text {
                     color: #fff;
                  }
               }
            }
            // åˆ—表样式
            &.is--list {
               /* #ifndef APP-NVUE */
               display: flex;
               /* #endif */
               padding: 10px 15px;
               padding-left: 0;
               margin: 0;

               &.is-list-border {
                  border-top: 1px #eee solid;
               }

               // ç¦ç”¨
               &.is-disable {
                  /* #ifdef H5 */
                  cursor: not-allowed;
                  /* #endif */
                  .checkbox__inner {
                     background-color: #F2F6FC;
                     border-color: $border-color;
                     /* #ifdef H5 */
                     cursor: not-allowed;
                     /* #endif */
                  }
                  .checklist-text {
                     color: #999;
                  }
               }

               &.is-checked {
                  .checkbox__inner {
                     border-color: $uni-primary;
                     background-color: $uni-primary;

                     .checkbox__inner-icon {
                        opacity: 1;
                        transform: rotate(45deg);
                     }
                  }
                  .radio__inner {
                     .radio__inner-icon {
                        opacity: 1;
                     }
                  }
                  .checklist-text {
                     color: $uni-primary;
                  }

                  .checklist-content {
                     .checkobx__list {
                        opacity: 1;
                        border-color: $uni-primary;
                     }
                  }

                  // é€‰ä¸­ç¦ç”¨
                  &.is-disable {
                     .checkbox__inner {
                        opacity: $disable;
                     }

                     .checklist-text {
                        opacity: $disable;
                     }
                  }
               }
            }
         }
      }
   }
</style>