elemefe / element Goto Github PK
View Code? Open in Web Editor NEWA Vue.js 2.0 UI Toolkit for Web
Home Page: https://element.eleme.io/
License: MIT License
A Vue.js 2.0 UI Toolkit for Web
Home Page: https://element.eleme.io/
License: MIT License
通过npm install element-ui@next ,引进项目时, 在window10下运行时会报如下错:
Failed to decode downloaded font: http://localcaiwu.soouya.com/dist/fonts/element-icons.eot?b176c7brecoverDebt:1 OTS parsing error: invalid version tag导致每次热更新都很慢,有时候会热更新失效
1.0.0-rc.4
macOS/Chrome 53
2.0.0-rc.6
具体见: http://element.eleme.io/#/component/table rc3无此问题
表头跟随滚动
表头不能跟随滚动, rc3无此问题
有计划做走马灯和树选择器么
win10
一堆依赖没有写到package.json里面。。。在一个一个写入并安装之后。。。终于不再报错。。打开浏览器 输入地址 额 一片空白
如题,这样处理后,根据路由激活默认菜单时,菜单就可以自动展开到对应节点。
npm run dist后却找不到类似/dist/的文件夹,那build之后的文件要去哪里找?
1.0.0-rc.4
2.0.0-rc.6
完全使用官网demo的例子
<el-upload
action="/redwood/sys/Common/uploadFile.do?type=1"
type="drag"
:thumbnail-mode="true"
:multiple="true"
:show-uploadList="true"
:before-upload="handleBeforeupload"
:on-preview="handlePreview"
:on-success="handleSuccess"
:on-error="handleError"
:on-remove="handleRemove">
<i class="el-icon-upload"></i>
<div class="el-dragger__text">将文件拖到此处,或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
应该显示已上传的图片列表,并且是缩略图模式
upload的thumbnail-mode设为true时,不会显示图片列表,只显示当前最后上传的图片
如图,位置http://element.eleme.io/#/component/menu
点击“我的工作台”后,再次点击不会收缩
[cooking] - 插件不存在,自动下载插件: saladcss
[cooking] - 安装插件: saladcss
module.js:327
throw err;
^
Error: Cannot find module '/root/.cooking/node_modules/caniuse-api/generator.js'
at Function.Module._resolveFilename (module.js:325:15)
at Function.Module._load (module.js:276:25)
at Function.Module.runMain (module.js:441:10)
at startup (node.js:139:18)
at node.js:974:3
/root/.cooking
└── [email protected] extraneous
Desktop UI elements for Vue.js 2.0
这是目前项目的介绍,所以此项目是只支持Vue 2.0吗?
因为考虑到目前Vue主流开发还是使用1.0,Vue2.0也还未发布正式版,项目团队是否有考虑开一个兼容1.0的分支。
git clone仓库后, npm run dev, 在select组件里, 点任何select, 都报大量类似[Vue warn]: Duplicate presense of slot "default" found in the same render tree - this will likely cause render errors. (found in component <ElSelect>)
的警告.
我看到ant.design出了移动版,想问element是怎么看待大屏与小屏的,是否由element统一自适应大小屏,还是额外再搞一个element-mobile?
我个人的看法是,其实ant design的自适应已经做得很好了,手机端和pc端无缝切换,所以个人认为element没必要再出一个mobile版
Error: Cannot find module 'cooking/util/check'
at Function.Module._resolveFilename (module.js:440:15)
at Function.Module._load (module.js:388:25)
at Module.require (module.js:468:17)
at require (internal/module.js:20:19)
at Object. (C:\Users\caiban.cooking\node_modules\slush-cooking-v
ue\slushfile.js:8:21)
at Module._compile (module.js:541:32)
at Object.Module._extensions..js (module.js:550:10)
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)
at Function.Module._load (module.js:409:3)
2 .replace rm -rf with rimraf and cp -rf with cp-cli ,the build process will works fine on windows.
3 .cooking section bug?
[cooking] - info
Child scripts/cooking.conf.js:
Time: 16279ms
Asset Size Chunks Chunk Names
index.js 280 kB 0 [emitted] app
ERROR in ./packages/badge/src/main.vue
3 | <slot></slot>
4 | <sup
| ^
5 | v-text="content"
Invalid self-closing tag: <sup
v-text="content"
class="el-badge__content"
:class="{ 'is-fixed': $slots.default, 'is-dot': isDot }" />. This will be treated as the starting tag only in HTML5. Use <sup></sup> instead.
npm run bootstrap && npm run build:file && cooking watch -c scripts/cooking.demo.js -p
[email protected] bootstrap /Users/zhengqiong/GitHub/element
npm i && lerna bootstrap --loglevel=error
npm WARN vue-infinite-scr[email protected] requires a peer of vue@^1.0.10 but none was installed.
npm WARN vue-sw[email protected] requires a peer of vue@^1.0.10 but none was installed.
npm WARN [email protected] No license field.
Agreeing to the Xcode/iOS license requires admin privileges, please re-run as root via sudo.
Initializing Git repository.
Agreeing to the Xcode/iOS license requires admin privileges, please re-run as root via sudo.
child_process.js:526
throw err;
^
Error: Command failed: git init
Agreeing to the Xcode/iOS license requires admin privileges, please re-run as root via sudo.
1.0.0-rc.2
macOS/Chrome 53
2.0.0-rc.6
null
<div class="div1" v-if="show" v-clickoutside="out1"></div>
<div class="div2" v-if="show" v-clickoutside="out2"></div>
execute:
show = false
sleep 100
show = true
sleep 100
show = false
sleep 100
show = true
...
Now click outside div1 and div2
out1
and out2
will execute only once.
out1
and out2
execute many times.
https://github.com/ElemeFE/element/blob/master/src/utils/clickoutside.js
用一个全局的变量 handler
存储 addEventListener 是有问题的。
在 Vue1 中,可以通过 this 访问 Directive 对象,而 Vue2 不行,目前能想到的处理方法是把实例数据挂到当前节点上。
这里面好多东西都是很有用处的,但是,我是一个纯粹的网页前端,这种语法表示完全不理解。
使用如下控件
然后在大屏幕下图标warning跟文字相差64px。查看代码,发现一个奇怪的问题。正确的样式是.el-alert__ico{display:table-cell}然后我本地的样式就是class*=" el-icon-"], [class^=el-icon-] (也是控件里的自带的样式){display:inline-block}覆盖了.el-alert__ico的样式。请问下这个是什么原因?为什么文稿里就显示正确。我在其他同事电脑上也测试了,效果也是一样的。会相差特别宽。
一个小建议,datepicker的input最好设成readonly。因为现在在input里输东西会出现意想不到的事情。
默认主题里 <el-row>
是使用 border-box 的,<el-col>
却还是 content-box。导致为 <el-row>
设置非零的 gutter
属性后排版不正常的情况。有些奇怪,不知道是不是有意为之?
In the default theme, the <el-row>
element uses border-box while the <el-col>
element uses content-box, which results in some layout issues when the gutter
attribute of the <el-row>
element is nonzero. It is a bit strange and I wonder if it is designed to be like that.
下载后执行: npm run dev报错,先是缺了几个个依赖声明:
async-validator
throttle-debounce
wind-dom
babel-helper-vue-jsx-merge-props(这个报 babel-plugin-transform-vu[email protected]依赖babel-helper-vue-jsx-merge-props@^2.0.0,但是预装了1.0.1)
babel-preset-es2015
css-loader
手动添加上述包,执行完成npm run dev,然后访问预览页面报如下错误:
Module build failed: Error: ENOENT: no such file or directory, open '<project-directory>/element/packages/dialog/node_modules/vue-popup/lib/popup.css'
cooking 创建vue2 项目,
然后npm install element-ui,
main.js 中
import Vue from 'vue'
import Element from 'element-ui'
Vue.use(Element)
vue 文件中引入组件出错
table 组件中如何同时固定左边和右边某列呢?
中间部分不固定
➜ element git:(master) ✗ npm run dev
[email protected] dev /Applications/element/element
npm i && (node bin/iconInit.js & node bin/build-entry.js) && cooking watch -c scripts/cooking.demo.js
npm WARN package.json [email protected] No license field.
[email protected] postinstall /Applications/element/element
lerna bootstrap
Lerna v2.0.0-beta.18
Independent Versioning Mode
Linking all dependencies
Successfully bootstrapped 38 packages.
[build entry] DONE: /Applications/element/element/src/index.js
[cooking] - Failed to read the config.
[cooking] - Error: Cannot find module 'markdown-it'
at Function.Module._resolveFilename (module.js:325:15)
at Function.Module._load (module.js:276:25)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at Object. (/Applications/element/element/scripts/cooking.demo.js:3:10)
at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at module.exports (/Applications/element/element/node_modules/cooking/util/load-config.js:18:14)
at /Applications/element/element/node_modules/cooking/bin/cooking-watch:23:12
at Array.forEach (native)
at Object. (/Applications/element/element/node_modules/cooking/bin/cooking-watch:22:16)
at Module._compile (module.js:409:26)
npm ERR! Darwin 15.5.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "dev"
npm ERR! node v4.4.2
npm ERR! npm v2.15.0
npm ERR! code ELIFECYCLE
npm ERR! [email protected] dev: npm i && (node bin/iconInit.js & node bin/build-entry.js) && cooking watch -c scripts/cooking.demo.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script 'npm i && (node bin/iconInit.js & node bin/build-entry.js) && cooking watch -c scripts/cooking.demo.js'.
npm ERR! This is most likely a problem with the element-ui package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! npm i && (node bin/iconInit.js & node bin/build-entry.js) && cooking watch -c scripts/cooking.demo.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs element-ui
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!
npm ERR! npm owner ls element-ui
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /Applications/element/element/npm-debug.log
> [email protected] dev /Users/spademan/spademan/project/element
> npm run bootstrap && (node bin/iconInit.js & node bin/build-entry.js) && cooking watch -c scripts/cooking.demo.js
> [email protected] bootstrap /Users/spademan/spademan/project/element
> npm i && lerna bootstrap --loglevel=error
> [email protected] install /Users/spademan/spademan/project/element/node_modules/fsevents
> node-pre-gyp install --fallback-to-build
[fsevents] Success: "/Users/spademan/spademan/project/element/node_modules/fsevents/lib/binding/Release/node-v47-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile
> [email protected] postinstall /Users/spademan/spademan/project/element/node_modules/spawn-sync
> node postinstall
npm WARN EPEERINVALID [email protected] requires a peer of css-loader@^0.23.1 but none was installed.
npm WARN EPACKAGEJSON elem[email protected] No license field.
Lerna v2.0.0-beta.18
Independent Versioning Mode
Linking all dependencies
el-upload
这个是什么情况~~~~
目前已从 vue-desktop 迁移到了 element,遇到下面一些问题.
1.0.0-rc.3
当数据量展示的高度过多,出现竖向滚动条时,导致table表格出现横向滚动条,之前在vue-desktop中也遇到类似的问题,解决办法是data数据改变后,重新计算一遍calcColumns。
同理在dialog中嵌套表格也存在上面的问题1。
在dialog中嵌套table组件时,有这么一种需求,为table设置自定义高度700时固定表头,当数据量只有一条(或者很少时),此时我希望得到结果是,tabel的body组件高度是max-height: 700,而不是固定死的高度700,导致dialog高度非常大,影响美观。
带border属性的table在safari浏览器中,边框线没对齐
建议:table组件能否添加一个子组件用于设置,当表格数据为0时,自定义展示数据为空的默认样式;目前自定义为空的组件必须放于table父组件外才能实现,当设置了height属性时,就会导致user-table-null
组件显示在最底下,必须动态判断设置height属性,使用上感觉很别扭.
<!-- 目前实现的效果 -->
<el-table :data="data">
***
</el-table>
<user-table-null :data="data"></user-table-null>
<!-- 期待的效果 -->
<el-table :data="data">
<el-table-null>
<user-define-null></user-define-null>
</el-table-null>
***
</el-table>
文档在哪里?
代码如下:
<template>
<div class="y_table">
<el-table
:data="tableData3"
selection-mode="multiple"
:fixed-column-count="2"
@selectionchange="handleSelectionChange"
@cellclick="currentClick"
height="600"
border
>
<el-table-column
type="selection"
>
</el-table-column>
<el-table-column
inline-template
label="操作"
:formatter="formatter"
>
<a style="color: #ff6161;">{{ row.item1 }}操作</a>
</el-table-column>
</el-table>
</div>
</template>
运行结果报: [Vue warn]: Do not use built-in or reserved HTML elements as component id: Table
期望回复:这是因为缺少什么属性导致的吗,如何解决
rt
After update vue-loader to current version 9.4.2 and update the vue to 2.0.0.rc-5 ,It works.
Good Works element!
代码在:https://github.com/yanguanyu/vue-element-demo
环境:windows10 , nodejs v6.5.0 , npm 3.10.3
问题
错误log
for 1
ERROR in ./src/main.js
Module build failed: TypeError: e:/gitRepo/vue-demo/src/main.js: Cannot read property '0' of null
at Buffer._append (e:\gitRepo\vue-demo\node_modules\babel-generator\lib\buffer.js:78:25)
at Buffer.append (e:\gitRepo\vue-demo\node_modules\babel-generator\lib\buffer.js:55:10)
at Generator._append (e:\gitRepo\vue-demo\node_modules\babel-generator\lib\printer.js:206:52)
at Generator.word (e:\gitRepo\vue-demo\node_modules\babel-generator\lib\printer.js:131:10)
at Generator.Identifier (e:\gitRepo\vue-demo\node_modules\babel-generator\lib\generators\types.js:39:8)
at e:\gitRepo\vue-demo\node_modules\babel-generator\lib\printer.js:295:23
at Buffer.withSource (e:\gitRepo\vue-demo\node_modules\babel-generator\lib\buffer.js:151:5)
at Generator.withSource (e:\gitRepo\vue-demo\node_modules\babel-generator\lib\printer.js:189:15)
at Generator.print (e:\gitRepo\vue-demo\node_modules\babel-generator\lib\printer.js:294:10)
at Generator.ImportSpecifier (e:\gitRepo\vue-demo\node_modules\babel-generator\lib\generators\modules.js:22:8)
@ multi main
for 2
ERROR in ./src/main.js
Module not found: Error: Can't resolve 'element-ui/lib/theme-default/table-column.css' in 'e:\gitRepo\vue-demo\src'
@ ./src/main.js 1:0-70
@ multi main
I'm looking at your UI library and it's amazing, one of the best I've ever seen.
But for many developers it's very hard to use it without English documentation.
Are you planing to make it or this project is not supposed to be fully international?
Sorry for not complying with your guidelines.
maps=[{
"name": "福建",
"city": [{
"name": "福州"
},{
"name": "厦门"
}]
},{
"name": "广东",
"city": [{
"name": "广州"
},{
"name": "深圳"
}]
}]
computed: {
city: function() {
for (let province of this.maps) {
if (this.onProvince == province.name) {
return province.city
}
}
}
},
<el-select v-model="onProvince">
<el-option
v-for="(item, index) in maps"
:label="item.name"
:key="index"
:value="item.name">
</el-option>
</el-select>
<el-select v-model="onCity">
<el-option
v-for="(item, index) in city"
:label="item.name"
:key="index"
:value="item.name">
</el-option>
</el-select>
这是一个地区联动选择器,省级选择器选择后,市级的el-select选择器会出现第一个el-option的label值不变,value有变的情况
vue-cli生成项目后,npm install --save element-ui@next加入项目。App.vue中只是加入template想看看效果,却发现button等控件都没有bootstrap css效果:
<template>
<div id="app">
<div class="block">
<span class="demonstration">默认显示颜色</span>
<span class="wrapper">
<el-button type="success">成功按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
<el-button type="info">信息按钮</el-button>
</span>
</div>
<div class="block">
<span class="demonstration">hover 显示颜色</span>
<span class="wrapper">
<el-button :plain="true" type="success">成功按钮</el-button>
<el-button :plain="true" type="warning">警告按钮</el-button>
<el-button :plain="true" type="danger">危险按钮</el-button>
<el-button :plain="true" type="info">信息按钮</el-button>
</span>
</div>
</div>
</template>
(program):2232 [Vue warn]: Trying to access non-existent property "_e" while rendering. Make sure to declare reactive data properties in the data option. (found in root instance)warn @ (program):2232
(program):2232 [Vue warn]: Error when rendering root instance: warn @ (program):2232
loading区域加载会遮挡住Dialog对话框,是设计就是这样还是bug
<el-button type="text" icon="edit" @click="edit(1)"></el-button>
edit(index) {
console.log(index);
}
点击按钮无法触发edit事件
请问会不会有for mobile版本?
刚接触vue,我用的是尤大提供的vue2.0的vue-cli模板,它使用的是webpack,这是我在模板的基础上修改的配置文件,只是加了css和字体的loader:
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
resolveLoader: {
root: path.join(__dirname, 'node_modules'),
},
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue'
},
{
test: /\.css$/,
loader: 'css'
},
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
},
{
test: /\.(ttf|woff|eot|png|jpg|gif|svg)$/,
loader: 'file',
query: {
name: '[name].[ext]?[hash]'
}
}
]
},
devServer: {
historyApiFallback: true,
noInfo: true
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
])
}
下面是我的main.js,基本都只有最基础的东西:
import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import App from './App.vue'
Vue.use(Element)
new Vue({
el: '#app',
render: h => h(App)
})
我的App.vue完全复制的table组件的示例代码,最后表格数据是能够正常展现的,但是组件的样式为空,页面上引入的<style type="text/css" title="Grid Column Style"></style>是空的,请问我的配置是错在哪了呢
👍
It's a nice repo and I will use it in our project. 🍻
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.