Говоря о бизнес-компонентах Vue

внешний интерфейс Element Vue.js товар
Говоря о бизнес-компонентах Vue

Праздник Весны только что прошел, а мозг еще не оправился от праздничного синдрома, и наступил день начала работы. Интересно, вы получили красный конверт для начала работы? Вы подвергались насилию со стороны собаки?

что такое компонент

каждая веб-страницаАвтономный визуальный/интерактивныйОбласть рассматривается как компонент, компонент подобен нашей машине по сборке ПК, вся машина (приложение) состоит из различных частей, таких как монитор, материнская плата, память, видеокарта, жесткий диск и так далее. Страница состоит из таких частей, как навигация, списки, всплывающие окна, каскады, раскрывающиеся меню и т. д. Страница является просто контейнером этих компонентов. Компоненты можно свободно комбинировать для формирования полнофункционального интерфейса. Когда компонент не нужен или вы хотите заменить компонент, вы можете заменить и удалить его в любое время, не влияя на работу всего приложения.

Соглашения о структуре проекта

  1. Код каждого компонента Vue рекомендуется не превышать 200 строк, в случае превышения рекомендуется разделить компонент
  2. Разделите каталог файлов и поместите страницы, общие компоненты, инструменты, общие стили, маршруты и т. д. в отдельную папку.
  3. Справочник по единому формату записи файлов VueСтиль компонента VueилиРуководство по стилю (официальное).

Например, структура моего проекта:

src
 ├── assets			# 图片、icon 等静态资源
 ├── common			# state、工具函数、公共常量
 ├── components			# 公共组件
 ├── mixins			# 公共 mixin 文件
 ├── pages			# 页面组件
 ├── router			# 路由
 └── styles			# 公共样式文件

дизайн бизнес-компонента

Мы неизбежно будем использовать некоторые общие компоненты при разработке проекта, такие как всплывающие окна, каскады, выпадающие меню и т. д. К счастью, существует множество библиотек компонентов пользовательского интерфейса, таких какelement-ui,Mint UI,framework7, эти библиотеки компонентов пользовательского интерфейса уже помогли нам реализовать самые основные функции, нам просто нужно их использовать. Однако в реальной разработке продукты всегда будут открывать свое сознание и выдвигать те или иные требования, и очевидно, что эти UI-библиотеки не могут удовлетворить все бизнес-требования. Итак, на данный момент нам нужно разработать компонент самостоятельно или выполнить слой инкапсуляции на основе компонента пользовательского интерфейса.

Компоненты пакета

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

// dropdown-list.vue
<template>
  <el-dropdown
    class="cpt-dropdown-list"
    trigger="click"
    :hide-on-click="false"
    @command="commandHandler">
    <span class="dropdown-link">{{ text }}</span>
    <el-dropdown-menu
      slot="dropdown"
      class="cpt-dropdown-list-wrap">
      <el-dropdown-item
        v-for="item in options"
        :key="item.key"
        :command="item"
        :class="{ active: isActive(item) }">
        {{ item.label }}
        <i v-show="isActive(item)" class="el-icon-check"></i>
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
export default {
  props: {
    text: String,
    options: Array,
    selected: Array
  },

  methods: {
    isActive (data) {
      return this.selected.some(item => item.key === data.key)
    },

    commandHandler (data) {
      const temp = this.selected.slice()
      const index = temp.findIndex(item => item.key === data.key)
      if (index > -1) {
        temp.splice(index, 1)
      } else {
        temp.push(data)
      }
      this.$emit('update:selected', temp)
    }
  }
}
</script>

<style lang="scss">
.cpt-dropdown-list {
  display: inline-block;

  .dropdown-link {
    color: #409eff;
    cursor: pointer;
  }
}
</style>

// base.scss
.cpt-dropdown-list-wrap {
  max-height: 300px;
  overflow: auto;

  .el-dropdown-menu__item {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;

    &, &:hover {
      color: #606266;
      background-color: #fff;
    }

    .el-icon-check {
      margin-left: 10px;
      line-height: unset;
    }

    &.active {
      color: #409eff;
    }
  }
}

Посмотреть онлайн-примеры

Пространство стиля

