7.20 uniapp-wx小程序 bug结语

1.解决vue的{ob: observer}取值问题

  1. 问题：
    vue编码中经常出现获取到的数据是：{ob: Observer} 格式的
  2. 解决方法：
    将返回的数据data先转换为JSON字符串形式，然后再从字符串形式转换成JSON格式JSON.parse(JSON.stringify(data))
let resdata=JSON.parse(JSON.stringify(that.runlogData)); 
console.log("运行记录组件接到的数据",resdata);
　　//结果会转换成一般对象

2.vue的生命周期、uni-app页面生命周期

https://blog.csdn.net/qq_43962582/article/details/123014908

3.Vue背景图片问题

#全局样式 global.css
html,body,#app{
    height:100%;
    margin:0;
    padding:0
}
.Container{
    background-image:url();
    background-repeat:no-repeat;
    background-size:100%;
    height:100%;
}

4.图片上传回显问题

解决方法： uniClound 本地存储空间 + uni-file-picker 控制图片上传 生成在线URL 链接

<span>上传问卷封面:</span>
					<uni-section title="只选择图片" type="line">
						<view class="example-body">
							<uni-file-picker
							limit="1"
							v-model="baseInfo.avatarUrl" 
							ref="files"
							:auto-upload="true"
							title="最多选择1张图片"
							@progress="progress" 
							@success="success" 
							@fail="fail" 
							@select="select"
							></uni-file-picker>
						</view>
					</uni-section>

select(e){
			console.log('选择文件：',e)
		},
		// 获取上传进度
		progress(e){
			console.log('上传进度：',e)
		},
		// 上传成功
		success(e){
			console.log('上传成功在线图片地址为：',e.tempFilePaths[0])
			//v-model绑定的图片地址
			console.log(this.baseInfo.avatarUrl[0].fileID);
		},
					
		// 上传失败
		fail(e){
			onsole.log('上传失败：',e)
		}

5.使用a标签下载本地静态资源文件

  • 1、public目录下存放要下载的静态资源
  • 2、a 标签下载
<a href="/demo.rar" download="demo.rar">点击下载</a>

6.vue+elementUI在输入框中按回车键会刷新页面

当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在 <el-form> 标签上添加 @submit.native.prevent。

<templat>
<el-form   @submit.native.prevent >< /el-form >
</templat>

7.巧用$options

$options是一个记录当前Vue组件的初始化属性选项，当我们想把 data 里的某个值重置为初始值时，非常有用

this.value = this.$options.data().value;

8.dialog 里重置表单

利用上面介绍的 $options 特性

我们经常的业务场景是这样：一个el-dialog中有一个el-form，而且我们通常是新增和编辑复用同一个组件，现在我们要求每次打开el-dialog时都要重置el-form里的数据，并且清除校验状态。

  // 弹框打开时
initForm(){
  this.$refs['form'] && this.$refs['form'].resetFields()
  this.form = this.$options.data.call(this).form;
}