element 使用阿里图标变形了_ElementUI使用的二三事

最新推荐文章于 2023-05-04 16:35:07 发布

weixin_39573822

最新推荐文章于 2023-05-04 16:35:07 发布

阅读量376

点赞数

作者：TYANer

elementUI是和vue配套的一个桌面端组件库。虽然是一个通用的组件库，但是由于使用场景的不同，我们可能会遇到一些小问题，以下是我个人的一、、总结。

1、Tooptip文字提示

tooltip使用时，必须有一个子元素（不能是文本元素）。

2、修改主题色

2.1 方案一：利用element UI的在线主题生成工具

工具地址：https://elementui.github.io/theme-chalk-preview/#/zh-CN

操作步骤：

点击“切换主题色”，选择或输入色值。
点击“下载主题”。
将压缩包解压，将文件夹重命名，如“theme”。
将theme文件夹放到项目目录中。
在main.js 中修改elementUI的css的引用路径。

以“将theme放到main.js同级的目录”为例：

// 原来的引用路径
// import 'element-ui/lib/theme-chalk/index.css'
import '../theme/index.css'

这种方案的优点是：不需要安装新的依赖。缺点是：只能修改主题色，灵活度不够。

2.2 方案二：修改scss变量

操作步骤：

新增一个样式文件，用于修改Element的样式变量
在文件中写入修改内容
在main.js中引入该样式文件

需要注意的是，覆盖字体路径变量是必需的，将其赋值为 Element 中 icon 图标所在的相对路径即可。

以“在main.js同级的目录新建一个名为element-variables.scss的文件”为例：

element-variables.scss

/* 改变主题色变量 */
$--color-primary: teal;

/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

@import "~element-ui/packages/theme-chalk/src/index";


main.js

// 原来的引用路径
// import 'element-ui/lib/theme-chalk/index.css'
import './element-variables.scss'

2.3 方案三：使用element-ui自定义主题工具

操作步骤：

cd到你的项目文件目录下，安装工具：npm i element-theme -g。
安装chalk主题：npm i element-theme-chalk -D。
初始化变量文件：et -i 执行后当前目录会有一个 element-variables.css 文件。
直接编辑element-variables.css文件，修改变量，例如主题色改为红色：--color-primary: red;。
编译主题：et。
引入自定义主题：import '../theme/index.css' import ElementUI from 'element-ui' import Vue from 'vue' Vue.use(ElementUI)。

3、使用隐藏组件el-scrollbar

使用方法和其他组件一样，不需要额外引入。

使用<el-scrollbar></el-scrollbar>将会出现滚动的内容放到上述标签内就可以了。

这里要简单的设置一下，将标签的height设为100%。如果底部出现空白，可以通过设置以下代码解决（出现这种情况的原因是：底部出现了横向滚动条）。

.el-scrollbar__wrap {
  overflow-x: hidden;
}

4、修改表头样式

方法一：

<el-table :data="tableData" :header-cell-style="{color:'red'}" style="width: 100%">

方法二：

/* template */
<el-table :data="tableData" :row-style="tableRowStyle" :header-cell-style="tableHeaderColor">

/* script */
methods: {
    // 修改table tr行的背景色
    tableRowStyle({ row, rowIndex }) {
      return 'background-color: #F7F6Fd'
    },
    // 修改table header的背景色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: #F7F6Fd;color: #B6B5C2;font-weight: 500;'
      }
    }
}

方法一的缺点是，有一些样式不能设置，比如background-color等。

5、表格加按钮产生的问题

由于浏览器的处理方式不同，在表格内嵌套文字按钮，当文字过长时，可能出现两种情况：

按钮将表格撑开，表格无法对齐。
按钮只能显示表格宽度的内容，超过部分被隐藏。

解决办法：加上一个属性show-overflow-tooltip，这样显示的效果就会统一成“当内容过长被隐藏时显示 tooltip”。

6、表单验证：当A改变时，触发B的校验

设置A的自定义校验规则，并在A的校验中调用校验B的方法：

