diantou/src_custom/_form-designer/component-library/xm-reverse-render.vue

<template>
  <div :class="$style.xmselinput">
    <a-input v-model="defaultValue" v-bind="$attrs" @blur="setinputvalue" />
    <a-button @click="reverseVal">反向</a-button>
  </div>
</template>

<script>
import components from './_import-components/xm-reverse-render-import'

export default {
  name: 'XmReverseRender',
  components,
  props: {
    reverseField: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      defaultValue: this.$attrs?.value || '',
    }
  },
  inject: {
    SdFormContext: { default: () => {} },
  },
  methods: {
    reverseVal() {
      const rval = this.SdFormContext.getFieldValue(this.reverseField)
      this.SdFormContext.setFieldValue(this.reverseField, this.defaultValue)
      this.defaultValue = rval
      this.$emit('input', rval)
    },
    setinputvalue(val) {
      if (this.defaultValue) {
        this.$emit('input', this.defaultValue)
      }
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.xmselinput {
  :global .ant-input {
    width: 70%;
    margin-right: 10px;
  }
  :global .ant-btn {
    width: auto;
    padding: 0 10px;
  }
}
</style>