基层政务3.0 APP
任务模块
1、新增任务上报页面、人员选择器页面
2、综治安全、督办任务业务流程跳转完善
3、新增任务处理详情页
4、新增跳转消息通知查看任务
input中disable与readonly的区别及其相关属性
readonly 属性规定输入字段为只读。
只读字段是不能修改的。不过,用户仍然可以使用 tab 键切换到该字段,还可以选中或拷贝其文本。
readonly 属性可以防止用户对值进行修改,直到满足某些条件为止(比如选中了一个复选框)。然后,需要使用 JavaScript 消除 readonly 值,将输入字段切换到可编辑状态。
readonly 属性可与 <input type="text"> 或 <input type="password"> 配合使用。
vue动态组件切换
点击切换效果
<body>
<div id="app">
<button @click="changeComponent(1)">第一项</button>
<button @click="changeComponent(2)">第二项</button>
<button @click="changeComponent(3)">第三项</button>
<component :is="nowHeader"></component>
</div>
</body>
</html>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data:{
nowHeader:'my-header-1'
},
components:{
'my-header-1':{
template:'<div>组件一<input type="text" /></div>'
},
'my-header-2':{
template:'<div>组件2<input type="text" /></div>'
},
'my-header-3':{
template:'<div>组件3<input type="text" /></div>'
},
},
methods:{
changeComponent:function(index){
this.nowHeader = 'my-header-'+ index;
}
}
});
</script>
有时遇到我们在组件1输入内容后,切换组件二。然后在切换到组件一,之前的内容就消失了。
vue为了提供类似的方法。保持组件的复用性。使用keep-alive方法