vue-common-components
vue3 组件库
Project setup
node version >= 16.x.x
npm install
Compiles and hot-reloads for node
npm run serve
组件
1. KeepAliveC
功能说明：基于vue内置组件，增加
catchKey参数，可自定义缓存时使用的组件属性
组件使用示例.vue
仅缓存 testKey="testKey1" 的组件
<template>
<select v-model="value">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<KeepAlive2 catchKey="testKey" :includes="['testKey1']">
<test v-if="value === '1'" testKey="testKey1">box1</test>
<test v-else-if="value === '2'" testKey="testKey2">box2</test>
<test v-else testKey="testKey3">box3</test>
</KeepAlive2>
</template>
<script>
export default {
data() {
return {
value: '1'
};
},
components: { KeepAlive2, test },
}
</script>API
| 参数 | 说明 | 默认值 |
|---|---|---|
| catchKey | 缓存对应的组件props参数key，不填则默认使用组件name进行缓存判断 | - |
| includes | 缓存的key值。同keep-alive组件includes | - |
| exclude | 不缓存的key值。同keep-alive组件exclude | - |
| max | 最大缓存组件数量。同keep-alive组件max | 10 |