上一節 input動態搜索下拉框組件input-dynamic-select使用(一) 整體介紹了form-tooltip的使用方法，這一節具體使用一個demo來說明組件的使用方法。
demo整體結構如下：
index.html:
<body>
<div class="formPanel">
<input type="text" id="input"/>
</div>
<div class="formPanel">
<input type="text" id="input1">
</div>
<div class="formPanel">
<textarea id="textarea1"></textarea>
</div>
<div class="formPanel">
<textarea id="textarea2"></textarea>
</div>
<button id="button1">第一個提示框顯示隱藏</button><br><br>
<button id="button2">第二個提示框顯示隱藏</button><br><br>
<button id="button3">第三個提示框顯示隱藏</button><br><br>
<button id="button4">第四個提示框顯示隱藏</button><br><br>
<button id="button5">修改第一個提示框文本</button>
</body>
index.js:
// 首先需要通過npm install form-tooltip --save下載該組件
import FormTooltip from 'form-tooltip'
let formTooltip = new FormTooltip('input',
{
value: '輸入文本無效！',
mode: 1,
trianglePosition: '10%',
triangleHeight: '8px',
triangleSize: '0.8px',
direction: 'bottom',
// 只對mode=0時有效
borderColor: 'blue'
},
{
'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'
})
let formTooltip1 = new FormTooltip('input1',
{
value: '輸入文本無效！',
mode: 1,
trianglePosition: '10%',
triangleHeight: '8px',
triangleSize: '0.8px',
direction: 'top',
// 只對mode=0時有效
borderColor: 'blue'
},
{
width: '100px',
height: '30px',
'line-height': '30px',
'text-align': 'center',
border: '1px solid black',
'background-color': '#ddd',
'font-size': '12px',
position: 'absolute',
left: '20px',
top: '-38px',
'border-radius': '4px 4px'
})
let formTooltip2 = new FormTooltip('textarea1',
{
value: '輸入不能爲空！',
mode: 0,
trianglePosition: '10%',
triangleHeight: '8px',
triangleSize: '1px',
direction: 'top',
// 只對mode=0時有效
borderColor: 'red'
},
// 第二個參數可以爲null
null
)
let formTooltip3 = new FormTooltip('textarea2',
{
value: '輸入格式不對！',
mode: 0,
trianglePosition: '10%',
triangleHeight: '8px',
triangleSize: '1px',
direction: 'bottom',
// 只對mode=0時有效
borderColor: 'blue'
},
// 第二個參數可以爲null
null
)
let num = 0
document.querySelector('#button1').addEventListener('click', (e) => {showToggle(formTooltip)})
document.querySelector('#button2').addEventListener('click', (e) => {showToggle(formTooltip1)})
document.querySelector('#button3').addEventListener('click', (e) => {showToggle(formTooltip2)})
document.querySelector('#button4').addEventListener('click', (e) => {showToggle(formTooltip3)})
//動態設置提示框文本
document.querySelector('#button5').addEventListener('click', (e) => {
formTooltip.setValue("請輸入正確文本" + num++)
})
//切換提示框的顯示隱藏
function showToggle(element){
if(element.isShow()){
element.setShow(false)
} else {
element.setShow(true)
}
}
首先需要在終端執行 npm install form-tooltip --save 命令下載該組件包，然後通過import指令導入該組件，之後就可以實例化該組件，並調用其方法。
渲染效果圖：
然後可以通過按鈕切換各個提示框的顯示和隱藏，下圖是點擊四個按鈕，把四個提示框都顯示出來：
最後一個按鈕可以動態修改第一個提示框文本：
