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)
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 网格组件