n3-components/n3-components

N3-components , Powerful Vue UI Library.

N3-components - Powerful Vue Library.

N3 components library is built with Vue.js, is a powerful library for frontend or full-stack engineers to build web pages quickly.

Home Page | 中文说明 | Documents

Introduction

N3 components applys oneself to structure a great ecological circle of developers using Vue.js. Supporting as follows:

• More than 60 components. See Here

• Personality Of Style.

• UMD.

• Using ES6.

NPM

Link：https://www.npmjs.com/package/N3-components

npm install N3-components --save-dev

CNPM

Link：https://npm.taobao.org/package/N3-components

cnpm install N3-components --save-dev

CDN

• js Link：https://unpkg.com/N3-components@version/dist/index.min.js (Notice the version)
• css Link：https://unpkg.com/N3-components@version/dist/index.min.css (Notice the version)

Quick Start

You can install components for your global environment.

import Vue from 'vue'
import N3Components from 'N3-components'
import 'N3-components/dist/index.min.css'

// install N3
Vue.use(N3Components)

// for English  (default chinese)
// version 2.2.0 or later
Vue.use(N3Components, 'en')

You can also import single component when needed.

import Vue from 'vue'
import N3Components from 'N3-components'
import {n3Alert} from N3Components

// set language  
// window.n3Locale = 'en'
//

theme customization

// default 
import 'N3-components/src/style/default.less' 

// theme customization
import 'your-theme.less' 

your-theme.less

@import 'N3-components/src/style/common.less' 

/*base color*/
@whiteColor: #fff;
@blackColor: #000;
@lightBlackColor: #333;
@grayColor: #ccc;
@weightGrayColor: #999;
@lightGrayColor: #eee; 
@lightColor: #f9f9f9; 

/*font color*/
@fontColor: #555;

/*theme color*/
@primaryColor: #41cac0;
@primaryColorhover: #39b2a9;
@hoverColor:rgba(65, 202, 192, 0.05);

/*extend color*/
@successColor: #19d567;
@successColorhover: #30d073;

@infoColor: #2db7f5;
@infoColorhover: #43bcf3;

@dangerColor: #f50;
@dangerColorhover: #f9702b;

@warningColor: #fa0;
@warningColorhover: #f5b73b;

Requirements

• vue
• vue-focus
• velocity-animate

Discussing

• submit issue
• email: [email protected]
• gitter:
• QQ Group: 556286036
• QQ Group Qrcode:

Contribute

Contribute

Change log

Change Log

License

MIT

n3-components's Issues

What License is this under?

Please clarify your licensing.

n3-data-table中，如何在轮询重新设置source之后，保留多选框选中状态？

  var test = setTimeout(function() {
    vm.source = [{
      key: '1',
      name: '小白',
      age: 25,
      department: '技术1'
    }, {
      key: '2',
      name: '小黑',
      age: 33,
      department: '技术2'
    }, {
      key: '3',
      name: '小红',
      age: 12,
      department: '技术3'
    }]
  }, 5000);

在定时器触发之前选中的多选框，触发之后不是选中状态。
先保持选中状态，该怎么办？

Vue dependency version

vue dependency in package.json file is ^2.3.6, which is not released yet and raises an error in on npm install.

There is any reason to that version?

控件很多 运行一下 也很稳定 加油！

Button点击时候顶部会有轻微闪烁

您好，一套很nice的组件库，一点小小建议，发现Button点击时候顶部会有轻微闪烁，不知道是不是设计成这样的，但给人感觉有点小小不协调，加油~

cnpm装不了了

老是提示404

名字直接叫VueUi不挺好的吗

因为发现自己想找的时候找半天才找到，如果改名字会不会更容易被发现呢

tabs on-change示例

n3-tabs标签内 :on-change="函数名"

function(index,el){}
index 为被点击序号

n3-page needs `v-model` or `API` to change the value.

Parent components now can not change the value of n3-page.

npm安装失败

npm版本 3.10.8
node版本 6.4.0
系统版本 windows10

npm install N3-Components --save
安装失败，报告404

npm install n3-components --save
安装失败，报告404

npm install N3-components --save
安装成功。。。。

