<template>
  <span>{{ value || "- -" }}</span>
</template>

<script>
export default {
  name: "ComputedInput",
  props: {
    // v-model
    value: {
      type: [Number, String],
      require: true,
    },
    // v-model
    computed: {
      type: Function,
      default: () => {
        return () => {};
      },
      require: true,
    },
    // 源数据
    source: {
      type: Object,
      require: true,
    },
    // 组件大小
    size: {
      type: String,
      dafault: () => {
        return "mini";
      },
    },
    // 提示
    placeholder: {
      type: String,
      dafault: () => {
        return "";
      },
    },
  },
  data() {
    return {};
  },
  computed: {
    newSource() {
      return this.$props.source;
    },
  },
  watch: {
    newSource: {
      handler: function (newProp) {
        const { computed } = this.$props;
        this.$emit("input", computed(newProp));
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {},
  created() {},
  mounted() {},
  destroyed() {},
};
</script>
<style scoped></style>
