iView非 template/render 标签转换

最新推荐文章于 2022-02-21 09:27:54 发布

转载最新推荐文章于 2022-02-21 09:27:54 发布 · 470 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/Jacqueline0905/article/details/88650542

Web 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了在非template/render模式下使用iView UI框架时，各类组件的正确命名方式，包括需分隔、加前缀及保持不变的组件名称，为开发者提供清晰指引。

在非 template/render 模式下（例如使用 CDN 引用时），组件名要分隔，例如 :

DatePicker: date-picker
FormItem: form-item
CheckboxGroup: checkbox-group
InputNumber: input-number
BreadcrumbItem: breadcrumb-item
MenuGroup: menu-group
MenuItem: menu-item
RadioGroup: radio-group
TabPane: tab-pane
DropdownMenu: dropdown-menu
DropdownItem: dropdown-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

以下组件，在非 template/render 模式下写法不变：

<Card>
<Checkbox>
<Row>
<Card>
<Sider>
<Layout>
<Submenu>
<Panel>
<Collapse>
<Divider>
<CellGroup>
<Cell>
<Badge>
<Tabs>
<Radio>
<Dropdown>
<Breadcrumb>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

keshuiyun

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

零基础Webpack4.0+Vue2.6+iView3.0+Vuex环境搭建详解

mrgao的博客

03-26

2139

使用Vue3.0+Webpack4.0+iView3.0构建简单的项目项目地址:https://github.com/MrGaoGang/lucky_vue 先上效果图: 项目目录: npm init初始化npm的配置 npm install webpack --save-dev和npm install webpack-cli --save-dev :安装webpack依赖 npm in...

vue渲染方式render和template的区别

11-20

render函数详解 Vue中的Render函数中有一个参数，这个参数是一个函数通常我们叫做h。其实这个h叫做createElement。Render函数将createElement的返回值放到了HTML中 createElement这个函数中有3个参数第一个参数（必要参数）：主要用于提供DOM的html内容，类型可以是字符串、对象或函数第二个参数（类型是对象，可选）：用于设置这个DOM的一些样式、属性、传的组件的参数、绑定事件之类第三个参数（类型是数组，数组元素类型是VNode，可选）：主要是指该结点下还有其他结点，用于设置分发的内容，包括新增的其他组件。注意，组件树中的所有VNod

参与评论您还未登录，请先登录后发表或查看评论

iview 非 template/render 标签转换整理

爱软件-从懂得生活开始。

09-01

1198

今天我们来整理整理基于vue的iview框架学习,这个框架官方的教程是基于template模式进行开发的,也就是说基于nodejs方式开发.而我们想要脱离nodejs怎么办呢?难道就没有办法了么?其实不然,iview是可以脱离template模式实现的,那么我们就来说说非template下如何实现.其实非template实现方式和template模式下实现方式是一样的,只不过区别就是标签形式不同,下面我们就整理一下template模式和非template模式下标签的对应.主要有以下3类对应方式,如下: 非

iView在非 template/render 模式下标签的转化

qq_16539015的博客

09-06

7329

iView在非 template/render 模式下标签的转化本Markdown编辑器使用[StackEdit][6]修改而来，用它写博客，将会带来全新的体验哦：以下组件，在非 template/render 模式下组件名要分隔： DatePicker：date-picker FormItem：form-item CheckboxGroup：checkbox-group Inpu...

iview 非 template/render 标签转换

Jacqueline0905的博客

03-18

1091

iview 非 template/render 标签转换以下组件，在非 template/render 模式下组件名要分隔： DatePicker：date-picker FormItem：form-item CheckboxGroup：checkbox-group InputNumber：input-number 以下组件，在非 template/render 模式下，需要加前缀 i-： Bu...

vue 非template模式_使用Iview Menu 导航菜单(非 template/render 模式)

weixin_39565777的博客

12-21

421

