12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485 |
- <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>
|