iview ui（非 template/render 模式）下标签替换整理及采坑总结

最新推荐文章于 2022-09-25 12:07:42 发布

风幕浦

最新推荐文章于 2022-09-25 12:07:42 发布

阅读量1.2k

点赞数

分类专栏：前端文章标签： vue.js html 前端

本文链接：https://blog.csdn.net/weixin_44397907/article/details/107860567

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在非 template/render 模式下（例如使用 CDN 引用时）

组件名要分隔

DatePicker: Date-picker
MenuItem: Menu-item

以下组件，在非 template/render 模式下，需要加前缀 i-：

Button: i-button
Col: i-col
Table:i-table
Input:i-input
Form: i-form
Menu:i-menu
Select: i-select
Option:i-option
Progress: i-progress
Time:i-time

以下组件，在所有模式下，必须加前缀 i-，除非使用 iview-loader：

Switch: i-switch
Circle: i-circle

示例（踩坑）：Menu 导航菜单踩坑

首先直接参照官网Demo例子，将代码拷贝进项目中运行，直接报错：
Cannot read property 'mode' of undefined.
然后查看官方文案将Menu标签改为i-menu
这下没有报错了，但是样式显示的根本不是想要的：
某度查询半天后原来还有几个标签必须得改掉才行：
1. MenuItem 修改为： Menu-Item
2. <Icon type="ios-paper" /> 修改为：<Icon type="ios-paper" ></Icon> (标签必须写完整，Icon标签后文字显示不出来，这是什么骚操作。。。。)
3. RadioGroup 修改为： Radio-Group

修改为之后，效果OK了，真是坑，按照官网介绍，并没有指出这些组件必须要这样写，只是粗略的说了一些…

官网：https://www.iviewui.com/

附完整示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>iview example</title>
    <link href="~/lib/iview3.1.4/styles/iview.css" rel="stylesheet" />
    <script src="~/lib/vue2.5.17/vue.min.js"></script>
    <script src="~/lib/iview3.1.4/iview.min.js"></script>
</head>
<body>
    <div id="app">
        <template>
            <i-menu mode="horizontal" :theme="theme1" active-name="1">
                <Menu-Item name="1">
                    <Icon type="ios-paper" ></Icon>
                    内容管理
                </Menu-Item>
                <Menu-Item name="2">
                    <Icon type="ios-people"  ></Icon>
                    用户管理
                </Menu-Item>
                <Submenu name="3">
                    <template slot="title">
                        <Icon type="ios-stats"  ></Icon>
                        统计分析
                    </template>
                    <MenuGroup title="使用">
                        <Menu-Item name="3-1">新增和启动</Menu-Item>
                        <Menu-Item name="3-2">活跃分析</Menu-Item>
                        <Menu-Item name="3-3">时段分析</Menu-Item>
                    </MenuGroup>
                    <MenuGroup title="留存">
                        <Menu-Item name="3-4">用户留存</Menu-Item>
                        <Menu-Item name="3-5">流失用户</Menu-Item>
                    </MenuGroup>
                </Submenu>
                <Menu-Item name="4">
                    <Icon type="ios-construct"  ></Icon>
                    综合设置
                </Menu-Item>
            </i-menu>
            <br>
            <p>Change theme</p>
            <Radio-Group v-model="theme1">
                <Radio label="light"></Radio>
                <Radio label="dark"></Radio>
                <Radio label="primary"></Radio>
            </Radio-Group>
        </template>
        </div>
        <script type="text/javascript">
            var vue = new Vue({
                el: '#app',
                data: {
                    theme1: 'primary'
                }
            });
        </script>
</body>
</html>

风幕浦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
iview ui（非 template/render 模式）下标签替换整理及采坑总结

在非 template/render 模式下（例如使用 CDN 引用时）组件名要分隔DatePicker: date-pickerMenuItem: Menu-item以下组件，在非 template/render 模式下，需要加前缀 i-：Button: i-buttonCol: i-colTable:i-tableInput:i-inputForm: i-formMenu:i-menuSelect: i-selectOption:i-optionProgress: i-p
复制链接

扫一扫