Добавленный контент игнорируется в документации ElementUI.

Element

предисловие

Хотя документация по ElementUI очень подробная, некоторые упущения неизбежны. Эта статья знакомит с опытом автора с Element и с тем, что проигнорировано или кратко представлено в документации (я долго думал об этом, а написал немного). Если у вас есть что добавить, пожалуйста, дайте мне знать в комментариях.

Официальный FAQ

Всем кто пользуется ElementUI рекомендуется прочитать, официалка тоже очень беспомощна. Некоторые могут быть раздражающими, чтобы спросить, некоторые действительно полезны

например: Почему событие, связанное с компонентом, не может быть запущено?

В Vue 2.0 привязка собственных событий для пользовательских компонентов должна использовать модификатор .native:<my-component @click.native="handleClick">Click Me</my-component>

С точки зрения простоты использования мы обработали компонент Button так, чтобы он мог прослушивать событие щелчка:<el-button @click="handleButtonClick">Click Me</el-button>

Но для других компонентов все равно нужно добавить модификатор .native.

Ввод реагирует на ввод пользователя в режиме реального времени

<el-input type="text" v-model="test"  @change="change"></el-input>

При использовании прослушивателя изменений изменение значения поля ввода не может инициировать событие изменения, но может инициировать событие, если поле ввода не в фокусе. Как правило, событие изменения запускается только тогда, когда входное значение изменяется и теряет фокус, а в других случаях событие не запускается.

Событие изменения теперь срабатывает только тогда, когда ввод теряет фокус или пользователь нажимает клавишу ввода, что соответствует нативным элементам ввода. Если вам нужно реагировать на ввод пользователя в режиме реального времени, вы можете использовать событие ввода.

увидеть егоПримечания к выпуску

Вход использует v-модельИспользуйте модификаторы

Если вы хотите автоматически фильтровать начальные и конечные пробельные символы, введенные пользователем, вы можете добавить модификатор trim в v-model:

<el-input v-model.trim="input" placeholder="请输入内容"></el-input>

Чтобы автоматически преобразовать введенное пользователем значение в числовой тип, вы можете добавить модификатор числа в v-model:

<el-input type="number" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>

проверка формы

Использование проверки формы ElementUIasync-validator, типы элементов формы: строка, число, логическое значение, метод, регулярное выражение, целое число, число с плавающей запятой, массив, объект, перечисление, дата, URL-адрес, шестнадцатеричный адрес, электронная почта

Некоторые из них все еще широко используются, например проверка URL, проверка даты и проверка электронной почты. Но в документации об этом не написано, и я иногда не могу вспомнить. Хахаха. Поэтому я написалгенератор кода формы, так что вам не нужно его запоминать.

и менее часто используемая проверка вложенных данных:

'user.tel' : [{required: true, message: '手机号码不能为空', trigger: 'blur'}]

выберите эхо компонента удаленного поиска

element-ui Когда ваш параметр исправлен, он будет отображать соответствующую метку на основе выбранного вами значения, но компонент удаленного поиска связан сoptionsНе исправлено, проблема с эхом.

Решение состоит в том, чтобы передать выбранное значениеoptionsВходящий, скажем, у меня есть компонентArticleSelect, значение идентификатора, которое я выбрал, равно [ 1,2 ], если оно не обработано, этот компонент не будет отображаться. Сухо отображаются только два тега 1 и 2. Но я могу получить выбранное значение, поставивoptions(значение[{value:1,label:'第一篇'},{value:2,label:'第二篇'}]), переданный в этот компонент, для достижения эхо-заголовка.

Однако некоторые люди могут спросить, не будут ли параметры удаленного поиска компонента select динамически изменяться с ключевыми словами поиска, почему это возможно? Давайте посмотрим на код компонента выбора ElementUI для установки выбранного значения:

setSelected() {
    // 省略不是多选的情况的代码
    // 多选
    let result = [];
    if (Array.isArray(this.value)) {
      this.value.forEach(value => {
        // 注意到这里是push操作
        result.push(this.getOption(value));
      });
    }
    this.selected = result;
    // 设置完成之后重新计算选项框的高度
    this.$nextTick(() => {
      this.resetInputHeight();
    });
  }

Из кода видно, что выбранное значение настройки Элемента является операцией push, поэтому последующие изменения опций не повлияют на выбранное мной значение, которое отлично решает мои потребности.

Настройка стилей элемента пользовательского интерфейса

В этом разделе я изздесьСкопируйте это, не пишите это сами

пространство имен CSS

Теперь давайте поговорим о том, как переопределить стили элемента пользовательского интерфейса. Поскольку стиль element-ui вводится глобально, вы не можете добавить область действия, если хотите переопределить его стиль на определенной странице, но если вы хотите переопределить только стиль элемента этой страницы, вы можете добавить область действия к его родительскому элементу. class и использовать пространства имен для решения проблемы.

.article-page {
  /* 你的命名空间 */
  .el-tag {
    /* element-ui 元素*/
    margin-right: 0px;
  }
}

Конечно, вы также можете использовать селектор глубины действия, который будет описан ниже.

Родительский компонент изменяет стиль дочернего компонентаселектор глубины

Когда ваш дочерний компонент использует область действия, но вы хотите изменить стиль дочернего компонента в родительском компоненте, вы можете использовать >>> для достижения:

<style scoped>
.a >>> .b { /* ... */ }
</style>

будет скомпилирован в

.a[data-v-f3f3eg9] .b {
  /* ... */
}

Если вы используете некоторые элементы предварительной обработки, такие как sass, вы можете использовать /deep/ вместо >>> для достижения желаемого эффекта.

Итак, вы хотите переопределить стиль кнопки определенного элемента страницы, вы можете сделать это:

.xxx-container >>> .el-button{
  xxxx
}

Окончательные советы

Если вы иногда, к сожалению, сталкиваетесь с ошибкой в ​​ElementUI (хотя в большинстве случаев это ваша собственная проблема), добавление ключа к компоненту, обновление значения ключа, принудительное обновление компонента обычно решает проблему.

Категории