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

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个事件)

View Demo 查看演示 Download Source 下载源

特征 (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)

Prop	Required	Description	Type	Default
items	YES	Array of objects (see table below)	Array	[]
mapping	NO	Objects for fields mapping	Object
options	NO	Object for configuration purpose	Object

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

Name	Description	Type	Notes
id	Product ID	String/Number	Converted to string by component
name	Product name	String*	injected HTML available
label	Product label (category, ecc)	String*	injected HTML available
abstract	Product abstract	String*	injected HTML available
image	Product image URL	URL/URI
price	Product price	Number	float 2 decimals format applied
sale_price	Product sale price	Number	float 2 decimals format applied
rating	Product rating	Number	Integer or float
isfavorite	Product in the favorite user list	Boolean

名称	描述	类型	笔记
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对象，您可以使用以下参数来自定义网格小部件。

Name	Description	Type	Default
color	background color	String	#fff
title_color	title color	String	#555
text_color	all text color	String	#ccc
price	price color	String	#555
sale_color	sale price color	String	#ff0000
rating_color	rating stars color	String	#ffd055
rating	show rating	Boolean	true
favorite	show favorite	Boolean	true
salebox	show SALE box if item is on sale	Boolean	false
currency	prepend currency to price	String	$
elevation	add box shadow effect - '0' = no effect - '1 thru 3' = 3 box shadow effects available	String	'1'
btn_1*	you can assign your html icon	String	<i class="material-icons">favorite_border</i>*
btn_1_on*	btn_1 toggle	String	<i class="material-icons">favorite</i>*
btn_2*	assign your icon html code	String	<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)

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

Event	Required	Description	Type	Return
@widgetSelected	NO	Clicked on image or title	Function	Object (product)
@widgetClick	NO	Click on btn_2	Function	Object (product)
@widgetRating	NO	Set rating click	Function	-Integer (rating): rating selected by user -Object (product): product clicked
@widgetFavorite	NO	Click on btn_1	Function	-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 网格组件