vue dropdown 怎么用

vue之下拉菜单Dropdown的使用

通过组件slot来设置下拉触发的元素以及需要通过具名slot为dropdown 来设置下拉菜单.默认情况下,下拉按钮只要hover即可,无需点击也会显示下拉菜单. <el-dropdown> <span class="el-dropdown-link"> 下拉菜单<i class="el-icon-arrow-down el-icon--right"></i> </span> <el-dropdown

Vue.js 带下拉选项的输入框（Textbox with Dropdown）组件

带下拉选项的输入框 (Textbox with Dropdown) 是既允许用户从下拉列表中选择输入又允许用户自由键入输入值.这算是比较常见的一种 UI 元素,可以为用户提供候选项节省操作时间,也可以给可能存在的少数情况提供适配的可能. 本来想着这个组件比较常见应该已经有比较多现成的例子可以直接应用,但是搜索了一圈发现很多类似的组件都具备了太多的功能,例如搜索,多选等等 (简单说:太复杂了!).于是就想着还是自己动手写一个简单易用的,此处要感谢肥老板在我困惑时的鼎力相助. 这个 UI 元素将被用

窥探Vue.js 2.0

title: 窥探Vue.js2.0 date: 2016-09-27 10:22:34 tags: vue category: 技术总结 --- 窥探Vue.js2.0 令人兴奋的Vue.js 2.0正式版发布了.新的VUE框架有重大的改进,添加了一些新的特性,比如 Virtual-DOM,Server Side Rendering(服务端渲染),支持 JSX/Hyperscript 语法等,并去掉了一些已有的方法. 新的特性 Virtual DOM 虚拟DOM 是一个真正DOM的抽象.轻量级

脚手架搭建的vue项目里引入jquery和bootstrap

引入jquery: 1.在cmd输入:npm install jquery,回车,等待.. 2.在webpack.base.conf.js里进行如下操作: 3.在webpack.prod.conf.js里进行如下操作: 4.在入口文件里引入: 不知道是不是jquery版本的问题,在重构以前写的页面时,通过在.vue文件里引入js的方式将写好的js引入(该js文件里用了jquery插件),部分功能有问题引入bootstrap 参照网上的方式进行了实践,生效了. 主要在配置文件里添加了两个配置文件

Vue.js组件之联动下拉框

Html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下拉框</title> <link href="../public/stylesheets/bootstrap.min.css" rel="stylesheet" type="text/c

Vue 国际化 vue-i18n 用法详解

vue-i18n 仓库地址:https://github.com/kazupon/vue-i18n 兼容性: 支持 Vue.js 2.x 以上版本安装方法:(此处只演示 npm) npm install vue-i18n 使用方法: 1.在 main.js 中引入 vue-i18n (前提是要先引入 vue) import VueI18n from 'vue-i18n' Vue.use(VueI18n) 2.准备本地的翻译信息 const messages = { zh: { message:

vue中引入jQuery和bootstrap

