Skip to content

Latest commit

 

History

History
185 lines (140 loc) · 7.16 KB

FAQ.md

File metadata and controls

185 lines (140 loc) · 7.16 KB
Raw

常见问题

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

在 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" />
所有组件的任意属性都支持 `.sync` 修饰符吗？

不是。对于支持 .sync 修饰符的属性，我们会在文档的 API 表格中注明。更多 .sync 的用法请查看 Vue 文档。

你们的文档怎么偷偷更新了？

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

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

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

将 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" />
Can I use `.sync` modifier on every attribute?

No, only a few attributes supports the .sync modifier, and we have explicitly marked them on the documentation's API table. For more information about .sync, please refer to Vue documentation.

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