data() {
  let validateA = (rule, value, callback) => {
    if (this.formData.B !== '') {
      this.$refs.formData.validateField('B')
    }
    callback()
  }
  return {
    rules: {
      A: [
        { validator: validateA, trigger: ['blur', 'change'] }
      ]
    }
  }
}

7、多选下拉框样式显示不正常

现象描述：下面代码的目标是实现一个多选、可搜索、可清空的下拉框。实际效果是，可以多选、搜索，但是当鼠标放在下拉框上时，本该出现的清空全部的按钮并没有出现；另外，下拉框的选项还可能出现宽度变成由文本撑开、文本和icon重叠等现象。

/* template */
<el-form :model="formData">
  <el-form-item label="label" prop="formItem">
    <el-select v-model="formData.formItem" multiple clearable filterable placeholder="请选择">
      <el-option v-for="item in itemList" :key="item.itemId" :label="item.description" :value="item.itemId"></el-option>
    </el-select>
  </el-form-item>
</el-form>

/* script */
formData: {
  // formItem: [],
},

原因：出现这种情况的原因是，下拉框绑定的对象没有显示定义，而多选的值是一个数组，读取数据的时候，如果未定义就是undefined，没有length属性，就会报错，引发后面的现象。

控制台报错：

[Vue warn]: Error in render: "TypeError: Cannot read property 'length' of undefined"
TypeError: Cannot read property 'length' of undefined
[Vue warn]: Error in mounted hook: "TypeError: Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element'."
TypeError: Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element'.
[Vue warn]: Error in callback for watcher "value": "TypeError: Cannot read property 'value' of undefined"
TypeError: Cannot read property 'value' of undefined

为 el-select设置 multiple属性即可启用多选，此时 v-model的值为当前选中值所组成的数组。

8、el-form中使用resetFields()方法不能将表单全部重置为空

场景描述：有两个button，分别为“新增”和“编辑”，点击按钮会出现一个包含表单的dialog（“新增”和“编辑”复用一个dialog）。

期望效果：点击按钮，dialog出现，关闭dialog时，清空校验结果和输入框内的值。

问题描述：点击“新增”按钮，关闭后，点击“编辑”按钮，得到期望结果；点击“编辑”按钮，关闭后，点击“新增”按钮，会出现点击“编辑”按钮时第一次赋的值。

原因描述：Form 的这个方法resetFields有问题，调用后不是重置为空，而是重置为第一次给form赋的值。

相关讨论：https://github.com/ElemeFE/element/issues/3217

9、组件的Methods调用

在组件上添加ref属性，使用this.$refs.yourElementRefAttributeValue.methodName()调用。

以调用el-input的select方法为例：

// template
<el-input v-model="sslKey" ref="sslKey"></el-input>

// script
this.$refs.sslKey.select()

10、调用resetFields()方法重置表单时，控制台警告：[Element Warn][Form]model is required for resetFields to work.

resetFields()对整个表单进行重置，将所有字段值重置为初始值并移除校验结果。

resetFields()源码：

resetFields() {
  // 没有表单数据 return
  if (!this.model) {
    // 环境变量,非生产环境抛警告再return
    process.env.NODE_ENV !== 'production' &&
    console.warn('[Element Warn][Form]model is required for resetFields to work.');
    return;
  }
  this.fields.forEach(field => {
    field.resetField();
  });
}

由此可见，出现警告的原因就是，绑定的表单数据有问题。

附表单的一些注意事项：

在el-form上绑定数据，用:model="formData"，model和v-model不要弄混了。
要重置的表单项，必须添加prop属性，并且必须与form表单对应的变量名字一致。
一个表单里的prop必须唯一。

weixin_39573822

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
element 使用阿里图标变形了_ElementUI使用的二三事

作者：TYANerelementUI是和vue配套的一个桌面端组件库。虽然是一个通用的组件库，但是由于使用场景的不同，我们可能会遇到一些小问题，以下是我个人的一、、总结。1、Tooptip文字提示tooltip使用时，必须有一个子元素（不能是文本元素）。2、修改主题色2.1 方案一：利用element UI的在线主题生成工具工具地址：https://elementui.github.io/them...
复制链接

扫一扫