动态计算 style calc

<template>
  <view class="contents" :style="{height:computedStyle.height}">
    <view>
      <u-form
        :model="form"
        ref="uForm"
        :label-style="{
          fontWeight: 'bold',
          color: '#333',
          fontFamily: 'PingFangSC_0',
          fontSize: '32rpx',
          lineHeight: '45rpx',
        }"
      >
        <view class="bankForm">
          <u-form-item
            label-width="150"
            :required="true"
            label="姓名"
            :border-bottom="false"
            class="formItem"
            prop="name"
            ><u-input
              v-model="form.name"
              input-align="right"
              placeholder="请输入姓名"
          /></u-form-item>
        </view>
        <view class="bankForm">
          <u-form-item
            label-width="150"
            :border-bottom="false"
            :required="true"
            prop="idCard"
            label="身份证号"
            ><u-input
              v-model="form.idCard"
              input-align="right"
              placeholder="请输入身份证号"
          /></u-form-item>
        </view>
      </u-form>
    </view>
    <view class="theme submit" @click="submit">提交</view>
  </view>
</template>
  
  <script>
export default {
  props: ["scTabsHeight"],
  data() {
    return {
      form: {
        name: "",
        idCard: "",
      },

      rules: {
        name: [
          {
            min: 2,
            max: 32,
            required: true,
            message: "请输入持卡人姓名",
            trigger: ["change", "blur"],
          },
        ],

        idCard: [
          {
            required: true,
            message: "请输入身份证号",
            trigger: ["change", "blur"],
          },
          {
            validator: (rule, value, callback) => {
              return this.$u.test.idCard(value);
            },
            message: "请输入正确的身份证号",
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },

  computed: {
    computedStyle() { 这里动态计算
      return {
        height: `calc(100vh - ${this.scTabsHeight}px)`,
      };
    }
  },

  methods: {
  
    submit() {
      this.$refs.uForm.validate((valid) => {
        if (valid) {
        }
      });
    },
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
};
</script>