vue 网格组件_响应式Vue组件,可为电子商务应用创建产品网格

茅桐
2023-12-01

vue 网格组件

Vue产品网格 (vue-products-grid)

vue-products-grid is a responsive Vue component to create a products grid for ecommerce apps. Fully configurable with different options and reactive with full integration in your template/project (4 events emitted)

vue-products-grid是一个响应性Vue组件,用于为电子商务应用程序创建产品网格。 可以通过不同的选项进行完全配置,并可以与模板/项目进行完全集成(生成4个事件)

特征 (Features)

  • fully responsive grid ready (CSS) for desktop, laptop, mobile

    适用于台式机,笔记本电脑和移动设备的完全响应式网格就绪(CSS)

  • data mapping with your data structure

    与您的数据结构进行数据映射

  • many custom options for visual impact (colors, etc.)

    许多视觉效果的自定义选项(颜色等)

  • fullprice/sale price display

    全价/促销价显示

  • sale box option (can be disabled)

    销售框选项(可以禁用)

  • rating stars included with emit event (can be disabled)

    发射事件附带的评级星(可以禁用)

  • 1 configurable HTML toggle button with emit event (i.e. favorite item)

    1个带有发射事件的可配置HTML切换按钮(即收藏夹项)

  • 1 configurable HTML button with emit event (i.e. add to cart)

    1个可配置的带有发射事件HTML按钮(即添加到购物车)

  • 1 clickable area with emit event

    1个具有发射事件的可点击区域

  • HTML injection available for some elements

    HTML注入可用于某些元素

安装 (Installation)

npm install vue-products-grid

用法 (Usage)

Import component

导入组件

import ProductsGrid from 'vue-products-grid'

In template (for options and configuration see Docs below)

在模板中(有关选项和配置,请参见下面的文档)

...
  <products-grid
    :items="items"
  />
...

* Remarks

*备注

文件 (Docs)

vue-products-grid has many features and options that you can control in order to fit with your template/layout/app.

vue-products-grid具有许多功能和选项,您可以控制这些功能和选项以适合您的模板/布局/应用程序。

We designed the component in order to make compatible with a clean project so we decided to not include any dependency. For this reason you can add to any Vue project as is, without depending on third libraries, or simply using yours.

我们设计该组件是为了使其与干净的项目兼容,因此我们决定不包括任何依赖项。 因此,您可以按原样添加到任何Vue项目,而无需依赖于第三个库,也可以仅使用您的库。

For any issue please open an issue on github repository.

对于任何问题,请在github存储库上打开一个问题。

