vue3项目全局根据类型设置对应默认值

vue3 项目 所有的string类型 设置默认值为-- 所有number类型设置为0 全局最快改的话 怎么做

img

类似于这样


Vue.mixin({
  beforeCreate() {
    const options = this.$options;
    if (options.data) {
      Object.keys(options.data).forEach(key => {
        const value = options.data[key];
        if (typeof value === 'string') {
          options.data[key] = '--';
        } else if (typeof value === 'number') {
          options.data[key] = 0;
        }
      });
    }
  }
});

用全局的 mixin 对所有组件的属性进行默认值的设置。可以通过在 main.js 文件中设置 app.mixin() 来实现全局的 mixin。
比如:

// main.js
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.mixin({
  data() {
    return {
      defaultString: '--',
      defaultNumber: 0,
    }
  },
  created() {
    for (let key in this.$options.props) {
      if (this.$options.props[key].type === String) {
        this[key] = this[key] || this.defaultString
      } else if (this.$options.props[key].type === Number) {
        this[key] = this[key] || this.defaultNumber
      }
    }
  }
})

app.mount('#app')


先定义了全局 mixin,其中 data() 方法返回一个包含默认值的对象。然后,在 created() 生命周期中,遍历当前组件的所有属性,并根据属性类型设置默认值。这种方法可以在全局范围内快速设置默认值,但要注意,如果某个组件已经设置了默认值,此方法不会覆盖组件的默认值。