布局(待完善)
效果参照当前页面的布局
使用
- < emmm-layouts> 自定义的组件或其他dom结构等 emmm-layouts>
属性
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| mode | 可选参数：isometry，等高布局 | String | 一 |
侧边栏(待完善)
效果参照当前页面的左侧布局
使用
-
<
emmm-sidemenu>
< emmm-sidemenu-item > 布局 emmm-sidemenu-item>
< emmm-sidemenu-item icon="home" > 侧边栏 emmm-sidemenu-item>
< emmm-sidemenu-item imgSrc="../../static/images/logo.png" > 侧边栏 emmm-sidemenu-item>
< emmm-sidemenu-item :count="1" > 最近更新 emmm-sidemenu-item>
emmm-sidemenu>
属性
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| imgSrc | 自定义图标 | String | 一 |
| icon | 字体图标 | String | 默认值为空，可选参照[icon组件] |
| :count | 通知，小红点 | Number | 大于0显示，默认值：0 |
Title 标题
我是自定义在下方的内容
使用
- < emmm-title titleType="h1" title="一级标题" > emmm-title>
- < emmm-title titleType="h1" title="一级标题" leftText="左边的内容" leftHref="http://weibo.com" rightText="右边的内容" rightHref="http://weibo.com" > emmm-title>
- < emmm-title titleType="h1" title="一级标题" titleDecs="这一段内容是标题的描述文字，样式如上面的示例展示" > emmm-title>
- < emmm-title titleType="h1" title="一级标题" > 这段是自定义在标题下方的内容 emmm-title>
-
<
emmm-title
titleType="h1"
title="一级标题"
>
<span slot="extra">这段是自定义的内容span>emmm-title>
属性
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| titleType | 标题类型，分别为一级，二级，三级标题，可选值：h1, h2, h3 | String | h1,一级标题 |
| title | 标题名称 | String | 一 |
| leftText | 左边标题后的自定义内容 | String | 一 |
| leftHref | 左边标题后的自定义内容是否为链接，通常传入跳转的url | String | 不填，则展示非链接形式 |
| rightText | 右边标题后的自定义内容 | String | 一 |
| rightHref | 右边标题后的自定义内容是否为链接，通常传入跳转的url | String | 不填，则展示非链接形式 |
| titleDecs | 常用于主标题下方的描述文案 | String | 一 |
| slot | 可选值：extra，自定义标题后的内容 | 一 | 自定义标题下方的内容 |
crumbs 面包屑
使用
-
<
emmm-crumbs icon="arrows">
< emmm-crumbs-item :to="{ path:' /crumbs/ ' }" > 首页 emmm-crumbs-item>
< emmm-crumbs-item ><a href="//weibo.com/">公司/机构组织a>emmm-crumbs-item>
< emmm-crumbs-item > 这里是内容 emmm-crumbs-item>
emmm-crumbs>
属性
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| icon | 设置分隔图标 | String | 空，可选参照[icon组件] |
| separator | 设置分隔字符 | String | 一 |
| :to | 路由跳转对象 | String/Object | 一 |
| replace | 启用路由时是否向history添加记录 | Boolean | false |
form 表单
button
使用
- < emmm-button> 默认按钮 emmm-button>
- < emmm-button disabled > 无法点击 emmm-button>
- < emmm-button btnType="line" > 线性按钮 emmm-button>
- < emmm-button btnType="fill" btnColor="blue" > 填充按钮 emmm-button>
- < emmm-button btnSrc="./static/images/icon-home.png"> 图片按钮 emmm-button>
- < emmm-button iconName="check"> Icon按钮 emmm-button>
- < emmm-button btnSize="small"> 小按钮 emmm-button>
- < emmm-button btnSize="large"> 大按钮 emmm-button>
属性
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| markup | 按钮类型，可选值：error,warning,success [ 暂无 ] | String | default |
| btnType | 按钮样式，可选值：fill | String | line |
| btnColor | 按钮颜色，可选值：blue | String | 一 |
| btnSize | 按钮尺寸，可选值：large，small | String | 一 |
| btnSrc | 添加图片 | String | 一 |
| btnIcon | 添加icon,可选值：icon【使用svg图标】 | String | font【使用字体图标】 |
| iconName | 设置图标 | String | 可选参照 [icon组件] |
| disabled | 是否禁用 | Boolean | false |
radio
示例：
被选中的是：{{ radioValue }}
使用
-
<
emmm-radio>
< emmm-radio-item value="男" >男 emmm-radio-item>
< emmm-radio-item value="女" >女 emmm-radio-item>
< emmm-radio-item disabled >不可点击 emmm-radio-item>
emmm-radio>
属性
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| value | 设置radio的value值 | String/Number | 一 |
| disabled | 是否可以选中 | Boolean | false |
checkbox
示例：
被选中的是：{{ checkboxValue }}
使用
-
<
emmm-checkbox>
< emmm-checkbox-item value="男" >小新 emmm-checkbox-item>
< emmm-checkbox-item value="风之" >女 emmm-checkbox-item>
< emmm-checkbox-item value="多美子" disabled >多美子 emmm-checkbox-item>
emmm-checkbox>
属性
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| value | 设置checkbox的value值 | String/Number | 一 |
| disabled | 是否可以选中 | Boolean | false |
text
示例：
输入的内容为：{{ inputData }}
使用
- < emmm-input placeholder="默认" > emmm-input>
- < emmm-input placeholder="中型" size="medium" > emmm-input>
属性
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| type | 文本类型，可选值：search,password.. | String | text |
| disabled | 是否可输入 | Boolean | false |
| placeholder | 输入字段初始的提示信息 | String | 一 |
| value | 表单初始(默认)值 | String/Number | 一 |
| size | 尺寸，可选值：medium，small【具体表现看示例】 | String | 一 |
| maxlength | 最大字数 | Number | 一 |
textarea
示例：
输入的内容为：{{ textareaValue }}
使用
- < emmm-textarea placeholder="默认" :maxlength="200" > emmm-textarea>
属性
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| disabled | 是否可输入 | Boolean | false |
| placeholder | 输入字段初始的提示信息 | String | 一 |
| value | textarea初始(默认)值 | String | 一 |
| maxlength | 最大字数 | Number | 一 |
| isNum | 是否显示右下角的字数 | Boolean | true |
icon 图标
font
-
check -
arrow-right
svg
-
check -
close -
warn
使用
-
<
emmm-icon iconName="check"
>
emmm-icon>
或：
< i class="e-font e-font-check" > i>
svg图标：
< i class="e-icon e-icon-check" > i> 注：i 可以是任意标签
属性
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| iconType | 设置图标的类型，可选值：svg | String | font |
| iconName | 图标的名称 | String | 一 |
toast 弹层
纯文本也可以直接添加事件,点我
使用
-
<
emmm-icon iconName="check"
>
emmm-icon>
或：
< i class="e-font e-font-check" > i>
svg图标：
< i class="e-icon e-icon-check" > i> 注：i 可以是任意标签
属性
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| type | 可选值：error,warning,success | String | 一 |
| content | toast文案 | String | 一 |
| mask | 是否出现蒙层 | Boolean | true |
| direction | 方向 | String | horizontal |