Skip to content

Latest commit

 

History

History
173 lines (132 loc) · 6.52 KB

FAQ.md

File metadata and controls

173 lines (132 loc) · 6.52 KB

常见问题

给组件绑定的事件为什么无法触发?

在 Vue 2.0 中,为自定义组件绑定原生事件必须使用 .native 修饰符:

<my-component @click.native="handleClick">Click Me</my-component>

从易用性的角度出发,我们对 Button 组件进行了处理,使它可以监听 click 事件:

<el-button @click="handleButtonClick">Click Me</el-button>

但是对于其他组件,还是需要添加 .native 修饰符。

如何在 Table 组件的每一行添加操作该行数据的按钮?

使用 Scoped slot 即可:

<el-table-column label="操作">
  <template scoped="props">
    <el-button @click.native="showDetail(props.row)">查看详情</el-button>
  </template>
</el-table-column>

参数 row 即为对应行的数据。

Tree 组件的 `render-content` 和 Table 组件的 `render-header` 怎么用?

请阅读 Vue 文档 Render Function 的相关内容。注意,使用 JSX 来写 Render Function 的话,需要安装 babel-plugin-transform-vue-jsx,并参照其文档进行配置。

如何使用第三方图标库?

只要修改第三方图标库的前缀(具体方法参阅第三方库的文档),并编写相应的 CSS,即可在 Element 中像使用内置图标一样使用第三方图标。例如,将第三方库的前缀改为 el-icon-my,然后在其 CSS 文件中添加:

[class^="el-icon-my"], [class*=" el-icon-my"] {
  font-family:"your-font-family" !important;

  /* 以下内容参照第三方图标库本身的规则 */
  font-size: inherit;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

具体使用时,和 Element 内置的图标用法一样。比如在 el-input 中:

<el-input icon="my-xxx" />
你们的文档怎么偷偷更新了?

我们只会在 Element 发布新版本时同步更新文档,以体现最新的变化。详细的更新内容可以查看 changelog

在项目中引入 Element,但是 CSS 报错/字体文件报错/组件没有样式是什么原因?

请参考我们提供的 starter kit,在 webpack 的 loaders 中正确配置 file-loader、css-loader 和 style-loader。此外,我们还提供了基于 cookinglaravel 的项目模板。

将 Element 克隆至本地,运行时为何会报错/跑不起来?

首先,确保克隆的是 master 分支的最新代码,并且文件完整。其次,确保本地的 node 版本在 4.0 以上,npm 版本在 3.0 以上。最后,可以启动开发环境:

npm run dev

或是直接打包:

npm run dist

FAQ

Why are my event listeners not working?

In Vue 2.0, adding native event handlers in custom components requires a .native modifier:

<my-component @click.native="handleClick">Click Me</my-component>

For the sake of usability, we processed Button so it can listen to click events:

<el-button @click="handleButtonClick">Click Me</el-button>

For other components, the .native modifier is still mandatory.

How do I add buttons in each row of Table to operate data of that row?

Just use Scoped slot:

<el-table-column label="Operations">
  <template scoped="props">
    <el-button @click.native="showDetail(props.row)">Details</el-button>
  </template>
</el-table-column>

The parameter row is the data object of corresponding row.

How do `render-content` of Tree and `render-header` of Table work?

Please refer to Render Function in Vue's documentation. In addition, if you are writing render functions with JSX, babel-plugin-transform-vue-jsx is required. See here for its configurations.

How do I use third-party icon font library with Element?

You just need to modify the class name prefix of the third-party library (see their docs for how to do it), and write some CSS, then you can use them just like you use Element built-in icons. For example, change the prefix to el-icon-my, and then add the following to its CSS:

[class^="el-icon-my"], [class*=" el-icon-my"] {
  font-family:"your-font-family" !important;

  /* The following is based on original CSS rules of third-party library */
  font-size: inherit;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Now you can use them as you do with built-in icons. For example, in el-input:

<el-input icon="my-xxx" />
When do you update documentations of Element?

We update documentations only when a new version of Element is published so that it reflects all the changes introduced in that version. Updated changed can be found in the changelog

I imported Element in my project, but why does it report CSS error/font file error/components have no style?

Please refer to our starter kit and correctly configure file-loader, css-loader and style-loader in webpack config file. Besides, we also provide templated based on cooking and laravel.

I cloned Element's repo, but failed to run it. How do I solve it?

First, please make sure to clone the latest code in master branch and cloned files are intact. Then, note that the version of Nodejs should be 4.0+ and npm 3.0+. Finally, activate development:

npm run dev

or build it:

npm run dist