一些遇到的问题（随时更新）

这篇主要是平时写不经常遇到的 ，但是一用到就忘的，总结一下

1，对多个input进行实时监听

          <input
            v-model="form.fujiafuwufei"
            class="content"
            @change="onFocusInput($event, 1)"
            type="text"
            placeholder="请输入"
            placeholder-class="content"
          />
          
			onFocusInput(e, index) {
			  if(index==1){
			     this.form.fujiafuwufei = e.detail.value;
			  }
			}

2 ，获取某个时间到现在的总时分秒

（1）先获取当前时间

// 获取当前时间
    getTime() {
      this.nowtime = parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s} ');
    },

(2) 计算当前时间和某个时间的时分秒

 timedifference() {
      let nowtime = new Date(this.nowtime).getTime();
      let startTime = new Date(this.startTime).getTime();
      let chatime = nowtime - startTime;

      let h = Math.floor(chatime / (1000 * 60 * 60));
      let i = Math.floor((chatime % (1000 * 60 * 60)) / 60000);
      let s = Math.round((chatime % (1000 * 60)) / 1000);
      h = h > 9 ? h : '0' + h;
      i = i > 9 ? i : '0' + i;
      s = s > 9 ? s : '0' + s;
      this.zongtime = h + ':' + i + ':' + s;
    },

(3) 在小程序onLoad(){}或者在后台mounted(){}中调用

data(){
 return{
     startTime: '',
     nowtime: '', //当前时间
     zongtime: '',
 }
},
onLoad(option) {
    setInterval(() => {
      this.getTime();
      this.timedifference();
    }, 1000);
  },

3，内容超出宽度时隐藏超出内容

        word-break: keep-all; /* 不换行 */
        white-space: nowrap; /* 不换行 */
        overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
        text-overflow: ellipsis;

4 uni.showModal({})

uni.showModal({
	title: '提示',
	content: '确定删除？',
	cancelText: "取消", // 取消按钮的文字  
	confirmText: "确认", // 确认按钮的文字  
	showCancel: true, // 是否显示取消按钮，默认为 true
	confirmColor: '#f55850',
	cancelColor: '#39B54A',
	success: (res) => {
	if(res.confirm) {  
		console.log('comfirm') //点击确定之后执行的代码
	} else {  
		console.log('cancel') //点击取消之后执行的代码
		}  
	} 
})

5.小程序 动态修改导航条的标题

     uni.setNavigationBarTitle({
        title: option.siteName,
      });

注意把在路由【pages.json】的标题设置为空，不然会出现覆盖动画

    "style": {
        "navigationBarTitleText": ""
      }

6，实现文本段落的缩进

       text-indent: 2em;//只能加在块状元素上面，内联元素是不起作用的

7，下拉列表显示名称，有些没有名称，有些有，没有名称的不显示

   let list = await PilegetBoothPage(data)
   if (list.code == 200) {
        let arr = []
        for (let i = 0; i < list.data.records.length; i++) {
          const element = list.data.records[i]
          if (element.nickName) {
            arr.push(element)
          }
        }
        this.zhuangzhulist = arr
      }

8，input输入框只允许输入数字

<el-input v-model.number="numVal" placeholder="请输入数字(限数字)" oninput="value=value.replace(/[^0-9.]/g,'')" />

9，uniapp获取congig里边的文件地址

方法一 ，在本页面直接在onShow里取

onShow() {
    // 文件地址
    if (config.uploadUrl && config.uploadUrl.dev) {
      this.imgUrl = config.uploadUrl[config.env];
      console.log(' this.imgUrl =', this.imgUrl);
    }
  },

方法二， 在utils文件夹中创建common.js文件

common.js

import { config } from '@/config/index';
// 图片
export const getimageurl = url => {
  return config.baseUrl.imageurl;
};

在页面使用

import { getimageurl } from '@/utils/common.js';
data(){
  return{
   imageLink:getimageurl(),//可以直接使用imageLink
  }
}
<image class="noImg" :src="imageLink+'/noResult2.png'" >

10，uniapp充值金额

    <view class="zongmoney">
        <view
          :class="['orderclass', orderindex === index ? 'orderbox' : '']"
          v-for="(item, index) in orderlist"
          :key="index"
          @tap="selectmoney(index, item.num)"
          >{{ item.num }}元</view
        >
      </view>

data(){
  return{
   orderlist: [{ num: 10 }, { num: 20 }, { num: 30 }, { num: 50 }, { num: 100 }, { num: 200 }],
   orderindex: '',
 }
},
methods:{
   selectmoney(e, num) {
      console.log('e', e);
      console.log('num', num);
      this.orderindex = e;
    },
}

.zongmoney {
      width: 660rpx;
      height: 250rpx;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      .orderclass {
        width: 200rpx;
        height: 100rpx;
        background: #ffffff;
        border-radius: 8rpx;
        border: 2px solid #b4b4b4;
        margin: 6rpx;
        text-align: center;
        line-height: 100rpx;
        color: #000;
        font-weight: bold;
      }
      .orderbox {
        border: 2px solid #ff6969;
      }
    }

11，针对苹果手机来说时间问题 例如2022-09-22，在苹果手机上就会显示null

      let box = /\-/g;
      let up = this.orderlist.upTime.replace(box,'/');
      let homing = this.orderlist.homingTime.replace(box,'/');

12，箭头函数与普通函数

箭头函数

 success: (loginRes)=> {
    this.falist()
  }

普通函数

let that = this
 success: function (loginRes) {
    that.falist()
  }

13，西瓜视频真实视频地址获取方法

打开西瓜视频 进入视频播放页面 按F12打开浏览器调试工具栏 在Console里粘贴以下代码(记得按回车)
就可以打印出真实视频的地址（仅限于西瓜视频）

window.atob(window._SSR_HYDRATED_DATA.anyVideo.gidInformation.packerData.video.videoResource.dash_120fps.dynamic_video.dynamic_video_list.pop().main_url);

14，获取完数据怎么默认显示第一个

<div>
          <a-select v-model="siteId" :placeholder="'请选择'" size="large" style="width: 320px" @change="handleChange">
            <a-select-option :value="item.siteId" v-for="item in projectData" :key="item.siteId">
              {{ item.siteName }}
            </a-select-option>
          </a-select>
        </div>

data(){
 return{
  siteId: undefined,
  projectData:[],
  siteName: '',
 }
},
methods:{
// 获取站点
    async SiteManagement() {
      let data = {
        page: this.page,
        row: this.row
      }
      let res = await SiteManagement(data)
      if (res.code == 200) {
        this.projectData = res.data.records
        if (this.projectData.length > 0) {
          this.siteId = this.projectData[0].siteId
          this.siteName = this.projectData[0].siteName
        }
      }
    },
 async handleChange(e) {
      console.log('eeeee', e)
      for (let i = 0; i < this.projectData.length; i++) {
        const element = this.projectData[i]
        console.log('element', element)
        if (element.id == e) {
          this.siteName = element.siteName
          break
        }
      }
    },
  
}