The rating element has been forked and included in the component from the vue-star-rating component [https://github.com/craigh411/vue-star-rating] by craigh411. 评分元素已由craigh411分叉并包含在vue-star-rating组件[https://github.com/craigh411/vue-star-rating]的组件中。

道具 (Props)

PropRequiredDescriptionTypeDefault
itemsYESArray of objects
(see table below)
Array[]
mappingNOObjects for fields mappingObject
optionsNOObject for configuration purposeObject
Struts 需要 描述 类型 默认
项目 对象数组
(见下表)
数组 []
映射 没有 字段映射对象 目的
选项 没有 用于配置目的的对象 目的

items道具定义 (items prop definition)

items prop as array of objects requires a defined structure for each object. If your data don't match the following structure use mapping as described below

items对象作为对象数组需要为每个对象定义结构。 如果您的数据与以下结构不匹配,请按照以下说明使用mapping

NameDescriptionTypeNotes
idProduct IDString/NumberConverted to string by component
nameProduct nameString*injected HTML available
labelProduct label (category, ecc)String*injected HTML available
abstractProduct abstractString*injected HTML available
imageProduct image URLURL/URI
priceProduct priceNumberfloat 2 decimals format applied
sale_priceProduct sale priceNumberfloat 2 decimals format applied
ratingProduct ratingNumberInteger or float
isfavoriteProduct in the favorite user listBoolean
名称 描述 类型 笔记
ID 产品编号 字符串/数字 按组件转换为字符串
名称 产品名称 串* 注入HTML可用
标签 产品标签(类别,ecc) 字串* 注入HTML可用
抽象 产品摘要 串* 注入HTML可用
图片 产品图片网址 网址/ URI
价钱 产品价格 浮动2位小数格式
销售价格 产品销售价 浮动2位小数格式
评分 产品等级 整数或浮点数
最喜欢的 收藏用户列表中的产品 布尔型

* With name, label and abstract fields you can inject HTML code directly

*使用名称,标签和抽象字段,您可以直接注入HTML代码

Example of HTML injection on title field:

在标题字段上注入HTML的示例:

items:[
  {
    id: '1',
    title: '<style color="red">My title</style>',
    ...
  },
  ...
]

映射道具定义 (Mapping prop definition)

When your data don't match the items prop definition you can map your data structure directly without making any conversion and pass to the component with the mapping prop.

当你的数据不匹配的items道具定义,你可以直接映射你的数据结构未做任何转换,并通过与组件mapping道具。

Mapping Fields example:

映射字段示例:

<template>
  ...
  <product-grid
    :items = "items"
    :mapping = "mapping" //your data structure mapping
    :options = "options"
    ...
  />
</template>
...
  data:()=>({
    ...
    //mapping data structure
    mapping: {
      id:   'your id field',
      name: 'your product name field',
      label: 'your label field',
      abstract: 'your abstract field'
      price: 'your price field',
      sale_price: 'your sale price field',
      image: 'your image field',
      isfavorite: 'your favorite field',
      rating: 'your rating field'
    },
  })

options prop的配置参数 (Configuration params for options prop)

With the options object you can customize your grid widgets with the following params.

使用options对象,您可以使用以下参数来自定义网格小部件。

NameDescriptionTypeDefault
colorbackground colorString#fff
title_colortitle colorString#555
text_colorall text colorString#ccc
priceprice colorString#555
sale_colorsale price colorString#ff0000
rating_colorrating stars colorString#ffd055
ratingshow ratingBooleantrue
favoriteshow favoriteBooleantrue
saleboxshow SALE box if item is on saleBooleanfalse
currencyprepend currency to priceString$
elevationadd box shadow effect
- '0' = no effect
- '1 thru 3' = 3 box shadow effects available
String'1'
btn_1*you can assign your html iconString<i class="material-icons">favorite_border</i>*
btn_1_on*btn_1 toggleString<i class="material-icons">favorite</i>*
btn_2*assign your icon html codeString<i class="material-icons">shopping_cart</i>*
名称 描述 类型 默认
颜色 背景颜色 #fff
title_color 标题颜色 #555
text_color 所有文字颜色 #ccc
价钱 价格颜色 #555
sale_color 销售价格颜色 #ff0000
rating_color 评级星星颜色 #ffd055
评分 显示评分 布尔型 真正
喜爱 显示最爱 布尔型 真正
销售箱 如果有特价商品,请显示“ SALE”框 布尔型
货币 将货币置于价格之前 $
海拔 添加框阴影效果
-'0'=无效
-'1至3'= 3个阴影效果可用
'1'
btn_1 * 您可以分配HTML图标 <i class="material-icons">favorite_border</i> *
btn_1_on * btn_1切换 <i class="material-icons">favorite</i> *
btn_2 * 分配您的图标HTML代码 <i class="material-icons">shopping_cart</i> *

注意 (Note)

* to use default values you need to add the Google Material Icons to your project.

*要使用默认值,您需要将Google材料图标添加到您的项目中。

Example:

例:

...
 data: ()=>({
    config : {
      color: '#fafafa',
      title_color: '#ff0000',
      ....
    }
 })

大事记 (Events)

vue-products-grid emits 4 events (this.$emit(...)) in order to get the following user actions:

vue-products-grid发出4个事件(this。$ emit(...)),以获取以下用户操作:

  • click on image or title

    点击图片或标题

  • click add to cart (shopping cart icon)

    单击添加到购物车(购物车图标)

  • click on rating (user set rating)

    点击评分(用户设置评分)

  • click on favorite icon (add to favorite)

    单击收藏夹图标(添加到收藏夹)

The above events needs to be declared in the component bindings to connect your template. Your template needs to have the functions declared in the binding in the methods section (see complete examble below)

上述事件需要在组件绑定中声明以连接您的模板。 您的模板需要具有在方法部分的绑定中声明的功能(请参见下面的完整说明)

EventRequiredDescriptionTypeReturn
@widgetSelectedNOClicked on image or titleFunctionObject (product)
@widgetClickNOClick on btn_2FunctionObject (product)
@widgetRatingNOSet rating clickFunction-Integer (rating): rating selected by user
-Object (product): product clicked
@widgetFavoriteNOClick on btn_1Function-Object (product): product clicked
- Boolean (true/false): product favorite
-Integer (index): index of the items array
事件 需要 描述 类型 返回
@widgetSelected 没有 点击图片或标题 功能 对象(产品)
@widgetClick 没有 点击btn_2 功能 对象(产品)
@widgetRating 没有 设置等级点击 功能 -整数(等级):用户选择的等级
-对象(产品):点击的产品
@widget收藏 没有 点击btn_1 功能 -对象(产品):点击的产品
-布尔值(对/错):最喜欢的产品
-Integer(index):项数组的索引

You can assign your custom logic to each emitted event. Example : you can change the add to cart event emitted behavior to open the single product page instead to add to cart logic.

您可以将自定义逻辑分配给每个发出的事件。 示例:您可以更改添加到购物车事件的发出行为,以打开单个产品页面,而不是添加到购物车逻辑。

完整的例子 (Full Example)

<template>
  <products-grid
     :items="items"
     :options="options"
     @widgetSelected="set_preview"
     @widgetClick="add_to_cart"
     @widgetRating="set_rating"
     @widgetFavorite="set_favorite"
   />
</template>
<script>
import ProductsGrid from 'vue-products-grid.vue'
export default {
  name: "test",
  components:{
    ProductsGrid
  },
  data: () => ({
    //sample data
    items: [
      { _id: "1", product: "Margherita", fullprice: 22, sale: 0 , category: "Sliced Pizza" , description: "<span style='color:#ccc'>my description width a style injected</span>" ,image: "https://storage.googleapis.com/ghostfood-539ae.appspot.com/images/pizza_2.jpg" , fav: false},
      { _id: "2", product: "Capricciosa", fullprice: 25, sale: 22 , category: "Sliced Pizza" , description: "my description" , image: "https://storage.googleapis.com/ghostfood-539ae.appspot.com/images/pizza_3.jpg" , fav: false , stars: 3.5},
      { _id: "3", product: "Napoli", fullprice: 20, sale: 0 , category: "Sliced Pizza" , description: "my description" , image: "https://storage.googleapis.com/ghostfood-539ae.appspot.com/images/pizza_4.jpg" , fav: false },
      { _id: "3", product: "Salame Piccante", fullprice: 19, sale: 0 , category: "Sliced Pizza" , description: "my description" ,image: "https://storage.googleapis.com/ghostfood-539ae.appspot.com/images/pizza_5.jpg" , fav: false }
    ],
    //mapping fields
    mapping: {
      id:   '_id',
      name: 'product',
      label: 'category',
      abstract: 'description',
      price: 'fullprice',
      sale_price: 'sale',
      image: 'image',
      isfavorite: 'fav',
      rating: 'stars'
    },
    //sample configuration
    options: {
      color: "#fff",
      title_color: "#555",
      text_color: "#ccc",
      price_color: "#555",
      sale_color: "#ff0000",
      icons_color: "#888",
      rating_color: "#ff0000",
      elevation: "1",
      rating: true,
      favorite: true,
      currency: "€",
      salebox: true,
      elevation: '1',
      btn_1: '<i class="material-icons">favorite_border</i>',
      btn_1_on: '<i class="material-icons">favorite</i>',
      btn_2: '<i class="material-icons">shopping_cart</i>',
    },
  }),
  methods: {
    set_preview(product) {
      //.. do your logic ...
      console.log("clicked product=>", product);
    },
    add_to_cart(product) {
      //.. do your logic ...
      console.log("add_to_cart product=>", product);
    },
    set_rating(rating, product) {
      //.. do your logic ...
      console.log("rating=>", rating, "product=>", product);
    },
    set_favorite(product, status, index) {
      //.. do your logic ...
      this.items[index].isfavorite = status;
      console.log("favorite product=>", product, "status=>", status);
    }
  }
};
</script>

路线图 (Roadmap)

  • add themes options (predefined themes)

    添加主题选项(预定义主题)

笔记 (Notes)

Development or demo Component uses Google Material Design icons. If you don't have any icons library you can add to your index.html

开发或演示组件使用Google Material Design图标。 如果您没有任何图标库,则可以将其添加到index.html

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">

翻译自: https://vuejsexamples.com/a-responsive-vue-component-to-create-a-products-grid-for-ecommerce-apps/

vue 网格组件

 类似资料: