表单元素提示框组件form-tooltip（一）

在使用form表单元素时，比如input元素可能会有这样的需求，当在input输入框输入无效的文本时，你可能需要在input上方或者下方出现一个悬浮提示框来提示用户，或者当input输入框为空且失去焦点时，你需要有一个提示框来提醒用户。面对这样的需求你可能一时找不到合适的组件来达到目的，只能自己去实现，比较麻烦。本文介绍一个组件: form-tooltip，就是解决这个问题，用户可以根据自己的需求自己设置不同样式的悬浮提示框。效果图如下：

git代码库：https://github.com/yog-zhang/form-tooltip.git

1.安装引入

（1）下载node包

npm install form-tooltip --save

在需要使用的代码中导入该插件

import FormTooltip from './form-tooltip.js'

（2）或从github上下载代码全局引入

<script src='./form-tooltip.js'></script>

2. 使用

（1）创建提示框组件对象

let formTooltip = new FormTooltip(id, options, cssTextObj)

参数说明：

id: 必选项，绑定的input输入框的id选择器名称，如下面的'input'

options: 必选项，是一个对象，用于配置提示框的一些选项，每一个选项除了value都非必选，都有一个默认值。value字段是必填项。详情如下：

    {

        value: '输入文本无效',       //提示框文本，必填项

        mode: 1,                    //模式，支持两种模式，可选值为0、1,0代表提示框有边框而没有背景色，1代表提示框有背景色而没有边框

        trianglePosition: '10%',    //设置提示小三角在提示框上的水平位置，位置时从右往左开始

        triangleHeight: '8px',      //设置提示小三角垂直高度

        triangleSize: '1px',        //设置提示小三角边框宽度

        direction: 'bottom',        //设置提示框在表单元素的上下位置，可选值'top'、'bottom','top'表示提示框在表单元素上方

        borderColor: 'blue'         //设置提示框边框颜色（包括文本框和小三角边框），只对mode=0有效 

    }

cssTextObj: 是一个json对象，设置提示框的类样式，反映在HTML中就是下面的类'form-tooltip-0'，

其中类名后面的'0'表示该提示框实例化的序号，即是第几个实例化的提示框。该参数为非必选项，不传此参数会有默认值替代

例子如下：

let formTooltip = new FormTooltip('input', 
    {
        value: '输入文本无效！', 
        mode: 1, 
        trianglePosition: '10%',
        triangleHeight: '8px',
        triangleSize: '1px',
        direction: 'bottom',
        // 只对mode=0时有效
        borderColor: '#888'
    }, 
    {
        'width': '100px',
        'height': '30px',
        'line-height': '30px',
        'text-align': 'center',
        'border': '1px solid black',
        'background-color': '#888',
        'font-size': '12px',
        'position': 'absolute',
        'left': '20px',
        'top': '31px',
        'border-radius': '4px 4px'
        
    })

渲染HTML如下：

        <input type="text" id="input"> //表单元素要自己写，不是组件渲染出来的
        <div class="form-tooltip-common form-tooltip-0">
            <span class="form-tooltip-text">输入文本无效！</span>
            <div class="form-tooltip-triangle-0">
                ::before
            </div>
        </div>

备注：可以看到提示框div元素有两个类选择器，第一个类选择器名字是固定的，所有的下拉框实例共同的类选择器都是'form-tooltip-common'，所以可以通过这个类选择器对所有的下拉框设置共同的样式。第二个类选择器是根据该下拉框是第几个被创建的实例，如'form-tooltip-0'则表示是第一个被创建的下拉框实例，所以后面是索引'0',前面部分的名字是固定的；

渲染效果如下：

（2）设置提示框文本值

formTooltip.setValue(text)

如：formTooltip.setValue('输入的文本无效')

（3）设置提示框显示隐藏

formTooltip.setShow(showFlag)

参数说明：

showFlag: Boolean类型的值，为true表示显示提示框，为false表示隐藏提示框。如：formTooltip.setShow(true)

（4）获取提示框显示隐藏标志

formTooltip.isShow()

返回值是一个Boolean值，为true表示提示框处于显示状态，为false表示提示框处于隐藏状态

（5）获取提示框的一些配置选项

formTooltip.getOptions()

返回值是一个对象，如下：

    {
        id: 绑定的form表单id选择器
        options: 创建提示框对象时，传入的options参数，即构造函数的第二个参数
        cssTextObj: 创建提示框对象时，传入的cssTextObj参数，即构造函数的第三个参数
        showFlag: 提示框的显示隐藏状态标志
        formNode: 绑定的表单元素节点
        tooltipNode: 实例化的提示框元素节点
    }

下一节 表单元素提示框组件form-tooltip（二）会贴出来使用demo，也可以在GitHub上直接查看demo