crm-mobile/components/wk-form/wk-field-label.vue

<template>
  <view class="wk-field wk-field-label">
    <view v-if="_label" class="wk-field__label">
      <view v-if="field.isNull === 1" class="line" />
      {{ _label }}
    </view>
    <view class="wk-field__body">
      <view class="wk-field__body-core">
        <view
          v-for="(item, index) in field.setting"
          :key="index"
          :class="{active: formValue === item}"
          class="label-item"
          @click="handleChange(item)">
          {{ item }}
        </view>
      </view>
			
      <text class="wk wk-arrow-right icon-right" />
    </view>
  </view>
</template>

<script>
  import mixins from './mixins'

  export default {
    name: 'WkFieldLabel',
    mixins: [mixins],
    data() {
      return {
      }
    },
    methods: {
      handleChange(item) {
        if (this.field.disabled) {
          if (this.config && this.config.disabledMsg) {
            this.$toast(this.config.disabledMsg)
          }
          return
        }
        this.formValue = item
        this.$emit('input', this.formValue)
        this.$emit('change', {
          index: this.index,
          field: this.field,
          value: this.formValue
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "./wkField.scss";

  .wk-field-label {
    align-items: flex-start;

    .wk-field__body {
			.wk-field__body-core {
				flex-wrap: wrap;
				@include left;
				
				.label-item {
					color: $gray;
					font-size: 22rpx;
					border: 1rpx solid #ccc;
					border-radius: 6rpx;
					padding: 5rpx 20rpx;
					margin-right: 15rpx;
					&:last-child {
						margin-right: 0;
					}
					&.active {
						color: $theme-color;
						background-color: #E0EAFB;
						border-color: $theme-color;
					}
				}
			}
      
    }
  }
</style>