iview--依赖vue的ui框架--实践经验（一）

最新推荐文章于 2023-11-07 14:32:56 发布

aijv11147

最新推荐文章于 2023-11-07 14:32:56 发布

阅读量307

点赞数

文章标签： ui javascript ViewUI

原文链接：http://www.cnblogs.com/liuw44/p/10452016.html

版权

本文详细介绍Dropdown、Badge、Card、Select、Tree、Page和Tabs等前端组件的使用方法，包括属性设置、子组件嵌套及事件处理，适用于Vue框架的开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、Dropdown+DropdownMenu+DropdownItem、Badge

下拉列表---用在了悬浮于头像上后出现的下拉列表，展示消息、退出登录等信息；

徽标---用来表示未读消息、待处理消息，可以用数量（count）显示个数或只显示圆点（dot）表示有未读消息。

<Dropdown placement="bottom-end">//placement--显示于头像的左下
    <Badge>//徽标，展示有未读消息
       <Avatar/>//存放头像的标签
    </Badge>
    <Icon :size="18" type="md-arrow-dropdown"></Icon>
    <DropdownMenu slot="list" align="left">//slot必须有，才能知道是下拉列表，align让内容左对齐
      <DropdownItem>
          消息中心<Badge style="margin-left: 10px" :count="1"></Badge>
      </DropdownItem>
      <DropdownItem>
            退出登录
      </DropdownItem>
   </DropdownMenu>
</Dropdown>

2、Card

简单的卡片容器，本来是用来显示弹框的还要自己写蒙层---是错误的，有专门的弹框组件--Modal；标题居中---align="center"，或通过slot="title"给标题---<h2 slot="title">卡片标题</h2>。

3、Select---Option

表单里的下拉选择，v-model给Select双向绑定，循环写在Option里，并且里面要有value。

4、Tree

树状选择，通过:data="datas"来绑定数据；可以有自带的多选框---show-checkbox，是显示在前面的；可以隐藏多选框（不写show-checkbox），在data里用render添加自定义标签；data数据格式为title、children。<Tree :data="datas" show-checkbox></Tree>。

5、Page

底部显示的分页，total---总共有多少数据，page-size---每页条数，current---当前页码；点击切换页码后的事件---on-change。

6、Tabs

用在两大块内容的切换；可能放到其中的内容超出，就需要滚动，就在父组件里给高度和overflow-y：scroll，就可以滚动以显示全部内容。

<Tab :animated="false">//取消显示动画
  <TabPane label="基本信息" name="basic">//label是显示的标题，name是组件里数据识别的
     //基本信息的内容，可以是子组件
  </TabPane>
  <TabPane label="详细信息" name="detail">
     //详细信息的内容，可以是子组件
  </TabPane>
</Tab>

　　　　有发现描述错误欢迎指教

　　　　^_^

转载于:https://www.cnblogs.com/liuw44/p/10452016.html