vue中动态渲染组件
<template>
<div v-for="(item, index) in totalData" :key="index">
<component
:is="chioceComponent(item.gameType)"
:gameList="item.data"
:topTitle="item.title"
></component>
</div>
</template>
<script>
import gameSlider from '../components/gameSlider'
import gameList from '../components/gameList'
import sliderLonger from '../components/sliderLonger'
data(){
return{
gameComponents: {
gameSlider,
gameList,
sliderLonger,
},
}
}
methods(){
/**
* @description:动态渲染组件
* @param {type}
*/
chioceComponent(type) {
let com = ''
switch (type) {
case 'newGame':
com = this.gameComponents.gameSlider
break
case 'selectedTopics':
com = this.gameComponents.sliderLonger
break
case 'all':
com = this.gameComponents.gameList
break
}
return com
},
}
</script>vue的返回上一级根据情况而定，不全是this.$router.go(-1),有时需要到固定位置
if (window.history.length <= 1) {
this.$router.push({ path: '/okrSystem/management/objectives/objectivesMap' });
return false;
} else {
this.$router.go(-1);
}布局的问题 在内容不满屏的时候header底部依然能够在底部,无论屏幕怎么缩放,也都是底部
min-height: calc(100vh - 65px);设置动态的高度
<el-main class="app-main" id="main-box" :style="appMainStyle">
<slot/>
</el-main>
appMainStyle(){
return {
'min-height': (document.documentElement.clientHeight - 120) + 'px'
}
}element中的表格中的文字经常会太多
:show-overflow-tooltip="true"，该属性可以让内容在一行显示，如果显示不下时，显示...,并且鼠标划过时显示全部文字。element百分比的验证规则
var validatePrecent = (rule, value, callback) => {
if (value.indexOf('%') === -1) {
callback(new Error('请输入百分比'));
} else if (value.indexOf('%') !== -1) {
let v = value.split('%')
if (!Number.isInteger(v[0])) {
callback(new Error('请输入有效百分比'));
} else {
callback();
}
}
}v-slot可以将components标签里面的文字内容替换到指定的位置。
slot标签还可以有一个name属性，可以在template标签上用v-slot：name指令将内容替换到固定name值的slot标签上，
==v-slot可简写为 一个井号 # ==
<body>
<!-- v-slot 插槽 -->
<!-- 简写 # -->
<div id="app">
<my-button type="success">成功按钮
<template v-slot:right>
success
</template>
</my-button>
</div>
<script>
const vm = new Vue({
el: '#app',
components:{
myButton:{
props: ['type'],
template:`<button class="my-button" :class="type">
<slot></slot>
-------------
<slot name="right"></slot>
</button>`
}
}
});
</script>
</body>Object的hasOwnProperty()方法返回一个布尔值，判断对象是否包含特定的自身（非继承）属性。
当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在 标签上添加 @submit.native.prevent。
<el-form :inline="true" @submit.native.prevent>
</el-form>
el-from 加上 @submit.native.prevent强制刷新
watch: {
'$route.query' () {
this.$router.go(0)
}
},
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。