数字段组件aNtn——属性选择系列组件库（design by yRan）

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

目录

• 效果展示
• 功能描述
• 结构代码
• 逻辑代码
• 组件应用
• 事件钩子
• github

效果展示

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

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

功能描述

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

完整代码：点击这里