如何为元素制作动态道具 UI

Question

我正在开发一个 Element-UI datepicker 组件，我将其包装到我自己的需要中。我想给一个默认值添加一个或多个道具。

pickerOptions: {
  type: Object,
  default: () => ({
    addedProp: '',
    defaultProp: 'firstDayOfWeek: 1',    
  }),
},

如何使 addedProp 动态化。如何在组件内设置此道具。 defaultProp 默认情况下应始终处于活动状态。 addedProp 应该是可以切换的，只有在需要的时候。

Answer 1

我不确定我是否理解正确，但您可以将 pickerOptions 更改为计算数据，如下所示：https://jsfiddle.net/Lczj0ndp/1/

    data() {
      return { dynamicValue: '' };
    }
    computed: {
      pickerOptions1() {
        return { 
          someOption: this.dynamicValue,
          ...
        }
      }

然后您可以将一个或多个选项动态化。

您可以阅读有关计算数据的更多信息here。

Answer 2

已修复：

        computed: {
          combinedPickerOptions() {
              return {
                  firstDayOfWeek: 1,
                  ...this.pickerOptions,
              };
          },
       },

解决方案是展开运算符。现在我可以将 "firstDayOfWeek" 设置为默认值，并在需要时设置更多选项。

如何为元素制作动态道具 UI

How to make dynamic props for element UI

javascript

element

vue.js