当前位置: 首页 > 工具软件 > Custom Drop > 使用案例 >

非 template/render 模式下,iview使用tabs标签页报错:Unknown custom element

汪臻
2023-12-01

这是因为识别不了某个标签报错,可能原因有二:

  • 一是没有引入相应组件。
  • 二是相应标签写错了。
    非 template/render 模式下,应该都引用了iview的js文件,所以不存在引入组件的问题,那就是标签写错了。
    因为工程模式和非工程模式,很多标签写法不一样,这里就是因为这个TabPane写法不同引起的错误。而官网上貌似没有把所有写法有差异的标签标注。
    在标签页组件中,主要有两个标签,Tabs和TabPane,其中Tabs在两种模式写法一样,TabPane在非工程模式下写作:tab-pane,代码如下:
    <Tabs value="name1"> <tab-pane label="标签一" name="name1">标签一的内容</tab-pane> </Tabs>
    另外记录下所有标签差异:
    这些差异化整理是别人做的,原文链接:iview差异化标签
    以下组件,在非 template/render 模式下组件名要‘-‘分隔:
    1 DatePicker:date-picker
    2 FormItem:form-item
    3 CheckboxGroup:checkbox-group
    4 InputNumber:input-number
    5 BreadcrumbItem:breadcrumb-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
    Header:i-header
    Content:i-content
    Footer:i-footer
    Switch: i-switch
    Circle: i-circle
    以下组件,在非 template/render 模式下, 组件写法不变,如
    <Card>
    <Checkbox>
    <Row>
    <Sider>
    <Layout>
    <Submenu>
    <Panel>
    <Collapse>
    <Divider>
    <CellGroup>
    <Cell>
    <Badge>
    <Tabs>
    <Radio>
    <Dropdown>
    <Breadcrumb>
    <Page>
    <Modal>
    以下组件,在非 template/render 模式下,需要加前缀 xxx-yyy:
    BreadcrumbItem:breadcrumb-item
    MenuGroup : <menu-group>
    Menu-Item : <menu-item>
    RadioGroup : <radio-group>
    TabPane : <tab-pane>
    DropdownMenu : <dropdown-menu>
    DropdownItem : <dropdown-item>
 类似资料: