vue+And移动端开发记录1-button失效及表单禁止修改问题

使用css中的z-index属性使得button失效

在父元素设置z-index属性，导致button失效，一开始以为是路由问题，百思不得其解，排查了一小时才发现。
z-index是设置元素优先级的，当元素重叠时，z-index值较大的会显示在上面。

<div class="back" :style="conTop">
			  <a-button @click='$router.push({name:"moveDetail"})'> <a-icon type="left" /></a-button>
</div>

.back{
		width:100%;  
		height:100%;  /**宽高100%是为了图片铺满屏幕 */
		z-index: -1;
		position: absolute;
	}

经过测试，当z-index值为-1时，才会导致组件失效，大于或等于0是不会有这个问题的。

设置整个表单为不能修改的状态

将表单用fieldset标签包裹起来，设置其属性disabled为真，就可以将整个表单设为不能修改状态。

<fieldset :disabled="edit">
	<!--表单内容-->
</fieldset>
<button id="save" @click="disableAll">Save Only</button>

export default {
	name:'formA',
		components:{
			quesList,
		},
		data(){
			return {
				edit: false,
			}
		},
		methods:{
			disabledAll(){
				this.edit=true;
			}
		}
}

参考链接：https://jsfiddle.net/stardew/ffnm6Lsd/1/