naive-ui/demo/documentation/components/dynamicInput/zhCN/custom.md
2020-03-17 15:31:28 +08:00

1.1 KiB

自定义内容

<n-dynamic-input
  v-model="customValue"
  :on-create="onCreate"
  :on-clear="onClear"
>
  <template v-slot="{ value }">
    <div style="width: 100%;">
      <div style="display: flex; align-items: center;">
        <n-checkbox
          v-model="value.isCheck"
          style="margin-right: 12px;"
        />
        <n-input-number
          v-model="value.num"
          style="margin-right: 12px; width: 160px;"
        />
        <n-input
          v-model="value.string"
          type="input"
        />
      </div>
    </div>
  </template>
</n-dynamic-input>
<pre>
{{  JSON.stringify(customValue, 0, 2) }}
</pre>
export default {
  data () {
    return {
      customValue: [
        {
          isCheck: true,
          num: 1,
          string: '一个字符串'
        }
      ]
    }
  },
  methods: {
    onCreate () {
      return {
        isCheck: false,
        num: 1,
        string: '一个字符串'
      }
    },
    onClear () {
      return {
        isCheck: false,
        num: 0,
        string: ''
      }
    }
  }
}