关于TabbarItem组件使用v-for方式，Xicon报错问题

yuxianwen commented 6 years ago

这边项目TabbarItem项是循环出来的，里面用的slot 图标用的Xicon组件

其中的type是动态的，然后问题就出现了

不知道有啥好办法解决

<template>
    <div id="app">
        <router-view class="view" :data-tab-flag="isTabbar"></router-view>
        <loading v-model="isLoading"></loading>
        <tabbar v-if="isTabbar"  class="wm-tabbar">
            <tabbar-item v-for="(item, index) in menu" :key="item.id" :link="item.link" :badge="item.badge" :selected="item.selected">
                <x-icon :type="item.type" slot="icon"></x-icon>
                <span slot="label">{{item.text}}</span>
            </tabbar-item>
        </tabbar>
    </div>
</template>
<script>
    import {Loading, Tabbar, TabbarItem} from 'vux'
    import {mapState, mapActions} from 'vuex'
    export default {
        data () {
            return {
                menu: [
                    {id: 0, link: '/', type: 'settings', selected: true, badge: '', text: '我要报修'},
                    {id: 1, link: '/list', type: 'person', selected: true, badge: '9', text: '我的报修'}
                ]
            }
        }
}}

airyland commented 6 years ago

x-img 不支持动态 type，因为它是静态解析替换成 svg，你可以直接 require vux icon 目录下的 svg 文件来进行循环渲染。

yuxianwen commented 6 years ago

但是使用require 的话，svg图标就成了base64格式图片了，这个颜色咋自定义？？？

airyland commented 6 years ago

这个不是 VUX 支持的范围了，既然不想转成 base64，寻找相关 webpack 插件支持原始载入文件就可以了，比如这个： https://github.com/webpack-contrib/svg-inline-loader

airyland / vux

关于TabbarItem组件使用v-for方式，Xicon报错问题 #2341