我们的社区前端工程用的是element组件库，后台管理系统用的是iview，组件库都很棒，但是日期、时间选择器没有那种“ 年份 - 月份 -天数 ” 联动选择的组件。虽然两个组件库给出的相关组件也很棒，但是有时候确实不是太好用，不太明白为什么很多组件库都抛弃了日期联动选择。因此考虑自己动手做一个。 将时间戳转换成日期格式 // timestamp 为时间戳 new Date(timestamp) //获取到时间标砖对象，如：Sun Sep 02 2018 00:00:00 GMT+0...
Draggable为基于Sortable.js的vue组件，用以实现拖拽功能。 具体说明，请参考：学习链接 npm官方演示：vuedraggable特性： 支持触摸设备支持拖拽和选择文本支持智能滚动支持不同列表之间的拖拽不以jQuery为基础和视图模型同步刷新和vue2的国度动画兼容支持撤销操作当需要完全控制时，可以抛出所有变化可以和现有的UI组件兼容使用 安装： npm install vuedraggable页面引入： import draggable from vuedraggabledata定义数据进行模...
Vue 2.0 在发布之初，就以其优秀的运行时性能著称，你可以通过这个第三方 benchmark 来对比其他框架的性能。Vue 使用了 Virtual DOM 来进行视图渲染，当数据变化时，Vue 会对比前后两棵组件树，只将必要的更新同步到视图上。 Vue 帮我们做了很多，但对于一些复杂场景，特别是大量的数据渲染，我们应当时刻关注应用的运行时性能。 本文仿照Vue Cookbook 组织形式，对优化 Vue 组件的运行时性能进行阐述。 基本的示例 在下面的示例中...
之前也写过这个小组件，最近遇到select下加搜索的功能，所以稍微完善一下。 效果图：子组件 DROPDOWN.VUE<template><div class="vue-dropdown default-theme"><div class="cur-name" :class="isShow ? show:" @click="isShow =! isShow">{{itemlist.cur.name}}</div><div class="list-and-search" :class="isShow?on:"><div class="search-module clearfix" v-show="isNeedSearch"><input class="search-text" @keyup=search($even...
写作用域插槽之前，先介绍一下Vue中的slot内容分发：如果<child-component></child-component>标签之间没有插入那两个p标签的话，页面会显示子组件模板中定义的“<p>父组件如果没有插入内容，我将被显示</p>”这一则内容，但如果<child-component></child-component>标签之间有插入内容的话，则子组件模板中的<slot></slot>标签以及之间的内容都会被替换成<child-component></child-component>标签之间插入的内容。 这里子组件<slo...
本文介绍了vue组件从开发到发布的实现步骤，分享给大家，具体如下：组件化是前端开发非常重要的一部分，从业务中解耦出来，可以提高项目的代码复用率。更重要的是我们还可以打包发布，俗话说集体的力量是伟大的，正因为有许许多多的开源贡献者，才有了现在的世界。 不想造轮子的工程师，当不了合格的搬运工 。让我们来了解一下vue组件从开发到打包发布流程，并配置Github主页。 本文以 vue-clock2 组件为例，欢迎star _~~ 项目地址...
步骤创建 vue 的脚手架npm install -g @vue/cli vue init webpack绑定 git 项目cd existing_folder git init git remote add origin http://gitlab.alipay-inc.com/ampg/my-projec.git git add . git commit git push -u origin master写组件创建组件 src/components/xxx.vue 例如： <template><div class="hello"><h1>{{ msg }}</h1><h2>Essential Links</h2></div> </template><script> export default {name: HelloWorld,data (...
组件传参通过给组件传递参数, 可以让组件变得更加可扩展, 组件内使用props接收参数 export default {props: [options],data(){return {}} }但是这个方法有局限性, 例如我写了一个对话框组件, 对话框的内容是自定义的 如果我只是显示文字的话, 我可以简单的将字符串传进去props: [message] 但是如果需要在其中添加一个按钮的话, 这种方法就显得很笨重了, 所以我们用另一种办法 插槽 slot 插槽slot的使用就像它的名字一样, 在组件内定...
前提：1.会vue基础，以及vue的组件(官网：https://cn.vuejs.org/v2/guide/components.html)相关的基础。 因为本文主要是讲如何把一个vue组件做成npm包并发布。 分为2大步骤： 一.按照相应格式写我们的vue代码（就如同写一个jquery插件时、有其固定的格式一样）。 二.发布到npm上的流程 一、书写一个vue组件 不用脚手架，我们自己从头开始做起，因为脚手架会附带很多没用的东西。 就做一个最简单的vue组件：就是传入用户名字，页面打...
子组件能够通过自身的props选项获取父组件上的数据，但是在默认情况下，props是单向绑定的---当父组件数据（属性）发生变化的时候会传递给子组件，引起子组件的变化，但不能反过来并且不允许子组件直接改变父组件的数据，会报错的。例如： 也就是说当通过一种方法改变父组件数据的时候，子组件与之相关联的props数据也会发生改变，从而影响子组件，但是子组件直接改变从父组件拿过来的props数据却不能影响父组件的原始数据。也就是...
本文实例为大家分享了vue组件tabbar的具体使用方法，供大家参考，具体内容如下 1.App.vue <!-- 入口文件 --> <template><div id="app"><!-- 视图层 --><router-view></router-view><!-- 底部选项卡 --><tabbar @on-index-change="onIndexChange" v-if="tabbarShow"><tabbar-item selected link="/home"><img slot="icon" src="./assets/img/ic_tab_home_normal.png"><img slot="icon-active" src="./assets/img/ic_tab_home_active...
Scoped CSS Scoped CSS规范是Web组件产生不污染其他组件，也不被其他组件污染的CSS规范。 vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素 它是通过使用PostCSS来改变以下内容实现的: <style scoped> .example {color: red; } </style><template><div class="example">hi</div> </template>渲染结果： <style> .example[data-v-f3f3eg9] {color: red; } </style><template><div class="example" d...
想要封装好一个自己的vue组件，一定要熟练掌握这三个技能 父组件 —> 子组件传值（props） 子组件 —> 父组件传值（$emit） 以及插槽（slot） 对于一个独立的组件来说 props是用来为组件内部注入核心的内容； $emit用来使这个独立的组件通过一些逻辑来融入其他组件中。 举个具体点的例子，假如你要做一辆车，车轮是要封装的一个独立组件，props指的就是根据整个车的外形你可以给轮子设置一些你想要的且符合车风格的花纹，图案等； ...
正文开始 Vue 开发插件 我们可以先查看Vue的插件的开发规范 我们开发的之后期望的结果是支持 import、require 或者直接使用 script 标签的形式引入，就像这样：ps: 这里注意一下包的名字前缀是 unisoft ，组件的名字前缀是 uniimport UniSoftUI from unisoft-ui; // 或者 const CustomUI = require(unisoft-ui); // 或者 <script src="..."></script> Vue.use(UniSoftUI); 回到顶部 构建一个 Vue 项目 开发组件我们使用 webpack-si...
Vue是一款比较流行的JS库，本文为大家介绍一些Vue组件,包括UI组件,开发框架,服务端,辅助工具,应用实例,Demo示例等开源项目 一、Vue常用UI组件 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和WeUI的组件库 iview ★5801 - 基于 Vuejs 的开源 UI 组件库 mint-ui ★5517 - Vue 2的移动UI元素 vue-material ★2790 - 通过Vue Material和Vue 2建立精美的app应用 muse-ui ★2611 - 三端样式一致的响应式 UI...