Используйте компонент- или страницу- в качестве префикса плюс имя компонента для пространства области действия стиля компонента. Зачем нужно пространство стиля? Потому что с непрерывным расширением проекта также увеличивается вероятность того, что разные компоненты будут иметь одно и то же имя класса, что в некоторых сценариях приведет к конфликтам стилей. Рассмотрим следующий пример:

// primary-button.vue
<template functional>
  <div class="button">
    blue
  </div>
</template>

<style lang="css">
.button {
  color: blue;
}
</style>


// warning-button.vue
<template functional>
  <div class="button">
    red
  </div>
</template>

<style lang="css">
.button {
  color: red;
}
</style>


//home.vue
<template>
  <div class="page-home">
    <button @click="isRed = !isRed">click me</button>
    <warning-button v-if="isRed"></warning-button>
    <primary-button v-else></primary-button>
  </div>
</template>

<script>
import WarningButton from './warning-button.vue'
import PrimaryButton from './primary-button.vue'

export default {
  data () {
    return {
      isRed: true
    }
  },

  components: {
    WarningButton,
    PrimaryButton
  }
}
</script>

Посмотреть онлайн-примеры

Как и в приведенном выше примере, мы ожидаем переключения компонентов кнопки с разными цветами фона путем переключения значения isRed.При инициализации цвет фона компонента кнопки предупреждения красный.Дважды щелкните кнопку подряд, чтобы переключиться обратно.В на этот раз цвет фона компонента кнопки предупреждения красный, но он стал синим. Это связано с тем, что стиль компонента основной кнопки загружается при переключении isRed, а стиль компонента основной кнопки загружается после компонента кнопки предупреждения, в результате чего стиль компонента кнопки предупреждения перезаписывается. Вышеупомянутый пример слишком прост, но в реальной разработке можно столкнуться с такой проблемой, поэтому мы должны добавить область видимости стиля к компоненту, чтобы избежать этой ситуации.

сторонняя библиотека

В реальной разработке мы будем использовать некоторые сторонние библиотеки, такие какLodash,ECharts,Карта ГаодеЖдать. Но продукт может поднимать какая-то сторонняя библиотека, сама не поддерживающая функцию, нужно анализировать пакет на исходной основе. Например, я взял на себя проект карты Gaode, большая часть страницы имеет функцию карты Gaode, поэтому я делюсь экземпляром карты на нескольких страницах. Продукт предлагает новые потребности, и уровень, масштабируемый на разных страницах, может быть разным, а сам компонент ZOOM карты Gaode не может реализовать эту функцию, поэтому нам необходимо упаковать эту функцию.

<template>
  <div class="cpt-zoom">
    <button @click="zoomIn">+</button>
    <span>{{ zoom }}</span>
    <button @click="zoomOut">-</button>
  </div>
</template>

<script>
export default {
  props: {
    min: Number,
    max: Number,
    map: {
      type: Object,
      required: true
    }
  },

  data() {
    return {
      zoom: this.map.getZoom()
    };
  },

  methods: {
    zoomIn() {
      // 处理
    },

    zoomOut() {
      // 处理
    }
  }
};
</script>

Посмотреть онлайн-примеры

наконец

При разработке ежедневных бизнес-компонентов я резюмировал несколько моментов:

  1. Является ли эта функциональность универсальной (по крайней мере, на нее ссылаются две или более страниц)? Если функция будет использоваться только на одной странице, рекомендуется поместить компонент в папку текущей страницы.
  2. Является ли эта функция независимой?Если нет, то этот компонент может быть распакован на несколько компонентов.Если эти подкомпоненты не используются и на них нет отдельных ссылок, их можно поместить в одну папку. Также возможна ситуация, если код ценовой группы превышает 200 строк, то функцию также следует разделить, что облегчит чтение и обслуживание.
  3. Добавьте пространство области действия стиля к компонентам, чтобы избежать конфликтов стилей.
  4. Добавляйте эту функцию только тогда, когда она нужна бизнесу.Я часто делаю ошибку в разработке "может быть использована позже". Мы на самом деле думали, что эта функция может быть полезной, поэтому мы написали ее слишком рано, только для того, чтобы обнаружить, что они просто будут тихо сидеть, добавляя много бесполезного кода в компонент.
  5. Если сам компонент не имеет данных и сложных вычисляемых свойств, рекомендуется писать его какфункциональные компоненты.

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

Категории