Element-UI 10 странных трюков, сколько вы знаете?

внешний интерфейс Element
Element-UI 10 странных трюков, сколько вы знаете?

Эта статья участвовала в "Проект «Звезда раскопок»”, чтобы выиграть творческий подарочный пакет и бросить вызов творческим поощрительным деньгам.

полоса прокрутки

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

image.pngЭто красивее, чем родная полоса прокрутки, и способ использования тоже очень прост:

<el-scrollbar>
  <div class="box">
    <p v-for="item in 15" :key="item">欢迎使用 el-scrollbar {{item}}</p>
  </div>
</el-scrollbar>

<style scoped>
.el-scrollbar {
  border: 1px solid #ddd;
  height: 200px;
}
.el-scrollbar ::v-deep  .el-scrollbar__wrap {
    overflow-y: scroll;
    overflow-x: hidden;
  }
</style>

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

el-upload имитирует щелчок

Иногда мы хотим использовать функцию загрузки el-upload, но не хотим использовать стиль el-upload Как этого добиться? Способ тоже очень простой, спрячьте эль-загрузку, а затем смоделируйте щелчок.

<button @click="handleUpload">上传文件</button>
<el-upload
  v-show="false"
  class="upload-resource"
  multiple
  action=""
  :http-request="clickUploadFile"
  ref="upload"
  :on-success="uploadSuccess"
>
    上传本地文件
</el-upload>

<script>
export default {
    methods: {
        // 模拟点击
        handleUpload() {
            document.querySelector(".upload-resource .el-upload").click()
        },
        // 上传文件
        async clickUploadFile(file) {
            const formData = new FormData()
            formData.append('file', file.file)
            const res = await api.post(`xxx`, formData)
        }
        // 上传成功后,清空组件自带的文件列表
        uploadSuccess() {
            this.$refs.upload.clearFiles()
        }
    }
}
</script>

Параметры раскрывающегося списка el-select слишком длинные

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

<el-select popper-class="popper-class" :popper-append-to-body="false" v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
        <el-tooltip
          placement="top"
          :disabled="item.label.length<17"
        >
            <div slot="content">
                <span>{{item.label}}</span>
            </div>
            <div class="iclass-text-ellipsis">{{ item.label }}</div>
        </el-tooltip>
    </el-option>
</el-select>

<script>
  export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎'
        }],
        value: ''
      }
    }
  }
</script>

<style scoped>
.el-select {
  width: 300px;
}
.el-select ::v-deep .popper-class {
  width: 300px;
}
.iclass-text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

Эффект следующий:

image.png

el-input не должен иметь пробелов в начале и конце

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

<el-form :rules="rules" :model="form" label-width="80px">
    <el-form-item label="活动名称" prop="name">
        <el-input v-model="form.name"></el-input>
    </el-form-item>
</el-form>

<script>
export default {
    data() {
        return {
            form: {
                name: ''
            },
            rules: {
                name: [
                        { required: true, message: '请输入活动名称', trigger: 'blur'},
                        { pattern: /^(?!\s+).*(?<!\s)$/,  message: '首尾不能为空格', trigger: 'blur' }
                ]
            }
        }
    }
}
</script>

Эффект следующий:image.png

el-input type=число Введите китайский язык, сфокусируйтесь вверх

Когда для el-input задано значение type="number", китайский ввод хотя и не будет отображаться, но фокус переместится вверх.image.pngРешение:

<style scoped>
::v-deep .el-input__inner {
    line-height: 1px !important;
}
</style>

el-input type=number убирает стрелки вверх и вниз при фокусировке

image.pngРешение:

<el-input class="clear-number-input" type="number"></el-input>

<style scoped>
.clear-number-input ::v-deep input[type="number"]::-webkit-outer-spin-button,
.clear-number-input ::v-deep input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
}
</style>

el-form проверяет только одно из полей формы

Иногда нам нужно проверить некоторые поля отдельно, например, отправить код подтверждения и подтвердить номер мобильного телефона отдельно, вы можете сделать это:

this.$refs.form.validateField('name', valid => {
    if (valid) { 
        console.log('send!'); 
    } else { 
        console.log('error send!'); 
        return false; 
    }
})

el-dialog повторно открывает всплывающее окно и очищает информацию формы

Кто-то сбрасывает форму в $nextTick при открытии всплывающего окна, и я решил сбросить ее после закрытия всплывающего окна:

<el-dialog @closed="resetForm">
    <el-form ref="form">
    </el-form>
</el-dialog>

<script>
export default {
    methods: {
        resetForm() {
            this.$refs.form.resetFields()
        }
    }
}
</script>

Недопустимая настройка свойства уничтожения при закрытии эль-диалога

После того, как для параметра destroy-on-close установлено значение true, обнаруживается, что элемент DOM все еще существует после закрытия всплывающего окна и не был уничтожен.

Обходной путь: добавьте v-if в el-dialog.

<el-dialog :visible.sync="visible" v-if="visible" destroy-on-close>
</el-dialog>

содержимое таблицы el-table за пределами упущения

Когда содержимое таблицы слишком длинное, добавить стили вручную проблематично, по секрету скажу, что для этого достаточно добавить всплывающую подсказку show-overflow-tooltip.

<el-table-column
  prop="address"
  label="地址"
  width="180"
  show-overflow-tooltip
>
</el-table-column>

Эффект следующий:image.png

Добро пожаловать, чтобы оставить сообщение в области комментариев, официальный представитель Nuggets будет вПроект «Звезда раскопок»После события 100 штук Наггетсов будут разыграны в области комментариев. Если статья была вам полезна, не забудьте поставить лайк~

Я слышал, что персикам в этом году очень повезло 😍