серия вторичной упаковки element-ui - кнопка

Vue.js

elementUI — это фреймворк пользовательского интерфейса vue.js, который очень хорошо справляется с системами фонового управления и т. д. Однако перед лицом повторяющихся систем фонового управления и большого количества повторяющихся кодов здесь мы будем использовать elemnt ui в качестве вторичного пакета. чтобы расширить свойства пользовательского интерфейса элемента, чтобы упростить код.

Эта статья начинается сel-buttonНапримерel-buttonЭто самый простой компонент, он требуется для всех операций и только передает события щелчка во внешний мир. В обычной работе мы часто сталкиваемся с проблемой повторных кликов.Если клик будет слишком быстрым, интерфейс не вернется, что приведет к повторным запросам.В это время мы подумаем об использовании антишейка или троттлинга, или об использованииel-buttonизloadingатрибут, если используетсяloadingсвойств, обычно мы быvueизdataопределитьloadingпеременная, то перед вызовом ajax будетloadingУстановить какtrue, после возврата ajax будетloadingСтавим в false, это более разумный способ, но если в системе много таких случаев, то нужно определять по одному для каждой страницыloadingПеременные, как квалифицированный программист, конечно, мы не хотим писать столько повторяющихся кодов.el-buttonсделать вторичную упаковку, В следующем коде мы инкапсулируемpl-buttonкомпоненты

<el-button
  v-bind="$attrs"
  :loading="loadingStatus"
  @click="handleClick"
>
<slot/>
</el-button>
<script>
export default {
  name: 'pl-button',
  props: {
    autoLoading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loadingStatus: false
    }
  },
  methods: {
    handleClick() {
      if (this.autoLoading) {
        this.loadingStatus = true
      }
      this.$emit('click', () => {
        this.loadingStatus = false
      })
    }
  }
}
</script>

С приведенными выше строками кода мыel-buttonизclick事件использоватьhandleClick方法Обработка, и в то же время мы настраиваемautoLoaing的props字段, после нажатия кнопки срабатываетhandleClick, в это время, если autoLoading истинно, будетloadingStatusУстановите в true, тогда кнопка будет загружена, а затем внешнийemit('click'),Кромеemit('click')Кроме того, здесь есть еще один параметр, это функция обратного вызова, в функции обратного вызова мы устанавливаем loadingStatus в false, и загрузка в это время исчезнет, ​​поэтому мы используемpl-buttonРеализовали кнопку автозагрузки, как ей пользоваться?

<template>
  <pl-button :auto-loading="true" @click="submit">
    自动loading按钮
  </pl-button>
</template>
<script>
export default {
  methods: {
    submit(done) {
    // 这里供业务组件处理一些事情,比如ajax请求,此处用setTimeout模拟,    执行done()方法消失loading
      setTimeout(() => {
        done()
      }, 1000)
    }
  }
}
</script>

В деловую составляющую вводим только что написанноеpl-buttonкомпоненты, настройкиauto-loadingЕсли это правда, то наш щелчок принимается событием отправки, а отправка может получить функцию обратного вызова от нажатия кнопки pl.После того, как мы обработаем ее на бизнес-компоненте, выполните done(), чтобы исчезла загрузка

Приведенный выше простой код мы будемel-buttonнастроен на автоматическую загрузку сel-buttonВ чем разница между загрузкой Нам больше не нужно каждый раз определять бизнес-компонентloadingпеременная, просто выполнитеdone()метод может. вышеpl-buttonкомпонент, мыel-buttonиспользуемый компонентv-bind=$attrs, это представление должно наследовать свойства, переданные всеми родительскими компонентами, используя это свойство, мы можемel-buttonВсе реквизиты могут наследоваться отpl-button,Такие как :

 <pl-button type="primary">主要按钮</pl-button>
 <pl-button type="primary" plain>朴素按钮</pl-button>
 <pl-button type="primary" round>圆角按钮</pl-button>
 <pl-button icon="el-icon-edit" circle></pl-button>

В приведенном выше коде мы видим:el-buttonСобственность PROPS может быть напрямуюpl-buttonпрямо наel-buttonВторичная упаковка расширена, и это никак не влияетel-buttonИспользование оригинальных свойств.

СледующийНаггетс.Талант/пост/691648…

Ограничено самородками, которые не могут быть легко отображены, вы можете проверить эффект, просмотрев этот документууууууууууууууууууууууууууууу6.com/review-element/…

Адрес источника

Адрес статьи серии:

серия вторичной упаковки element-ui - кнопка (1)

серия вторичной упаковки element-ui - кнопка (2)

серия вторичной упаковки element-ui - кнопка (3)

Серия вторичной упаковки element-ui — кнопка (четыре) (версия vue3)

Категории