Tree 组件有问题？

错误如下：

Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <N3TreeNode>
       <N3Tree> at src/Tree/n3Tree.vue
         <N3TreeDocs> at docs/example_en/n3TreeDocs.md
           <N3Column> at src/Layout/n3Column.vue
             <N3Row> at src/Layout/n3Row.vue
               <N3Container> at src/Layout/n3Container.vue
                 <N3Docs> at docs/example_en/n3Docs.vue
                   <Root>

节点选中的问题

树动态加载的情况，当你选择节点时，它的第一级子节点可以被选中，但再向下级子节点是选不中的，这个是否考虑可以改一下。

弹出框有问题

n3Modal.vue:133 Uncaught ReferenceError: prefixCls is not defined
N3Modal.vue 133

transition can't use standalone

I use webpack to import each component independently in order to reduce my project , but the components.js didn't export transition component and it can't be single imported in webpack because webpack has exclude node_modules.

I think it may be nice if we split transition install and let it exported in components.

Open/Close Modal

在文档处没有给出怎样去open／Colse Modal, 我在查阅你的源码时才知道是采用open() 这样的函数方式来打开的；文档上给出的Global common modal说明； 亢了我去看源码～～；麻烦完善下文档，节省后来者的宝贵时间。thanks

布局如何做到响应式呢？

布局中有 col 和 mode 属性。但是感觉这里的mode只能设置一个设备大小吧？
那么如何实现响应式呢？不能做到xs的col是12，md的col是6

electron-vue

I have a blank installation of electorn-vue https://github.com/SimulatedGREG/electron-vue and have just installed n3 and when I come to use my first n3 component i get the following error:
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

数据表格怎么隐藏checkbox那一列呢

如果想隐藏表格中的checkbox列，请问怎么处理？谢谢

n3-datetimepicker控件

n3-datetimepicker控件里，我想设置可选时间范围为过去时间到当前时间，disable掉未来的时间段，应该采用什么参数，进行何种设置

Messagebox

Message box service

如何在n3-data-table的最后一列放置一个Component

最后一列是常见的操作列，render方法能否不返回字符串而是直接返回一个Component

        {
          title: '操作',
          render(){
            return TableButtonGroup;
          }
        }

TableButtonGroup是上面import的一个.vue文件
这样会在表格里渲染一个[Object object]，似乎是必须返回字符串的样子？

多选框group的问题

n3-checkbox-group的options中value的值只能是字符串，Number类型应该也是可以的吧

model in n3-checkbox-group and n3-radio-group

hi,

i noticed that in n3-checkbox-group and n3-radio-group the model is not used when initializing the component. i have to set selected attribute manually.
is this desired or can it be fixed?

<template>
<n3-checkbox-group v-model="checklist">
  <n3-checkbox label="one">one</n3-checkbox>
  <n3-checkbox label="two">two</n3-checkbox>
</n3-checkbox-group>
{{checklist}} -- corresponds to the checked checkboxes
</template>
<script>
export default {
  data() {
    checklist: ['one'], // this will not set first checkbox to checked. :(
  }
}
</script>

建议 n3Panel 等组件的 header 属性使用具名 slot 实现

使用 slot 范式可以解决目前 header 不能插入DOM节点的问题，如：

<template lang="jade">
  n3-panel
    div(slot="header")
      span 我是 panel-header，是一个自由的DOM节点。
    div 我是 panel-body。
</template>

如果有这个需求，我可以贡献 PR 。

layout中offset渲染后className没有布局模式

渲染后的class是n3-col-offset-x ， 没有布局模式md、xs……，样式无效。

通过cooking构建项目，然后npm i的问题

我通过cooking create project
使用的是Vue2
然后
cd project
npm i N3-components
然后检查并安装了依赖项。

main.js中如下

import Vue from 'vue';
import N3Components from 'N3-components';
import App from './app';

Vue.use(N3Components);

new Vue({ // eslint-disable-line
  el: '#app',
  render: h => h(App)
});

然而在 app.vue 中却无法使用N3的组件
比如 <n3-button badge='2'>button</n3-button>是无效的。
请问我哪儿出现了问题？

