本组件二次封装element的el-input，可以在全局安装了Iview的项目或者局部引入了el-input的页面中自由使用。

目录

效果展示

从左到右分别是：属性名、数字段输入框

从上到下分别是：未输入状态和输入数字段状态，输入可清空

功能描述

  1. 属性名和初始数字段均可由父组件传参到子组件
  2. 二次封装组件nToN，详细校验逻辑见组件nToN

结构代码

<template>
  <div class="a-ntn">
    <Row>
      <Col flex="110px">
        <span class="c-fix-title wt">{
  { attr_name }}</span>
      </Col>
      <Col flex="auto">
        <nToN @func="setData" :initNum="init_num"></nToN>
      </Col>
    </Row>
    <Divider />
  </div>
</template>
  • init_num：给组件nToN传初始值

逻辑代码

components: {
   
    nToN
  },
  data () {
   
    return {
   
      init_num: deepCopy(this.initNum)
    }
  },
  props: {
   
    attr_name: {
   
      type: String,
      default () {
   
        return '属性名'
      }
    },
    attrList: {
   
      type: Array,
      default () {
   
        return []
      }
    },
    initNum: {
   
      type: Object,
      default () {
   
        return {
   
          minNum: '',
          maxNum: ''
        }
      }
    }
  },
  computed: {
   },
  methods: {
   
    setData (data) {
   
      var content = ntnData_handle(data).content
      var range = ntnData_handle(data).range
      this.$emit('getData', content, this.attr_name, range)
    }
  },
  watch: {
   },
  created () {
   
    setTimeout(() => {
   
      this.init_num = deepCopy(this.initNum)
    }, 800)
  }
  • setData ：拿到从nToN组件传的值

组件应用

<aNtn attr_name="年龄段" :initNum="init_ch_bean" @getData="ntn_get" />

import aNtn from '@/components/attr-check/a-ntn'

components: {
   
    aNtn
}

data () {
   
    return {
   
        init_ch_bean: {
   
          minNum: '',
          maxNum: ''
        }
    }
}
  • import引入——>组件注册——>使用
  • 父——>子传参：attr_name属性名、init_ch_bean初始显示数字段

事件钩子

// 拿到输入的数字段
ntn_get (data, attr_name, range) {
   
      var content
      var obj = {
   
        min: '不限',
        max: '不限'
      }
      if (data === '' || data === '不限') {
   
        content = '不限'
      } else {
   
        content = data
        obj = range
      }
      this.previewAttr.some((item) => {
   
        if (item.attr_name === attr_name + ':') {
   
          item.attr_content = content
        }
      })
      switch (attr_name) {
   
        case '年龄段':
          this.groupObj.pfinfo_attr.ch_bean = obj
          break
      }
    }
  • ntn_get ：拿到输入的数字段

github

完整代码：点击这里