前端小白——VUE修炼之路

@前端小妖精

Vue组件：下拉菜单（Dropdowns）

vue的Dropdown组件：允许用户从下拉菜单的系列选项中选择一个值。

简单的文件下拉菜单：

<template>
<div class="ui dropdown">
  <div class="text">file</div>
  <!-- 下拉菜单 -->
  <i class="dropdown icon"></i>
  <div class="menu">
    <div class="item">New</div>
    <div class="item">
      <span class="description">ctrl + o</span>
      Open...
    </div>
    <div class="item">
      <span class="description">ctrl + s</span>
      Save as...
    </div>
    <div class="item">
      <span class="description">ctrl + r</span>
      Rename
    </div>

    <!-- 分割线 -->
    <div class="divider"></div>

    <div class="item">
        <!-- 子菜单 -->
      <i class="dropdown icon"></i>
      Publish To Web
      <div class="menu">
        <div class="item">Google </div>
        <div class="item">Baidu</div>
      </div>
    </div>
  </div>

</div>
</template>

Search Selection:允许用户输入+搜索

<template>
<select class="ui search dropdown">

  <option value="">Day</option>
  <option value="Monday">Monday</option>
  <option value="Tuesday">Tuesday</option>
  <option value="Wednesday">Wednesday</option>
  <option value="Thursday">Thursday</option>
  <option value="Friday">Friday</option>

</select>

</template>

Multiple Selection：实现多选功能

<template>
<select name="skills" multiple="" class="ui fluid dropdown">
    <option value="">Skills</option>
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JS</option>
</select>
</template>

Multiple Search Selection：输入+多选

<template>
<select class="ui fluid search dropdown" multiple="">
    <option value="">Skills</option>
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JS</option>
</select>
</template>

利用Dropdown Pointing实现导航栏：

在这里插入代码片<template>
<div class="ui menu">
  <a class="item">
      首页
  </a>
  <a class="item">
    系统功能
  </a>
  <a class="item">
    联系我们
  </a>
  <div class="ui pointing dropdown link item">
    <span class="text">个人空间</span>
    <i class="dropdown icon"></i>
    <div class="menu">
      <div class="item">
        <i class="dropdown icon"></i>
        <div class="item">个人信息</div>
        <div class="item">相册</div>
        <div class="divider"></div>
        <span class="text">操作</span>
        <div class="menu">
          <div class="item">修改密码</div>
          <div class="item">注销</div>
          <div class="item">更换账号登陆</div>
        </div>
      </div>
    </div>
  </div>
</div>
</template>