文章目录
1.Model对话框点击确定后iview会自动关闭窗口
<template>
Modal(ref="endorseModel" v-modal="endorseModel")
</template>
<script>
export default {
data(){
return {
visilble : false,
}
},
mounted(){
//屏蔽内置关闭方法
//之后只能通过控制visible来关闭modal了
this.$refs.endorseModel.visible = true;
this.endorseModel = true;
}
}
</script>
2. iview select下拉框缓存
<select ref="select">
<option>1</option>
<option>2</option>
</select>
this.$refs.select.setQuery(null)
3. select选择器无法赋默认值
<template>
<Form :model="form">
<FormItem prop="item">
<Select :model="item">
<Option v-for="v in options" :key="v.id">{{v.id}}</Option>
</Select>
</FormItem>
</Form>
</template>
<scirpt>
export default{
data(){
return {
options: [],
form: {
item: ""
}
}
},
mounted(){
this.options = [{id: "123"}]
this.form.item = '123'
}
}
</scirpt>
4. textarea阻止默认事件
需求如下:
textarea中,输入回车键时添加分号
分析需求,分下面几步
- 阻止默认回车换行
- 获取值并添加分号
<!-- 此处使用了Vue语法中的事件修饰符 keydown.enter -->
<!-- 使用keyup阻止默认事件不起作用 -->
<div id="app">
<textarea v-mode="text" @keydown.enter="submit"></textarea>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
new Vue({
el: 'app',
data(){
return {text: ""}
},
methods:{
submit(e){
// 浏览器阻止默认事件兼容
if (e.preventDefault) e.preventDefault();
else window.event.value = false;
// 修改值
let _ = this.text;
if (_.charAt(_.length-1) === ";") return
else this.text += ";"
}
}
})
</script>
5. router-view不显示
这是新手很容易犯的错,由于控制台也不报错,所以排查起来相对困难
// router.js
export const router = new Router({
mode: 'history',
routes: routers
});
routes不要写成routers