Vuetify Storybook remapInternalIcon 问题
Posted
技术标签:
【中文标题】Vuetify Storybook remapInternalIcon 问题【英文标题】:Vuetify Storybook remapInternalIcon issue 【发布时间】:2021-04-28 22:55:21 【问题描述】:使用 Vuetify 2 和 Storybook 6(来源 https://github.com/lydonchandra/vuetify2storybook6)
组件渲染正常,但在第一次渲染组件时不断收到此错误 TypeError,因为 vm.$vuetify.icons 未定义。
不确定我错过了哪个 storybook-vuetify 初始化桥?
TypeError: Cannot read property 'component' of undefined
at remapInternalIcon (vuetify.js:44048)
at VueComponent.getIcon (vuetify.js:16881)
at Proxy.render (vuetify.js:17009)
at VueComponent.Vue._render (vue.esm.js:3557)
at VueComponent.updateComponent (vue.esm.js:4075)
at Watcher.get (vue.esm.js:4488)
at new Watcher (vue.esm.js:4477)
function remapInternalIcon(vm, iconName)
// Look for custom component in the configuration
var component = vm.$vuetify.icons.component; // <-- issue here when rendering for first time
if (iconName.startsWith('$'))
// Get the target icon name
src/plugins/vuetify.ts
import Vue from "vue";
import Vuetify from "vuetify/lib";
import UserVuetifyPreset from "vuetify";
Vue.use(Vuetify);
export const options: UserVuetifyPreset =
icons:
iconfont: "mdiSvg"
;
export default new Vuetify(options);
【问题讨论】:
【参考方案1】:另一种解决方法,无需禁用 addon-essentials 或在 preview-head.html 文件中添加任何样式,您可以在 .stories.js(或 .stories.ts)文件的顶部导入 Vuetify,例如
import vuetify from '@/plugins/vuetify'
然后当你声明你的故事书模板时,传入你的 vuetify 对象
const Template = (args, argTypes ) => (
props: Object.keys(argTypes),
components: YourComponent ,
vuetify, // <-- Very important line
template: `<YourComponent />`
)
我在这个帖子Cannot read property 'mobile' of undefined - Vue/Vuetify/Storybook找到了这个解决方法
【讨论】:
【参考方案2】:如果不想禁用addon-essentials.docs
,可以在.storybook/preview-head.html
中添加如下样式
<style>
.sb-errordisplay
display: none !important;
</style>
【讨论】:
【参考方案3】:目前的解决方法是将 addon-essentials.docs 设置为 false。 (参考。 https://github.com/storybookjs/storybook/issues/7593)
文件:.storybook/main.js
...
"addons": [
"@storybook/addon-links",
name: "@storybook/addon-essentials",
options:
docs: false
],
...
【讨论】:
以上是关于Vuetify Storybook remapInternalIcon 问题的主要内容,如果未能解决你的问题,请参考以下文章
Vuetify VIcon 没有出现在 Storybook 中
无法读取未定义的属性“移动”-Vue/Vuetify/Storybook