vue 之 render函数 封装 input组件

vue 之 render函数 封装 input组件

父组件

    <div>val1-{{ val1 }} ; val2 -{{ val2 }} ; val3-{{ val3 }}</div>
    <Input v-model="val1" placeholder="请输入1" type="text" :style="`fontSize: 20px`" />
    <Input v-model="val2" placeholder="请输入2" type="number" />
    <Input v-model="val3" placeholder="请输入3" type="password" />

      val1: '',
      val2: 2,
      val3: '',

Input.vue

<script>
const selectInputType = [
  'input',
  'text',
  'number',
  'password',
  'email',
  'textarea'
]
export default {
  name: 'Input',
  props: {
    type: {
      default: 'text',
      type: String,
      validator: typeVal => {
        return selectInputType.includes(typeVal)
      }
    },
    value: {
      default: '',
      type: [String, Number]
    }
  },
  computed: {
    newValue: {
      get({ value }) {
        return value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  methods: {
    onInputHandle(val) {
      this.newValue = val
    }
  },
  render(createElement) {
    return createElement(
      // 标签
      'el-input',
      // 相关属性参数
      {
        // 样式相关
        style: {
        },
        // html 相关的属性 placeholder id 等
        attrs: {
          ...this.$attrs //  ( { placeholder:请输入 } )
        },
        // props相关的
        props: {
          type: this.type,
          value: this.newValue
        },
        // 事件相关
        on: {
          input: this.onInputHandle
        }
      }
    )
  }
}
</script>
<style lang="scss" scoped></style>

效果

事件

@change.native=“changeVal” @input.native=“inputMethod”