1、首先直接参照官网Demo例子，将代码拷贝进项目中运行，直接报错：Cannot read property 'mode' of undefined.然后查看官网介绍，有一行注意文字，好吧。 2、然后将Menu标签改为i-menu.这下没有报错了，但是样式显示的根本不是想要的：什么个鬼，然后官网也没有其他什么说明了。。。。OK，找度娘查找资料，找到这篇文章：http://wallimn.itey...

iview template模式_非template/render模式下使用iview组件时标签需要转化

weixin_30725113的博客

02-23

446

工作中遇到的情况，记录下：iView在非 template/render 模式下标签的转化以下组件，在非 template/render 模式下组件名要‘-‘分隔：1 DatePicker：date-picker2 FormItem：form-item3 CheckboxGroup：checkbox-group4 InputNumber：input-number5 BreadcrumbItem:b...

在iview的table中写render函数，这一列只展示一个DatePicker组件，type为daterange，需要这列可以修改输入框的值也能选择日期。而且这一列的值都是字符串，不要转换为date类型的数据。最后的效果是这个字符串展示在DatePicker的输入框内，而且还能重新选择日期

08-08

我们面临的问题：在iView Table的render函数中渲染一个DatePicker（日期范围选择器），要求： 1. 数据类型是字符串（即不需要转换成Date对象，直接使用字符串格式） 2. 支持手动输入和日期选择 3. 编辑的是日期...

iview中如何将iview表格行变成列，列变成行

10-25

在iView组件库中，如果需要将表格的行变成列，或者列变成行，可以借助Table组件提供的`span-method`属性以及`column`配置项来实现。`span-method`是一个自定义函数，用于控制单元格合并。以下是基本步骤： 1. **行...

vue项目中如何根据模糊查询菜单名打开iview的Menu菜单一二三级菜单

最新发布

09-02

// 注意：如果匹配到的节点本身是Submenu（非叶子节点），那么它的name也应该加入openNames以便展开 if (item.children && item.children.length > 0) { this.openNames.push(item.name); } // 由于openNames...

【Vue+iview动态菜单高级教程】：权限管理与组件应用

![【Vue+iview动态菜单高级教程】：权限管理与...首先介绍了Vue.js和iview的基础知识，然后深入分析了动态菜单的设计理念、Vue组件的应用实践和权限管理的具体实现。通过实战章节，展示了菜单数据动态绑定、用户权限动

vue渲染方式：render和template的区别

weixin_42519012的博客

02-21

5512

template----html的方式做渲染 render----js的方式做渲染 render（提供）是一种编译方式 render里有一个函数h，这个h的作用是将单文件组件进行虚拟DOM的创建，然后再通过render进行解析。 h就是createElement()方法：createElement(标签名称,属性配置,children) template也是一种编译方式，但是template最终还是要通过render的方式再次进行编译。区别： 1、render渲染方式可以让我们将js

iview非render中组件写法

jimjack2013的博客

03-22

6571

在非 template/render 模式下（例如使用 CDN 引用时），组件名要分隔，例如 DatePicker 必须要写成 date-picker。以下组件，在非 template/render 模式下，需要加前缀 i-：Button: i-buttonCol: i-colTable: i-tableInput: i-inputForm: i-formMenu: i-menuSelect: i...

Template模式

oyhy_的博客

05-05

579

Template（模板）模式在开发时，有时会遇到对于一个算法的实现，在不同的对象中有不同的实现的问题，但是这个算的框架是相同的，这时可以使用Template模式或者Strategy模式．Template是采用继承的方式来实现这一点，即将算法框架放在抽象基类中，在基类定义好接口，之后在派生类实现算法．类图结构如图所示：算法实例：//Template.h//Template.h#ifndef _TE

非template/render模式下使用iview组件时标签需要转化

weixin_34037173的博客

05-11

1539

工作中遇到的情况，记录下： iView在非 template/render 模式下标签的转化以下组件，在非 template/render 模式下组件名要‘-‘分隔： 1 DatePicker：date-picker 2 FormItem：form-item 3 CheckboxGroup：checkbox-group 4 InputNumber：input-number 5 ...

Flask 学着用模板 render_template