精华内容
下载资源
问答
  • Vue 下拉菜单

    2018-04-06 02:37:44
    在做一个下拉菜单,如图所示,需要在鼠标移动(非点击)到上图1区域时显示下拉菜单,鼠标移出下图2区域的时候隐藏下拉菜单下拉菜单布局如下: <div class="tab-module" @mouseenter="...

    在做一个下拉菜单,如图所示,需要在鼠标移动(非点击)到上图1区域时显示下拉菜单,鼠标移出下图2区域的时候隐藏下拉菜单。

    下拉菜单布局如下:

    <div class="tab-module" @mouseenter="showDropmenu()" @mouseleave="hideDropmenu()">
        <span>手动组卷</span>
        <div class="tab-dropdown" v-show='dropmenuActive'>
            <div class="link" @click="shiftPage(20)">按章节</div>
            <div class="link" @click="shiftPage(21)">按知识点</div>
        </div>
    </div>
    复制代码

    dropmenuActive是一个bool值用来控制下拉菜单的显示/隐藏。

    展开全文
  • vue下拉菜单

    2019-08-04 21:04:05
    <el-col :span="6"> <el-form-item label="存档点"> <template> <el-select v-model="form.value" placeholder="请选择"> <el-option ...
    <el-col :span="6">
        <el-form-item label="存档点">
            <template>
                <el-select v-model="form.value" placeholder="请选择">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item"
                            :value="item">
                    </el-option>
                </el-select>
            </template>
        </el-form-item>
    </el-col>
    
    getSave: function () {
        axios.post("/filekeyin/searchSave").then((res) => {
            //options=[]
            this.options = res.data;
        })
    },
    

    数据返回的json为

    在这里插入图片描述在这里插入图片描述

    展开全文
  • vue 下拉菜单.vue 径向菜单 (vue-radial-menu) Simple radial menu for vue2 apps. vue2应用程序的简单径向菜单。 安装 (Installation) npm i vue-radial-menu --save npm i vue-radial-menu --save 基本用法 ...

    vue 下拉菜单.vue

    径向菜单 (vue-radial-menu)

    Simple radial menu for vue2 apps.

    vue2应用程序的简单径向菜单。

    安装 (Installation)

    npm i vue-radial-menu --save

    npm i vue-radial-menu --save

    基本用法 (Basic usage)

    For something like this :

    对于这样的事情:

    Image

    <template>
      <div id="app">
        <radial-menu
          style="margin: auto; margin-top: 300px; background-color: white"
          :itemSize="50"
          :radius="120"
          :angle-restriction="180">
            <radial-menu-item 
              v-for="(item, index) in items" 
              :key="index" 
              style="background-color: white" 
              @click="() => handleClick(item)">
              <span>{{item}}</span>
            </radial-menu-item>
          </radial-menu>
          <div style="color: rgba(0,0,0,0.6); margin-top: 16px;">{{ lastClicked }}</div>
      </div>
    </template>
    
    <script>
    import { RadialMenu,  RadialMenuItem } from 'vue-radial-menu'
    
    export default {
      name: 'app',
      components: {
        RadialMenu,
        RadialMenuItem
      },
      data () {
        return {
          items: ['foo', 'bar', 'hello', 'world', 'more', 'items'],
          lastClicked: 'click on something!'
        }
      },
      methods: {
        handleClick (item) {
          this.lastClicked = item;
        }
      }
    }
    </script>

    选件 (Options)

    RadialMenu道具 (RadialMenu props)

    Note that no prop is actually required. Also take note that no color is given to the menu by default, you would do well to add your own class for these kind of things.

    请注意,实际上不需要道具。 另请注意,默认情况下菜单没有颜色,您可以为此类事情添加自己的类。

    Name Type Default Value Description
    angle-restriction Number 180 The maximum angle in a circle for the items to be displayed in. A value of 90 would represent the quarter of a circle, 180 half a circle and so on.
    size Number 50px The size in pixels of the main button to open the menu.
    itemSize Number 36px The size in pixels of menu items.
    rotate Number 0 An angle value to rotate the menu. Positive values will rotate the menu counter clockwise.
    radius Number 100 The radius of the circle to form with the items.
    名称 类型 默认值 描述
    角度限制 180 要显示的项目在圆中的最大角度。值90表示四分之一圆,180表示半圆,依此类推。
    尺寸 50像素 打开菜单的主按钮的大小(以像素为单位)。
    itemSize 36像素 菜单项的大小(以像素为单位)。
    旋转 0 旋转菜单的角度值。 正值将使菜单逆时针旋转。
    半径 100 与项目一起形成的圆的半径。

    RadialMenu事件 (RadialMenu events)

    Name Params Description
    open none Triggered when the menu is opened.
    close none Triggered when the menu is closed.
    名称 参数 描述
    打开 没有 打开菜单时触发。
    没有 菜单关闭时触发。

    RadialMenuItem (RadialMenuItem)

    This component has no props that should be assigned by the user. This component only supports basic events.

    该组件没有应由用户分配的道具。 该组件仅支持基本事件。

    翻译自: https://vuejsexamples.com/simple-radial-menu-for-vue2-apps/

    vue 下拉菜单.vue

    展开全文
  • Vue 下拉菜单组件化

    2020-11-11 18:09:40
    Vue下拉菜单组件化开发 一、新建Vue项目 vue create dropdown 二、清理项目环境 1.删除多余默认组件,只留下App.vue文件 2.清理路由(router),保证routes为空 3.将App.vue文件下清除<router-view/> 如: ...

    Vue 下拉菜单组件化开发

    一、新建Vue项目

    vue create dropdown
    

    二、清理项目环境

    1.删除多余默认组件,只留下App.vue文件

    在这里插入图片描述

    2.清理路由(router),保证routes为空
    在这里插入图片描述

    3.将App.vue文件下清除<router-view/> 如:

    接下来的工作将会在App.vue文件为首页

    三、组件化准备

    1.在src文件夹下新建名为dropdown文件夹

    2.在dropdown文件夹下新建三个vue文件

    1). 	dropdown.vue        为一级盒子
    
    2).    	dropdownMenu.vue    为二级盒子     
    
    3).		dropdownItem.vue    为二级盒子内容
    

    在这里插入图片描述

    四、组件化开发

    第一部分

    1.先在dropdown.vue文件设计一个整体框架

    <template>
      <div class="box">
        <div>
              <!--  此处使用具名插槽 一级按钮   放入按钮  -->
          <slot name="title"></slot>
        </div>
            <!--  此处使用具名插槽   二级盒子  放入需要下拉的内容 -->
        <slot name="dropdown"></slot>
      </div>
    </template>
    
    <script>
      export default {
        name: "dropdown"
      }
    </script>
    
    <style scoped>
      .box {
        display: inline-block; /* 行内块 */
        position: relative; /* 相对定位 */
      }
    </style>
    

    然后在App.vue导入模块

    <template>
      <div id="app">
        <dropdown></dropdown>
      </div>
    </template>
    
    <script>
      import dropdown from './dropdown/dropdown'
      export default {
        name: 'App',
        components: {
          dropdown
        }
      }
    </script>
    
    <style>
    
    #app {
      width: 200px;
      height: 300px;
      margin: 200px auto;
    }
    </style>
    
    

    紧接着在dropdown标签下写入按钮

    <template>
      <div id="app">
        <dropdown>
        <!-- 按钮样式自行修改 -->
          <button slot="title">按钮</button>
        </dropdown>
      </div>
    </template>
    

    运行如下:
    在这里插入图片描述

    第二部分

    接下来是对dropdownMenu的操作

    对于dropdownMenu仅仅只是把他当作一个盒子
    只需要添加一个插槽
    把盒子搭好即可

    <template>
      <div class="dropdown-menu">
        <slot></slot>
      </div>
    </template>
    
    <script>
      export default {
        name: "dropdownMenu"
      }
    </script>
    
    <style scoped>
      .dropdown-menu {
        padding: 8px 0; /* 盒子内边距上下为8px 左右为0 */
        border-radius: 4px;  /* 盒子圆角 */
        border: 1px solid #f2f6fc;  /* 边框为1px 灰色 */
        position: absolute;  /* 绝对定位 */
        right: 0;   /* 在右侧 */
        top: 110%; /* 盒子在按钮下方 */
        background-color: #fff;  /* 背景颜色为白色 */
        box-shadow: 0 2px 4px rgba(0,0,0,0.12),0 0 6px rgba(0,0,0,.04);
        /* 为盒子添加阴影 */
      }
    </style>
    

    第三部分

    对dropdownItem的操作

    <template>
      <div class="dropdown-item">
          <slot></slot>
      </div>
    </template>
    
    <script>
      export default {
        name: "dropdownItem"
      }
    </script>
    
    <style scoped>
     .dropdown-item {
       line-height: 40px; /* 行高40px */
       white-space: nowrap;  /* 不换行 */
       padding: 0 20px; /* 内边距上下为0 左右为20px */
       color: #606266; /* 字体颜色为灰色 */
       cursor: pointer;  /* 鼠标移入为点击样子 */
     }
      .dropdown-item:hover {
        color: #409eff; /* 字体颜色为蓝色 */
        background-color: #ecf5ff; /* 背景颜色为 浅~~蓝色 非常浅就对了 */
      }
    </style>
    

    接下来对App.vue文件进行操作
    导入dropdownMenudropdownItem两个文件,进行注册
    再添加进dropdown标签内

    <template>
      <div id="app">
        <dropdown>
          <button slot="title">按钮</button>
          <dropdown-menu slot="dropdown">
            <dropdown-item>肉蛋葱鸡</dropdown-item>
            <dropdown-item>芜湖~</dropdown-item>
            <dropdown-item>起飞</dropdown-item>
          </dropdown-menu>
        </dropdown>
      </div>
    </template>
    
    <script>
      import dropdown from './dropdown/dropdown'
      import dropdownMenu from "./dropdown/dropdownMenu";
      import dropdownItem from "./dropdown/dropdownItem";
      export default {
        name: 'App',
        components: {
          dropdown,dropdownMenu,dropdownItem
        }
      }
    </script>
    

    运行如下:
    在这里插入图片描述
    问题: dropdown-menu 二级盒子并没有隐藏
    所以我们接下来对dropdown.vue文件添加v-if操作,并对按钮添加一级盒子添加点击事件
    由于slot name = 'title' 的父级div并没有设置宽高,会跟随子级的宽高
    因此,可对div添加点击事件

    <template>
      <div class="box">
        <div @click="showM">
          <!-- 一级盒子   -->
          <slot name="title"></slot>
        </div>
        <!-- 二级盒子-->
        <slot v-if="show" name="dropdown"></slot>
      </div>
    </template>
    
    <script>
      export default {
        name: "dropdown",
        data() {
          return {
            // 默认二级盒子关闭
            show: false
          }
        },
        methods: {
          showM() {
            this.show = !this.show
          }
        }
      }
    </script>
    

    运行如下:
    在这里插入图片描述
    问题:

    1. 点击二级菜单时并没有关闭二级菜单
    2. 点击二级菜单并没有返回值

    解决
    1.对dropdownItem文件添加点击事件

    <template>
      <div class="dropdown-item" @click="itemClick">
        <slot></slot>
      </div>
    </template>
    
    <script>
      export default {
        name: "dropdownItem",
        data() {
          return {}
        },
        methods: {
          itemClick() {
          /* 
          通过this调用当前组件的父级的父级也就是dropdown的showM()方法来
          进行关闭
          */
            this.$parent.$parent.showM()
          }
        }
      }
    </script>
    

    2.返回值
    对App文件里dropdown-item添加value值

    <template>
      <div id="app">
        <dropdown>
          <button slot="title">按钮</button>
          <dropdown-menu slot="dropdown">
            <dropdown-item value="肉蛋葱鸡">肉蛋葱鸡</dropdown-item>
            <dropdown-item>芜湖~</dropdown-item>
            <dropdown-item>起飞</dropdown-item>
          </dropdown-menu>
        </dropdown>
      </div>
    </template>
    
    

    dropdownItem页的操作

    <template>
      <div class="dropdown-item" @click="itemClick(value)">
        <slot></slot>
      </div>
    </template>
    
    <script>
      export default {
        name: "dropdownItem",
        props: ['value'],
        data() {
          return {}
        },
        methods: {
          itemClick(value) {
            this.$parent.$parent.showM()
            // 调用父级的父级(dropdown)的commitClick方法并传如value值
            this.$parent.$parent.commitClick(value)
          }
        }
      }
    </script>
    

    dropdown的操作

        methods: {
          showM() {
            this.show = !this.show
          },
          commitClick(value) {
          // 向父级暴露dropdown事件,并把值传入
            this.$emit('dropdown-item',value)
          }
        }
    

    对App.vue操作

    <template>
      <div id="app">
      <!-- 接收事件  执行changeItem -->
        <dropdown @dropdown-item="changeItem">
          <button slot="title">按钮</button>
          <dropdown-menu slot="dropdown">
            <dropdown-item value="肉蛋葱鸡">肉蛋葱鸡</dropdown-item>
            <dropdown-item>芜湖~</dropdown-item>
            <dropdown-item>起飞</dropdown-item>
          </dropdown-menu>
        </dropdown>
      </div>
    </template>
    
    <script>
      import dropdown from './dropdown/dropdown'
      import dropdownMenu from "./dropdown/dropdownMenu";
      import dropdownItem from "./dropdown/dropdownItem";
      export default {
        name: 'App',
        components: {
          dropdown,dropdownMenu,dropdownItem
        },
        methods: {
          changeItem(e){
          //打印出 dropdown-item传入的value值  
          // 肉蛋葱鸡
            console.log(e)
          }
        }
      }
    </script>
    

    接下来把局部组件该为全局组件
    删除App.vue 里导入的组件

    <template>
      <div id="app">
        <dropdown @dropdown-item="changeItem">
          <button slot="title">按钮</button>
          <dropdown-menu slot="dropdown">
            <dropdown-item value="肉蛋葱鸡">肉蛋葱鸡</dropdown-item>
            <dropdown-item>芜湖~</dropdown-item>
            <dropdown-item>起飞</dropdown-item>
          </dropdown-menu>
        </dropdown>
      </div>
    </template>
    
    <script>
      export default {
        name: 'App',
        methods: {
          changeItem(e){
            console.log(e)
          }
        }
      }
    </script>
    

    在main.js导入组件

    import dropdown from "./dropdown/dropdown";
    import dropdownItem from "./dropdown/dropdownItem";
    import dropdownMenu from "./dropdown/dropdownMenu";
    // 注册组件
    Vue.component('dropdown',dropdown)
    Vue.component('dropdownItem',dropdownItem)
    Vue.component('dropdownMenu',dropdownMenu)
    
    

    运行如下:

    在这里插入图片描述

    以后一点一点优化

    感谢老师和同学的帮助 zg-ui 将会一点一点完善

    至此 下拉菜单组件化开发完毕 ★,°:.☆( ̄▽ ̄)/$:.°★

    展开全文
  • 主要介绍了vue下拉菜单组件(含搜索)的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue下拉菜单选择输入框 @ tillhub / vue-search-filter (@tillhub/vue-search-filter) Vue search input with dropdown for more filters. Vue搜索输入带有下拉列表,用于更多过滤器。 View Demo 查看演示 ...
  • vue下拉菜单选择输入框@ tillhub / vue-search-filter (@tillhub/vue-search-filter)Vue search input with dropdown for more filters.Vue搜索输入带有下拉列表,用于更多过滤器。View Demo 查看演示 Download ...
  • 这篇文章我们一起来实现一个vue下拉菜单组件。像这种基本UI组件,网上已经有很多了,为什么要自己实现呢?其实并不是有意重复造轮子,而是想通过这个过程回顾一下vue组件开发的一些细节和注意事项。为什么选择下拉...
  • 这篇文章我们一起来实现一个vue下拉菜单组件。像这种基本UI组件,网上已经有很多了,为什么要自己实现呢?其实并不是有意重复造轮子,而是想通过这个过程回顾一下vue组件开发的一些细节和注意事项。为什么选择下拉...
  • vue下拉菜单2、

    2019-11-11 20:30:55
    上一章说到vue已经完全接收了后台发送好的数据,接下来就是针对vue展示的操作界面。
  • vue下拉菜单4、

    2019-11-12 08:43:17
    上一章我们说到,vue前台用@click点击事件已经将用户选择后添加的数据通过POST方式提交给后台,那么这章就来说说后台django和反序列化的写法。 前台已经发送过来了数据,那么怎么django中怎么接收呢 在视图函数中...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 545
精华内容 218
关键字:

vue下拉菜单

vue 订阅