Changecenter 用户来支持一下

@zhangking 怎么没挂到本厂下面？:)

hello ,it‘s for vue1.x or 2.x?

can N3 support vue2.0

datatable的多个过滤选项是否有联动过滤的功能

runtime-only build of Vue

Hi, i'm getting this error message as soon as i try to use any component of N3

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

application.js

import Vue from 'vue'
import N3Components from 'N3-components'
N3Components.install(Vue, 'en');
import App from './app.vue'

const app = new Vue({
  el: '#app-container',
  render: h => h(App)
});

app.vue

<template>
    <n3-button>button</n3-button>
</template>

<script>
    export default {

    }
</script>

CommonJS export in locale

Hi, try to use your library and got an exception at

Cannot assign to read only property 'exports' of object '#'

This error occurs because of commonJS export in src/locale/*.js modules.
If i change module.exports to export default in these files all works fine.

日期，时间选择器无法清空

树的:checked-keys.sync的问题

树的:checked-keys.sync，当我通过事件改变选中数据时，页面上的选中效果并没有改变，这个是否也需要改一下。

Todo List

• Datatable 更详细的样例和实践

Uncaught TypeError: Cannot read property 'addEventListener' of undefined(…)

在使用“下拉框”组件时，想修改slot="trigger"为slot="hover"，于是报错：

<n3-dropdown :show.sync="show">
    <div slot="hover">
        <n3-icon type="user"></n3-icon>
        &nbsp;&nbsp;{{ user.name }}
        <n3-icon :type="show?'angle-up' : 'angle-down'" ></n3-icon>
    </div>
    <li><a href="/home">工作台</a></li>
    <li><a href="/logout">退出登录</a></li>
</n3-dropdown>

请问怎么修改成 hover 时，下拉框展开

数据表格

数据表格 search 怎么不能 隐藏

input height & width & backgroup

Input 那个组件用起来与实际上的需求有点出入， 查阅教程文档没有发现该如何去定义input的height、width 、background 等属性，建议把这个功能点加上去好点

Better webpack configuration for improved integration in projects

This webpack configuration is problematic mainly because dev and prod should have their own file for better integration in a project.
For example, styles should be extracted in a css file in production mode.
I can show my configuration files as example if you want.

密码输入框

亲，有没有密码的输入框空间？

支持npm安装和使用

达到的效果

npm i N3-Components

// 安装完毕之后直接引用
import N3Components from 'N3-Components'

支持！vue大法好

顺便安利我学长的组件库 https://github.com/creatshare/vue-mui 嘻嘻

1.1.6版本中，data-table组件中选择框有bug？

1.1.6版本中的table组件，选择框好像有bug。当有多个框选中时，点击其中任意一个，其他框取消选中，而不是点击的框!

Any plans for Vue 2.0 support?

Hi.

Vue 2.0 is almost here, are you going to support it any time soon?

Bug with Datepicker and custom format

Hi,

There is a strange UI behavior when custom date format is setted.
It seems like UI logic is still relying on 'MM-dd-yyyy' format instead of using the custom one.
You can try on this fiddle demonstrating the bug.

Slider component does not work properly on mobile

支持,加油,vue越来越美好

赞。。。。！！！

https://github.com/FE-Driver/vue-beauty
我们团队做了一个ant design风格的 目前还不是很完善。。。

n3Uploader选择文件上传，再次选择一个文件，此次会连带上次选择的文件再上传一遍

Select: case-insensitive search

could you please provide case-insensitive search for <n3-select search> element, i believe that would improve UX a lot.

The compatibility problems of IE 9

Q: requestAnimationFrame (IE 10+) is undefined.

A: rewrite window.requestAnimationFrame

Progress: handling

---

Q: $el.xxx.classList is undefined or null

A: element class handler for IE9.

Progress: Fixed

---

Q: datetimepicker displays NaN NaN

A: Unkown

Progress: Checking

---

Q: n3Accordion can't toggle normally.

A: Unkown

Progress: Checking

---

Q: n3Tree can't open automatically

A: v-show and v-if can't run normally.

Progress: Handling

---

Q: n3-step style isn't siutable

A: Unkown

Progress: Checking