public.js说明
文件说明：公共方法集合
示例代码：
import {serverRef} from '@/common/js/public.js' serverRef({ url: '', data: {key}, validate: function(){ }, success: (data){ } })
一、方法：serverRef(config)
@平台：由于H5跨域问题，在H5端时请求URL必需在本域下。
@说明：响应式从服务器获取数据。（指定变量值发生变化时，自动请求服务器）
@name serverRef(config)
@说明： 响应式从服务器获取数据。（一旦某一筛选值发生变化时，自动请求服务器获取最新数据）
@params:
config = {
url: '', // [String 必需] 请求服务器网址
method: 'GET', //[String 可选] 请求模式，默认值GET。
data: {key}, // [JSON 必需] 绑定的响应式变量。一旦该变量值发生变化，就会请求服务器获取最新数据
validate: function(){}, // [Fun 可选] 验证请求条件，如果返回false则不请求服务器。比如我们在请求前先检测某一变量是否有值，空值就不提交
delay: 200, [Number 可选] 延迟执行。如果数据变化很快，会不停请求服务器，给服务器带来压力。这里做一个请求延迟。默认是200豪秒
success: function(data) {}, [Fun可选] 执行成功返回
fail: function(msg){}, [Fun 可选] 执行失败返回
complete: function(){}, [Fun 可选] 执行完成返回
}
@return: [无]
代码演示一（组合式内调用：setup内）：
template:
<template> <uni-data-picker :localdata="items" placeholder="请选择班级" v-model="key"></uni-data-picker> <view> 服务器返回数据：{{serverData}} </view> </template>
script:
<script setup> import { ref } from 'vue' import { serverRef } from '@/common/js/public.js' const items = [{ text: "一年级", value: "1-0", children: [{ text: "1.1班", value: "1-1" }, { text: "1.2班", value: "1-2" } ] }, { text: "二年级", value: "2-0" }, { text: "三年级", value: "3-0" } ] var serverData = ref('') var key = ref('') serverRef({ url: 'http://sys.wangshen.net/1.asp', method: 'GET', data: { key }, validate: function() { return (key.value) ? true : false }, success: (data) => { serverData.value = data }, fail(msg) { console.log(msg); } }) </script>
代码演示二（选项式内调用：非setup内）：
template:
<template> <uni-data-picker :localdata="items" placeholder="请选择班级" v-model="sendData.key"></uni-data-picker> <view> 服务器返回数据：{{serverData}} </view> </template>
script:
<script> import { serverRef } from '@/common/js/public.js' export default { data() { return { serverData: '', sendData: { key: '' }, items: [{ text: "一年级", value: "1-0", children: [{ text: "1.1班", value: "1-1" }, { text: "1.2班", value: "1-2" } ] }, { text: "二年级", value: "2-0" }, { text: "三年级", value: "3-0" } ] }; }, created() { var $this = this; serverRef({ url: 'http://sys.wangshen.net/1.asp', method: 'GET', data: $this.sendData, // 注意这里，要保持他是响应式的变量，而不能使用 data: {key: $this.sendData.key} validate: function() { return ($this.sendData.key) ? true : false }, success: (data) => { $this.serverData = data }, fail(msg) { console.log(msg); } }) } } </script>
演示说明：
上例中，我们将筛选数据key(key必需是ref或reactive动态响应的变量)绑定在serverData内，只要用户选择了班级，改变了key值，就会从服务器拉取最新数据。
这样的好处是：节省开发代码。
二、方法：disablePageScroll()、enablePageScroll()
@平台： H5端（目前不支持APP，待后续完善）
@说明：在一些场景中，比较弹出一个层，然而我们在弹层上操作时，会滚动整个页面。此时需要将页面滚动禁用。
disablePageScroll() 与 enablePageScroll() 是配合使用的。
template:
<template> <button @click="status=!status">switch---{{status}}</button> <view style="height:2000px;">123</view> </template>
script:
<script> import { disablePageScroll, enablePageScroll } from '@/common/js/public.js' export default { data() { return { status: false }; }, methods: { }, watch: { 'status': function(newV, oldV){ newV ? disablePageScroll() : enablePageScroll() } }, created() { } } </script>
三、方法：openUrl(url, target)
@说明：打开网址，或拨打电话
@平台：APP 、H5
@params:
url : [String 必需] 网址路径，或固定电话、移动电话
target: [String 可选] 默认值_blank 。仅在H5端打开网址有效。
template:
<template> <view @click="open('0556-5371498')"> 拨打电话：0556-5371498 </view> </template>
script:
<script> import { openUrl } from '@/common/js/public.js' export default { data() { return { }; }, methods: { open: function(param){ openUrl(param, '_self') } }, watch: { }, created() { } } </script>
四、方法：sleep(sec, refresh)
@说明：使程序代码休眠一段时间，在执行后面的代码
@params:
sec: [Number 必需] 休眠时间，单位秒
refresh: [Number 可选] 刷新时间，默认值是1000，表示1秒。如果休眠时间过少时，此值也要相应设置小点。比如，休眠0.5秒时，此值可以设置为 100
@注意：
在调用函数中，必需采用async 方式调用。执行中加上等待语法： await，代码如下：
template:
<template> <button @click="toShow()">点击5秒后显示下方内容</button> <view v-show="status"> 拨打电话：0556-5371498 </view> </template>
script:
<script> import { sleep } from '@/common/js/public.js' export default { data() { return { status: false }; }, methods: { toShow: async function(){ // 挂起5秒 console.log('开始挂起'); await sleep(5) console.log('挂起结束'); this.status = true } } } </script>
