<template>
  <div class="wrapper">
    <emmm-layouts mode="isometry">
      <emmm-side v-bind:style="{ minHeight:getHeight+'px' }">
        <div class="logo">
          <h1>
            <p><img src="../../static/images/emmmui-logo.png" alt="" title="" /></p>
            <em><span>EmmmUi</span></em>
          </h1>
        </div>

        <emmm-sidemenu>
          <emmm-sidemenu-item imgSrc="./static/images/icon-home.png">HOME</emmm-sidemenu-item>
          <emmm-sidemenu-item icon="layouts" @click="goAnchor('#layouts')">布局</emmm-sidemenu-item>
          <emmm-sidemenu-item icon="sidemenu" @click="goAnchor('#sidemenu')">侧边栏</emmm-sidemenu-item>
          <emmm-sidemenu-item icon="title" @click="goAnchor('#title')">标题</emmm-sidemenu-item>
          <emmm-sidemenu-item icon="crumbs" @click="goAnchor('#crumbs')">面包屑</emmm-sidemenu-item>
          <emmm-sidemenu-item icon="form" @click="goAnchor('#form')">表单</emmm-sidemenu-item>
          <emmm-sidemenu-item icon="icon" @click="goAnchor('#icon')">图标</emmm-sidemenu-item>
          <emmm-sidemenu-item icon="toast" @click="goAnchor('#toast')">弹层</emmm-sidemenu-item>
          <emmm-sidemenu-item icon="update" :count="1">最近更新</emmm-sidemenu-item>
        </emmm-sidemenu>
      </emmm-side>
      <emmm-page>

        <div class="content">
            <!--layouts-->
            <h1 id="layouts">布局<span>(待完善)</span></h1>
            <p>效果参照当前页面的布局</p>
            <h2>使用</h2>
            <p class="lang-html">
              <ul>
                <li class="tag">
                  <span class="tag-sign"><</span>
                  <span>emmm-layouts></span>
                  <!--参数-->
                  <span><i>自定义的组件或其他dom结构等</i></span>
                  <!--参数-->
                  <span class="tag-sign"></</span>
                  <span>emmm-layouts></span>
                </li>
              </ul>
            </p>
            <h2>属性</h2>
            <p class="table-wrap">
              <table>
                <tbody>
                  <tr>
                    <th style="width:15%">参数</th>
                    <th style="width:40%">说明</th>
                    <th style="width:15%">类型</th>
                    <th style="width:30%">默认值</th>
                  </tr>
                  <tr>
                    <td>mode</td>
                    <td>可选参数：isometry，等高布局</td>
                    <td>String</td>
                    <td>一</td>
                  </tr>
                </tbody>
              </table>
            </p>
            <!--layouts==end-->
            <!--sidemenu-->
            <h1 id="sidemenu">侧边栏<span>(待完善)</span></h1>
            <p>效果参照当前页面的左侧布局</p>
            <h2>使用</h2>
            <p class="lang-html">
              <ul>
                <li class="tag">
                  <span class="tag-sign"><</span>
                  <span>emmm-sidemenu></span>
                  <br />
                  <span class="tag-sign"> &nbsp &nbsp<</span>
                  <span>emmm-sidemenu-item</span>
                  <span>></span>
                  <!--参数-->
                  <span><i>布局</i></span>
                  <!--参数-->
                  <span class="tag-sign"></</span>

                  <span>emmm-sidemenu-item></span>
                  <br />
                  <span class="tag-sign"> &nbsp &nbsp<</span>
                  <span>emmm-sidemenu-item icon="<i>home</i>"</span>
                  <span>></span>
                  <!--参数-->
                  <span><i>侧边栏</i></span>
                  <!--参数-->
                  <span class="tag-sign"></</span>

                  <span>emmm-sidemenu-item></span>
                  <br />
                  <span class="tag-sign"> &nbsp &nbsp<</span>
                  <span>emmm-sidemenu-item imgSrc="<i>../../static/images/logo.png</i>"</span>
                  <span>></span>
                  <!--参数-->
                  <span><i>侧边栏</i></span>
                  <!--参数-->
                  <span class="tag-sign"></</span>

                  <span>emmm-sidemenu-item></span>
                  <br />
                  <span class="tag-sign"> &nbsp &nbsp<</span>
                  <span>emmm-sidemenu-item :count="<i>1</i>"</span>
                  <span>></span>
                  <!--参数-->
                  <span><i>最近更新</i></span>
                  <!--参数-->
                  <span class="tag-sign"></</span>

                  <span>emmm-sidemenu-item></span>
                  <br />
                  <span class="tag-sign"></</span>
                  <span>emmm-sidemenu></span>
                </li>
              </ul>
            </p>
            <h2>属性</h2>
            <p class="table-wrap">
              <table>
                <tbody>
                  <tr>
                    <th style="width:15%">参数</th>
                    <th style="width:40%">说明</th>
                    <th style="width:15%">类型</th>
                    <th style="width:30%">默认值</th>
                  </tr>
                  <tr>
                    <td>imgSrc</td>
                    <td>自定义图标</td>
                    <td>String</td>
                    <td>一</td>
                  </tr>
                  <tr>
                    <td>icon</td>
                    <td>字体图标</td>
                    <td>String</td>
                    <td>默认值为空，可选参照<a href="javascript:;" @click="goAnchor('#icon')">[icon组件]</a></td>
                  </tr>
                  <tr>
                    <td>:count</td>
                    <td>通知，小红点</td>
                    <td>Number</td>
                    <td>大于0显示，默认值：0</td>
                  </tr>
                </tbody>
              </table>
            </p>
            <!--sidemenu==end-->
            <!--title-->
            <h1 id="title">Title 标题</h1>
            <emmm-title titleType="h1" title="一级标题"></emmm-title>
            <emmm-title titleType="h1" title="一级标题" leftHref="http://weibo.com" leftText="左边的内容" rightText="右边的内容"></emmm-title>
            <emmm-title titleType="h1" title="一级标题"  titleDecs="一个MCN机构内帐号如果存在当机构与旗下帐号产生归属权纠纷或经济纠纷时，若机构满足微博指定条件，可以协助保障机构对成员的权益。">
            </emmm-title>
            <emmm-title titleType="h2" title="二级标题" rightText="右边的内容"></emmm-title>
            <emmm-title titleType="h2" title="二级标题" leftText="左边的链接"  rightText="右边的链接" titleDecs="一个MCN机构内帐号如果存在当机构与旗下帐号产生归属权纠纷或经济纠纷时，若机构满足微博指定条件，可以协助保障机构对成员的权益。">
              <span class="e-title__text" slot="extra">我是跟在标题后面的内容</span>
              <div class="e-title__info">我是自定义在下方的内容</div>
            </emmm-title>
            <emmm-title titleType="h3" title="三级标题" rightText="右边的内容"></emmm-title>
            <h2>使用</h2>
            <p class="lang-html">
                <ul>
                  <li class="tag">
                    <span class="tag-sign"><</span>
                    <span>emmm-title</span>
                    <!--参数-->
                    <span>titleType="<i>h1</i>"</span>
                    <span>title="<i>一级标题</i>"</span>
                    <!--参数-->
                    <span class="tag-sign">></</span>
                    <span>emmm-title></span>
                  </li>
                  <li class="tag">
                    <span class="tag-sign"><</span>
                    <span>emmm-title</span>
                    <!--参数-->
                    <span>titleType="<i>h1</i>"</span>
                    <span>title="<i>一级标题</i>"</span>
                    <span>leftText="<i>左边的内容</i>"</span>
                    <span>leftHref="<i>http://weibo.com</i>"</span>
                    <span>rightText="<i>右边的内容</i>"</span>
                    <span>rightHref="<i>http://weibo.com</i>"</span>
                    <!--参数-->
                    <span class="tag-sign">></</span>
                    <span>emmm-title></span>
                  </li>
                  <li class="tag">
                    <span class="tag-sign"><</span>
                    <span>emmm-title</span>
                    <!--参数-->
                    <span>titleType="<i>h1</i>"</span>
                    <span>title="<i>一级标题</i>"</span>
                    <span>titleDecs="<i>这一段内容是标题的描述文字，样式如上面的示例展示</i>"</span>
                    <!--参数-->
                    <span class="tag-sign">></</span>
                    <span>emmm-title></span>
                  </li>
                  <li class="tag">
                    <span class="tag-sign"><</span>
                    <span>emmm-title</span>
                    <!--参数-->
                    <span>titleType="<i>h1</i>"</span>
                    <span>title="<i>一级标题</i>"</span>
                    <!--参数-->
                    <span class="tag-sign">></span>
                    <span><i>这段是自定义在标题下方的内容</i></span>
                    <span class="tag-sign"></</span>
                    <span>emmm-title></span>
                  </li>
                  <li class="tag">
                    <span class="tag-sign"><</span>
                    <span>emmm-title</span>
                    <!--参数-->
                    <span>titleType="<i>h1</i>"</span>
                    <span>title="<i>一级标题</i>"</span>
                    <!--参数-->
                    <span class="tag-sign">></span>
                    <span><i><code><</code>span slot="extra">这段是自定义的内容<code></</code>span></i></span>
                    <span class="tag-sign"></</span>
                    <span>emmm-title></span>
                  </li>
                </ul>
            </p>
            <h2>属性</h2>
            <p class="table-wrap">
              <table>
                <tbody>
                  <tr>
                    <th style="width:15%">参数</th>
                    <th style="width:40%">说明</th>
                    <th style="width:15%">类型</th>
                    <th style="width:30%">默认值</th>
                  </tr>
                  <tr>
                    <td>titleType</td>
                    <td>标题类型，分别为一级，二级，三级标题，可选值：h1, h2, h3</td>
                    <td>String</td>
                    <td>h1,一级标题</td>
                  </tr>
                  <tr>
                    <td>title</td>
                    <td>标题名称</td>
                    <td>String</td>
                    <td>一</td>
                  </tr>
                  <tr>
                    <td>leftText</td>
                    <td>左边标题后的自定义内容</td>
                    <td>String</td>
                    <td>一</td>
                  </tr>
                  <tr>
                    <td>leftHref</td>
                    <td>左边标题后的自定义内容是否为链接，通常传入跳转的url</td>
                    <td>String</td>
                    <td>不填，则展示非链接形式</td>
                  </tr>
                  <tr>
                    <td>rightText</td>
                    <td>右边标题后的自定义内容</td>
                    <td>String</td>
                    <td>一</td>
                  </tr>
                  <tr>
                    <td>rightHref</td>
                    <td>右边标题后的自定义内容是否为链接，通常传入跳转的url</td>
                    <td>String</td>
                    <td>不填，则展示非链接形式</td>
                  </tr>
                  <tr>
                    <td>titleDecs</td>
                    <td>常用于主标题下方的描述文案</td>
                    <td>String</td>
                    <td>一</td>
                  </tr>
                  <tr>
                    <td>slot</td>
                    <td>可选值：extra，自定义标题后的内容</td>
                    <td>一</td>
                    <td>自定义标题下方的内容</td>
                  </tr>
                </tbody>
              </table>
            </p>
            <!--title==end-->
            <!--crumbs-->
            <h1 id="crumbs">crumbs 面包屑</h1>
            <emmm-crumbs icon="arrow-right">
              <emmm-crumbs-item :to="{ path:'/crumbs/' }">首页</emmm-crumbs-item>
              <emmm-crumbs-item><a href="https://www.weibo.com">公司/机构组织</a></emmm-crumbs-item>
              这里是内容
            </emmm-crumbs>
            <emmm-crumbs icon="arrow-right">
              <emmm-crumbs-item :to="{ path:'/crumbs/' }">首页</emmm-crumbs-item>
              <emmm-crumbs-item>公司/机构组织</emmm-crumbs-item>这里是内容
            </emmm-crumbs>
            <h2>使用</h2>
            <p class="lang-html">
                <ul>
                  <li class="tag">
                    <span class="tag-sign"><</span>
                    <span>emmm-crumbs icon="<i>arrows</i>"></span>
                    <br />
                    <!--参数-->
                    <span class="tag-sign">&nbsp &nbsp <</span>
                    <span>emmm-crumbs-item</span>
                    <span>:to="<i>{ path:' /crumbs/ ' }</i>"</span>
                    <span>> <i>首页</i></span>
                    <span class="tag-sign"></</span>
                    <span>emmm-crumbs-item></span>
                    <!--参数-->
                    <br />
                    <!--参数-->
                    <span class="tag-sign">&nbsp &nbsp <</span>
                    <span>emmm-crumbs-item</span>
                    <span class="tag-sign">></span>
                    <span><i><code><</code>a href="//weibo.com/">公司/机构组织<code></</code>a></i></span>
                    <span class="tag-sign"></</span>
                    <span>emmm-crumbs-item></span>
                    <!--参数-->
                    <br />
                    <!--参数-->
                    <span class="tag-sign">&nbsp &nbsp <</span>
                    <span>emmm-crumbs-item</span>
                    <span>> <i>这里是内容</i></span>
                    <span class="tag-sign"></</span>
                    <span>emmm-crumbs-item></span>
                    <!--参数-->
                    <br />
                    <span class="tag-sign"></</span>
                    <span>emmm-crumbs></span>
                  </li>
                </ul>
            </p>
            <h2>属性</h2>
            <p class="table-wrap">
              <table>
                <tbody>
                  <tr>
                    <th style="width:15%">参数</th>
                    <th style="width:40%">说明</th>
                    <th style="width:15%">类型</th>
                    <th style="width:30%">默认值</th>
                  </tr>
                  <tr>
                    <td>icon</td>
                    <td>设置分隔图标</td>
                    <td>String</td>
                    <td>空，可选参照<a href="javascript:;" @click="goAnchor('#icon')">[icon组件]</a></td>
                  </tr>
                  <tr>
                    <td>separator</td>
                    <td>设置分隔字符</td>
                    <td>String</td>
                    <td>一</td>
                  </tr>
                  <tr>
                    <td>:to</td>
                    <td>路由跳转对象</td>
                    <td>String/Object</td>
                    <td>一</td>
                  </tr>
                  <tr>
                    <td>replace</td>
                    <td>启用路由时是否向history添加记录</td>
                    <td>Boolean</td>
                    <td>false</td>
                  </tr>
                </tbody>
              </table>
            </p>
            <!--crumbs==end-->
            <!--form-->
            <h1 id="form">form 表单</h1>
            <h2>button</h2>
            <emmm-button @click="test()">默认按钮</emmm-button>
            <emmm-button disabled>默认按钮</emmm-button>
            <emmm-button btnType="line" btnColor="orange">线性按钮</emmm-button>
            <emmm-button btnType="fill" btnColor="blue">填充按钮</emmm-button>
            <emmm-button btnType="fill" btnColor="blue" btnSrc="./static/images/icon-home.png">图片按钮</emmm-button>
            <emmm-button iconName="check">ICON按钮</emmm-button>
            <emmm-button btnType="line" btnColor="blue" btnSize="small">小按钮</emmm-button>
            <emmm-button btnType="fill" btnColor="blue" btnSize="large">超大按钮</emmm-button>
            <h2>使用</h2>
            <p class="lang-html">
                <ul>
                  <li class="tag">
                    <span class="tag-sign"><</span>
                    <span>emmm-button></span>
                    <span><i>默认按钮</i></span>
                    <span class="tag-sign"></</span>
                    <span>emmm-button></span>
                  </li>
                  <li class="tag">
                    <span class="tag-sign"><</span>
                    <span>emmm-button disabled ></span>
                    <span><i>无法点击</i></span>
                    <span class="tag-sign"></</span>
                    <span>emmm-button></span>
                  </li>
                  <li class="tag">
                    <span class="tag-sign"><</span>
                    <span>emmm-button btnType="<i>line</i>" ></span>
                    <span><i>线性按钮</i></span>
                    <span class="tag-sign"></</span>
                    <span>emmm-button></span>
                  </li>
                  <li class="tag">
                    <span class="tag-sign"><</span>
                    <span>emmm-button btnType="<i>fill</i>" btnColor="<i>blue</i>" ></span>
                    <span><i>填充按钮</i></span>
                    <span class="tag-sign"></</span>
                    <span>emmm-button></span>
                  </li>
                  <li class="tag">
                    <span class="tag-sign"><</span>
                    <span>emmm-button btnSrc="<i>./static/images/icon-home.png</i>"></span>
                    <span><i>图片按钮</i></span>
                    <span class="tag-sign"></</span>
                    <span>emmm-button></span>
                  </li>
                  <li class="tag">
                    <span class="tag-sign"><</span>
                    <span>emmm-button iconName="<i>check</i>"></span>
                    <span><i>Icon按钮</i></span>
                    <span class="tag-sign"></</span>
                    <span>emmm-button></span>
                  </li>
                  <li class="tag">
                    <span class="tag-sign"><</span>
                    <span>emmm-button btnSize="<i>small</i>"></span>
                    <span><i>小按钮</i></span>
                    <span class="tag-sign"></</span>
                    <span>emmm-button></span>
                  </li>
                  <li class="tag">
                    <span class="tag-sign"><</span>
                    <span>emmm-button btnSize="<i>large</i>"></span>
                    <span><i>大按钮</i></span>
                    <span class="tag-sign"></</span>
                    <span>emmm-button></span>
                  </li>
                </ul>
            </p>
            <h2>属性</h2>
            <p class="table-wrap">
              <table>
                <tbody>
                  <tr>
                    <th style="width:15%">参数</th>
                    <th style="width:40%">说明</th>
                    <th style="width:15%">类型</th>
                    <th style="width:30%">默认值</th>
                  </tr>
                  <tr>
                    <td>markup</td>
                    <td>按钮类型，可选值：error,warning,success [ 暂无 ]</td>
                    <td>String</td>
                    <td>default</td>
                  </tr>
                  <tr>
                    <td>btnType</td>
                    <td>按钮样式，可选值：fill</td>
                    <td>String</td>
                    <td>line</td>
                  </tr>
                  <tr>
                    <td>btnColor</td>
                    <td>按钮颜色，可选值：blue</td>
                    <td>String</td>
                    <td>一</td>
                  </tr>
                  <tr>
                    <td>btnSize</td>
                    <td>按钮尺寸，可选值：large，small</td>
                    <td>String</td>
                    <td>一</td>
                  </tr>
                  <tr>
                    <td>btnSrc</td>
                    <td>添加图片</td>
                    <td>String</td>
                    <td>一</td>
                  </tr>
                  <tr>
                    <td>btnIcon</td>
                    <td>添加icon,可选值：icon【使用svg图标】</td>
                    <td>String</td>
                    <td>font【使用字体图标】</td>
                  </tr>
                  <tr>
                    <td>iconName</td>
                    <td>设置图标</td>
                    <td>String</td>
                    <td>可选参照 <a href="javascript:;" @click="goAnchor('#icon')">[icon组件]</a></td>
                  </tr>
                  <tr>
                    <td>disabled</td>
                    <td>是否禁用</td>
                    <td>Boolean</td>
                    <td>false</td>
                  </tr>
                </tbody>
              </table>
            </p>
            <h2>radio</h2>
            <emmm-radio v-model="radioValue">
              <emmm-radio-item value="男" :checked="true">男</emmm-radio-item>
              <emmm-radio-item value="女">女</emmm-radio-item>
              <emmm-radio-item disabled>我不参与</emmm-radio-item>
            </emmm-radio>
            <div class="demo-box">
              <h3>示例：</h3>
              <p>被选中的是：<span>{{ radioValue }}</span></p>
            </div>
            <h2>使用</h2>
            <p class="lang-html">
                <ul>
                  <li class="tag">
                    <span class="tag-sign"><</span>
                    <span>emmm-radio></span>
                    <br />
                    <!--参数-->
                    <span class="tag-sign">&nbsp &nbsp <</span>
                    <span>emmm-radio-item value="<i>男</i>"</span>
                    <span class="tag-sign">><i>男</i></span>

                    <span class="tag-sign"></</span>
                    <span>emmm-radio-item></span>
                    <!--参数-->
                    <br />
                    <!--参数-->
                    <span class="tag-sign">&nbsp &nbsp <</span>
                    <span>emmm-radio-item value="<i>女</i>"</span>
                    <span class="tag-sign">><i>女</i></span>

                    <span class="tag-sign"></</span>
                    <span>emmm-radio-item></span>
                    <!--参数-->
                    <br />
                    <!--参数-->
                    <span class="tag-sign">&nbsp &nbsp <</span>
                    <span>emmm-radio-item disabled</span>
                    <span class="tag-sign">><i>不可点击</i></span>

                    <span class="tag-sign"></</span>
                    <span>emmm-radio-item></span>
                    <!--参数-->
                    <br />
                    <span class="tag-sign"></</span>
                    <span>emmm-radio></span>
                  </li>
                </ul>
            </p>
            <h2>属性</h2>
            <p class="table-wrap">
              <table>
                <tbody>
                  <tr>
                    <th style="width:15%">参数</th>
                    <th style="width:40%">说明</th>
                    <th style="width:15%">类型</th>
                    <th style="width:30%">默认值</th>
                  </tr>
                  <tr>
                    <td>value</td>
                    <td>设置radio的value值</td>
                    <td>String/Number</td>
                    <td>一</td>
                  </tr>
                  <tr>
                    <td>disabled</td>
                    <td>是否可以选中</td>
                    <td>Boolean</td>
                    <td>false</td>
                  </tr>
                </tbody>
              </table>
            </p>
            <h2>checkbox</h2>
            <emmm-checkbox v-model="checkboxValue">
              <emmm-checkbox-item value="小新">小新</emmm-checkbox-item>
              <emmm-checkbox-item value="风之">风之</emmm-checkbox-item>
              <emmm-checkbox-item value="多美子" disabled>多美子</emmm-checkbox-item>
            </emmm-checkbox>
            <div class="demo-box">
              <h3>示例：</h3>
              <p>被选中的是：<span>{{ checkboxValue }}</span></p>
            </div>
            <h2>使用</h2>
            <p class="lang-html">
                <ul>
                  <li class="tag">
                    <span class="tag-sign"><</span>
                    <span>emmm-checkbox></span>
                    <br />
                    <!--参数-->
                    <span class="tag-sign">&nbsp &nbsp <</span>
                    <span>emmm-checkbox-item value="<i>男</i>"</span>
                    <span class="tag-sign">><i>小新</i></span>

                    <span class="tag-sign"></</span>
                    <span>emmm-checkbox-item></span>
                    <!--参数-->
                    <br />
                    <!--参数-->
                    <span class="tag-sign">&nbsp &nbsp <</span>
                    <span>emmm-checkbox-item value="<i>风之</i>"</span>
                    <span class="tag-sign">><i>女</i></span>

                    <span class="tag-sign"></</span>
                    <span>emmm-checkbox-item></span>
                    <!--参数-->
                    <br />
                    <!--参数-->
                    <span class="tag-sign">&nbsp &nbsp <</span>
                    <span>emmm-checkbox-item value="<i>多美子</i>" disabled</span>
                    <span class="tag-sign">><i>多美子</i></span>

                    <span class="tag-sign"></</span>
                    <span>emmm-checkbox-item></span>
                    <!--参数-->
                    <br />
                    <span class="tag-sign"></</span>
                    <span>emmm-checkbox></span>
                  </li>
                </ul>
            </p>
            <h2>属性</h2>
            <p class="table-wrap">
              <table>
                <tbody>
                  <tr>
                    <th style="width:15%">参数</th>
                    <th style="width:40%">说明</th>
                    <th style="width:15%">类型</th>
                    <th style="width:30%">默认值</th>
                  </tr>
                  <tr>
                    <td>value</td>
                    <td>设置checkbox的value值</td>
                    <td>String/Number</td>
                    <td>一</td>
                  </tr>
                  <tr>
                    <td>disabled</td>
                    <td>是否可以选中</td>
                    <td>Boolean</td>
                    <td>false</td>
                  </tr>
                </tbody>
              </table>
            </p>
            <h2>text</h2>
            <div class="demo-box">
              <p><emmm-input placeholder="默认文本框" value="{inputData.value1}" v-model="inputData.value1"></emmm-input></p>
              <p><emmm-input placeholder="中型文本框" size="medium" v-model="inputData.value2"></emmm-input></p>
              <p><emmm-input placeholder="小型文本框" size="small" v-model="inputData.value3"></emmm-input></p>
              <p><emmm-input placeholder="禁止输入内容" disabled></emmm-input></p>
            </div>
            <div class="demo-box">
              <h3>示例：</h3>
              <p>输入的内容为：<span>{{ inputData }}</span></p>
            </div>
            <h2>使用</h2>
            <p class="lang-html">
                <ul>
                  <li class="tag">
                    <span class="tag-sign"><</span>
                    <span>emmm-input placeholder="<i>默认</i>"</span>
                    <span class="tag-sign">></</span>
                    <span>emmm-input></span>
                  </li>
                  <li class="tag">
                    <span class="tag-sign"><</span>
                    <span>emmm-input placeholder="<i>中型</i>" size="<i>medium</i>"</span>
                    <span class="tag-sign">></</span>
                    <span>emmm-input></span>
                  </li>
                </ul>
            </p>
            <h2>属性</h2>
            <p class="table-wrap">
              <table>
                <tbody>
                  <tr>
                    <th style="width:15%">参数</th>
                    <th style="width:40%">说明</th>
                    <th style="width:15%">类型</th>
                    <th style="width:30%">默认值</th>
                  </tr>
                  <tr>
                    <td>type</td>
                    <td>文本类型，可选值：search,password..</td>
                    <td>String</td>
                    <td>text</td>
                  </tr>
                  <tr>
                    <td>disabled</td>
                    <td>是否可输入</td>
                    <td>Boolean</td>
                    <td>false</td>
                  </tr>
                  <tr>
                    <td>placeholder</td>
                    <td>输入字段初始的提示信息</td>
                    <td>String</td>
                    <td>一</td>
                  </tr>
                  <tr>
                    <td>value</td>
                    <td>表单初始(默认)值</td>
                    <td>String/Number</td>
                    <td>一</td>
                  </tr>
                  <tr>
                    <td>size</td>
                    <td>尺寸，可选值：medium，small【具体表现看示例】</td>
                    <td>String</td>
                    <td>一</td>
                  </tr>
                  <tr>
                    <td>maxlength</td>
                    <td>最大字数</td>
                    <td>Number</td>
                    <td>一</td>
                  </tr>
                </tbody>
              </table>
            </p>
            <h2>textarea</h2>
            <p><emmm-textarea placeholder="测试的内容" :maxlength="20" v-model="textareaValue" ></emmm-textarea></p>
            <div class="demo-box">
              <h3>示例：</h3>
              <p>输入的内容为：<span>{{ textareaValue }}</span></p>
            </div>
            <h2>使用</h2>
            <p class="lang-html">
                <ul>
                  <li class="tag">
                    <span class="tag-sign"><</span>
                    <span>emmm-textarea placeholder="<i>默认</i>" :maxlength="<i>200</i>"</span>
                    <span class="tag-sign">></</span>
                    <span>emmm-textarea></span>
                  </li>
                </ul>
            </p>
            <h2>属性</h2>
            <p class="table-wrap">
              <table>
                <tbody>
                  <tr>
                    <th style="width:15%">参数</th>
                    <th style="width:40%">说明</th>
                    <th style="width:15%">类型</th>
                    <th style="width:30%">默认值</th>
                  </tr>
                  <tr>
                    <td>disabled</td>
                    <td>是否可输入</td>
                    <td>Boolean</td>
                    <td>false</td>
                  </tr>
                  <tr>
                    <td>placeholder</td>
                    <td>输入字段初始的提示信息</td>
                    <td>String</td>
                    <td>一</td>
                  </tr>
                  <tr>
                    <td>value</td>
                    <td>textarea初始(默认)值</td>
                    <td>String</td>
                    <td>一</td>
                  </tr>
                  <tr>
                    <td>maxlength</td>
                    <td>最大字数</td>
                    <td>Number</td>
                    <td>一</td>
                  </tr>
                  <tr>
                    <td>isNum</td>
                    <td>是否显示右下角的字数</td>
                    <td>Boolean</td>
                    <td>true</td>
                  </tr>
                </tbody>
              </table>
            </p>
            <!--form==end-->
            <!--icon-->
            <h1 id="icon">icon 图标</h1>
            <h2>font</h2>
            <ul class="dome-list">
              <li>
                <emmm-icon iconName="check"></emmm-icon>
                <span>check</span>
              </li>
              <li>
                <emmm-icon iconName="arrow-right"></emmm-icon>
                <span>arrow-right</span>
              </li>
            </ul>
            <h2>svg</h2>
            <ul class="dome-list">
              <li>
                <emmm-icon iconType="icon" iconName="check"></emmm-icon>
                <span>check</span>
              </li>
              <li>
                <emmm-icon iconType="icon" iconName="close"></emmm-icon>
                <span>close</span>
              </li>
              <li>
                <emmm-icon iconType="icon" iconName="warn"></emmm-icon>
                <span>warn</span>
              </li>
            </ul>
            <h2>使用</h2>
            <p class="lang-html">
                <ul>
                  <li class="tag">
                    <span class="tag-sign"><</span>
                    <span>emmm-icon iconName="<i>check</i>"</span>
                    <span class="tag-sign">></</span>
                    <span>emmm-icon></span>
                    <br />
                    <span>或：</span>
                    <br />
                    <span class="tag-sign"><</span>
                    <span>i class="<i>e-font e-font-check</i>"</span>
                    <span class="tag-sign">></</span>
                    <span>i></span>
                    <br />
                    <span>svg图标：</span>
                    <br />
                    <span class="tag-sign"><</span>
                    <span>i class="<i>e-icon e-icon-check</i>"</span>
                    <span class="tag-sign">></</span>
                    <span>i></span>
                    <span>注：<i>i</i> 可以是任意标签</span>
                  </li>
                </ul>
            </p>
            <h2>属性</h2>
            <p class="table-wrap">
              <table>
                <tbody>
                  <tr>
                    <th style="width:15%">参数</th>
                    <th style="width:40%">说明</th>
                    <th style="width:15%">类型</th>
                    <th style="width:30%">默认值</th>
                  </tr>
                  <tr>
                    <td>iconType</td>
                    <td>设置图标的类型，可选值：svg</td>
                    <td>String</td>
                    <td>font</td>
                  </tr>
                  <tr>
                    <td>iconName</td>
                    <td>图标的名称</td>
                    <td>String</td>
                    <td>一</td>
                  </tr>
                </tbody>
              </table>
            </p>
            <!--icon==end-->
            <!--toast-->
            <h1 id="toast">toast 弹层</h1>
            <emmm-button @click="toast1">成功的</emmm-button>
            <p class="eventText">纯文本也可以直接添加事件,<a @click="toast2">点我</a></p>

            <h2>使用</h2>
            <p class="lang-html">
                <ul>
                  <li class="tag">
                    <span class="tag-sign"><</span>
                    <span>emmm-icon iconName="<i>check</i>"</span>
                    <span class="tag-sign">></</span>
                    <span>emmm-icon></span>
                    <br />
                    <span>或：</span>
                    <br />
                    <span class="tag-sign"><</span>
                    <span>i class="<i>e-font e-font-check</i>"</span>
                    <span class="tag-sign">></</span>
                    <span>i></span>
                    <br />
                    <span>svg图标：</span>
                    <br />
                    <span class="tag-sign"><</span>
                    <span>i class="<i>e-icon e-icon-check</i>"</span>
                    <span class="tag-sign">></</span>
                    <span>i></span>
                    <span>注：<i>i</i> 可以是任意标签</span>
                  </li>
                </ul>
            </p>

            <h2>属性</h2>
            <p class="table-wrap">
              <table>
                <tbody>
                  <tr>
                    <th style="width:15%">参数</th>
                    <th style="width:40%">说明</th>
                    <th style="width:15%">类型</th>
                    <th style="width:30%">默认值</th>
                  </tr>
                  <tr>
                    <td>type</td>
                    <td>可选值：error,warning,success</td>
                    <td>String</td>
                    <td>一</td>
                  </tr>
                  <tr>
                    <td>content</td>
                    <td>toast文案</td>
                    <td>String</td>
                    <td>一</td>
                  </tr>
                  <tr>
                    <td>mask</td>
                    <td>是否出现蒙层</td>
                    <td>Boolean</td>
                    <td>true</td>
                  </tr>
                  <tr>
                    <td>direction</td>
                    <td>方向</td>
                    <td>String</td>
                    <td>horizontal</td>
                  </tr>
                </tbody>
              </table>
            </p>
        </div>
      </emmm-page>
    </emmm-layouts>
  </div>
