【LayUI】使用隨筆
阿新 • • 發佈：2021-08-03
1. layui彈出層關閉後還顯示層內容
問題描述：
div設定為不可見後，點選按鈕以彈出層的形式彈出div元素，接著關閉div後div元素會顯示出來。如圖：
解決方案：
<script type="text/javascript"> end: function(layero, index){ layer.close(index); $("#divOrderFh input").val(""); $('#divOrderFh').css({ 'display': 'none' });return false; }, </script>
原文連結：https://blog.csdn.net/hifhf/article/details/107311537
2. layui 限制文字框只能輸入數字
問題描述：
使用div進行開發，需要對數字型的文字框進行驗證的同時只能輸入數字，不可輸入其他的內容
解決方案：
<!DOCTYPE html> <html> <head> <title></title> <link href="/new_website/scripts/layui/css/layui.css"rel="stylesheet" /> <script src="../../new_website/scripts/jquery1.8.3/jquery-1.8.3.js"></script> <script src="/new_website/scripts/layui/layui.all.js"></script> <script src="/new_website/scripts/vue/vue.js"></script> <script src="../../new_website/scripts/common/clipboard.min.js"></script> </head> <body> <%-- 方法1：文字框中在lay-verify的屬性中，設定為number，最後，點選提交的時候會判斷只能輸入數字 --%> <input type="text" name="nPlanAmount" lay-verify="number" autocomplete="off" class="layui-input" /> <%-- 方法2：在輸入後判斷是否為數字，如果不是，則預設為0.000 --%> <input type="text" lay-verify="number" name="nTopAmount" value="0.000" onblur="value=zhzs(this.value)" class="layui-input"/> <script type="text/javascript"> /*自定義處理數字*/ function zhzs(value) { value = value.replace(/[^\d]/g, '').replace(/^0{1,}/g, ''); if (value != ''){ value = parseFloat(value).toFixed(3); } else{ value = parseFloat(0).toFixed(3); } return value; } </script> </body> </html>
原文連結：https://www.cnblogs.com/ZengJiaLin/p/13501498.html
3. 拼接vue的onclick事件
問題描述：
JS拼接頁面元素時，vue的onclick事件報錯
解決方案：
<script type="text/javascript"> var divAlertInfoVue = new Vue({ el: '#divAlertInfo', data: { logisticsNumber: '', isMessage: true, trajectoryInfoList: [], //物流軌跡資訊 errorMsg: '', packageNumber: '1', //包裹id }, methods: { //新增包裹控制元件 CopyPackageControl: function () { var that = this; var str = '<div class="divItem">' + '<label class="layui-form-label">包裹' + (++that.packageNumber) + '：</label>' + '<div class="layui-input-block">' + '<input type="text" name="txtExpressName" placeholder="請輸入物流名稱" class="layui-input">' + ' <span style="float: right; margin-top: -50px; cursor: pointer" onclick="divAlertInfoVue.doRemoveDiv(this)"><i class="layui-icon layui-icon-close-fill" style="color: #999; font-size: 24px"></i></span>' + '<input type="text" name="txtExpressNumber" placeholder="請輸入物流單號" class="layui-input">' + '</div>' + '</div>'; //事件繫結通過onclick進行繫結，而事件內容則通過定義的vue的變數divAlertInfoVue.doRemoveDiv()方法來進行指定 $('#divContent').append(str); }, } </script>
4. JS判斷是否為中文
<script type="text/javascript"> var reg1 = /^[\u4e00-\u9fa5]/; //是否包含中文；包含中文=true reg1.test('中文1'); //返回true var reg2=/^[\u4E00-\u9FA5]+$/; //是否全部是中文；全部為中文=true reg2.test('中文1'); //返回false </script>
原文連結：https://www.cnblogs.com/gaogaoxingxing/p/6547301.html
5. 超連結使用#時，在部分瀏覽器下會跳轉到頁面頂部
解決方案：
<a href="javascript:void(0);" >超連結</a>