一.引入jQuery: 首先在当前项目的根目录下(就是与package.json同目录),运行命令npm install jquery --save-dev 这样就将jquery安装到了这个项目中.(其他的类似,如下图) 然后修改webpack.base.conf.js两个地方: 其一:加入var webpack = require("webpack"): 其二:在module.exports的里面加入 plugins: [ new webpack.optimize.Comm

使用 Vue 开发 scrollbar 滚动条组件

Vue 应该说是很火的一款前端库了,和 React 一样的高热度,今天就来用它写一个轻量的滚动条组件: 知识储备:要开发滚动条组件,需要知道知识点是如何计算滚动条的大小和位置,还有一个问题是如何监听容器大小的改变,然后更新滚动条的位置: 先把样式贴出来: .disable-selection { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: n

vue项目中遇到的那些事。

前言有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vue2 + vuex + vue-router + webpack + ES6/7 + element-ui + vue-baidu-map + i18n + vue-awesome-swiper 做项目时总是有一些思考和踩过的坑,对以后有一定的帮助,今天就来写写做vue项目遇到的那些事. 假如你正准

Vue 可输入可下拉组件的封装

由于业务需要,需要一个可输入也可下拉的组件,看了iview没有现成的组件用,就自己封装了个小组件~~ 组件input-select.vue代码: <template> <div class="input-container">  <Input class="input-number" v-model="inputData" @

前端MVC Vue2学习总结（八）——Vue Router路由、Vuex状态管理、Element-UI

一.Vue Router路由二.Vuex状态管理三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint UI . Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库,它面向企业级的后台应用,能够帮助你快速地搭建网站,极大地减少研发的人力与时间成本. Element,一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库官网:http://element.ele

python 全栈开发，Day92(编程式的导航,vue页面布局,marked包的使用)

昨日内容回顾 1. 组件间的传值 1. bus --> 空Vue对象通过向bus对象抛出自定义事件的方式在组件间传递信息 2. 注意事项: 1. bus.$on()应该在组件mounted(挂载在页面上)的时候就执行 2. this对象 2. Vue实例的生命周期钩子函数(8个) 1. beforeCreate data属性光声明没有赋值的时候 2. created data属性完成了赋值 3. beforeMount 页面上的{{name}}还没有被渲染成真正的数据 4. mounted 页

python 全栈开发，Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)

昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue({ el: '#app' }) 2. 注册局部组件 var app = new Vue({ el: '#app', components:{ 局部组件名:{ template: `...` } } }) 3. 传值 1. 父组件 --> 子组件 1. 父组件通过 v-bind:变量='值' 2.

python 全栈开发，Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)

一.bootstrap组件无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件组件:html css js 组件包含插件面版虽然不总是必须,但是某些时候你可能需要将某些 DOM 内容放到一个盒子里.对于这种情况,可以试试面板组件. 基本实例默认的 .panel 组件所做的只是设置基本的边框(border)和内补(padding)来包含内容. 带标题的面版通过 .panel-heading 可以很简单地为面板加入一

vue + vue-router+vuex+elementUI开发环境搭建

先在npm中安装vue脚手架, //先安装国内镜像源 npm install -g cnpm --registry=https://registry.npm.taobao.org //安装vue cnpm install --global vue-cli //创建一个项目 vue init webpack my-project //安装依赖 cd my-project cnpm install //加入vue-router cnpm install vue-router --save //加入v

vue.js精讲01

笔记及源码地址 : https://github.com/wll8/vue_note 01 2017-09-13 view一个 mvvm框架(库),和 ag 类似.比较小巧,容易上手. mvc: mvp mvvm mvx(mv*) vue 和 ag 的区别. 不用纠结什么好,项目适合什么就用什么. vue 简单中文文档指令: v-xxx 例子: html + json + vue实例维护: 个人适合: 移动 ag 上手难英文文档指令: ng-xxx 例子: 把所有属性和方法挂到 $s

Vue + Element UI 实现权限管理系统（功能组件封装）

组件封装为了避免组件代码的臃肿,这里对主要的功能部件进行封装,保证代码的模块化和简洁度. 组件结构组件封装重构后,试图组件结构如下图所示代码一览 Home组件被简化,包含导航.头部和主内容三个组件. Home.vue <template> <div class="container">  <MenuBar></MenuBar>  <HeadBar&g

Vue + Element UI 实现权限管理系统（优化登录流程）

完善登录流程 1. 丰富登录界面 1.1 从 Element 指南中选择组件模板丰富登录界面,放置一个登录界面表单,包含账号密码输入框和登录重置按钮. <template> <el-form :model="loginForm" :rules="fieldRules" ref="loginForm" label-position="left" label-width="0px" class

vue从入门到女装？？：从零开始搭建后台管理系统（二）用vue-docute生成线上文档

教程 vue从入门到女装??:从零开始搭建后台管理系统(一)安装框架一个系统开发完成了总要有操作说明手册,接口文档之类的东西吧?这种要全部纯手写就很麻烦了,可以借助一些插件,比如: vue-docute vue的官方文档就是用这个生成的呢~ 官方文档==>docute 我的示例demo==>demo demo源码==>code 下面进入正题,开始学习使用这个好用的插件吧~ 1.安装方法1 npm 安装 npm: npm i -g docute-cli docute init ./do

Vue + Element UI 实现权限管理系统前端篇（七）：功能组件封装