</template>
<style lang="postcss">
  @import "../comps/common/styles/home.css";
</style>
<script>
 export default{
   data (){
    return {
        //获取屏幕高度
        getHeight: document.documentElement.clientHeight,
        radioValue:'男',
        checkboxValue:['多美子'],
        inputData:{
          value1:'设置了默认value值',
          value2:'',
          value3:''
        },
        textareaValue:'',
        toastVisible:false
    }
  },
  mounted(){
    const that = this
    window.onresize = () => {
      return (() => {
        window.getHeight = document.documentElement.clientHeight
        that.getHeight = window.getHeight
      })()
    }
  },
  methods:{
    test(data){
      alert(123);
    },
    goAnchor(selector) {
      let anchor = this.$el.querySelector(selector)
      document.documentElement.scrollTop = anchor.offsetTop
    },
    toast1(){
      this.$toast.text({
        type:'success',
        content: '太长会换行呢，15个字以内最好',
        mask: false
      });
    },
    toast2(){
      this.$toast.text({
        type:'error',
        content: '你的操作错误了',
        autoClose: false
      });
    }
  },
  watch: {
    getHeight (val) {
      if(!this.timer) {
        this.getHeight = val
        this.timer = true
        let that = this
        setTimeout(function (){
          that.timer = false
        },400)
      }
    }
  }
 }
</script>
