信任委托人 (vue-trustpilot)
Plugin to create Trustpilot widgets in an easy way.
插件可轻松创建Trustpilot小部件。
安装 (Install)
npm install vue-trustpilot --save
如何使用它: (How to use it:)
Add the static trustpilot script
添加静态trustpilot脚本
<script src="https://widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async=""></script>
import TrustpilotPlugin from 'vue-trustpilot'
const carouselWidget = {
templateId: 'XXXX',
businessunitId: 'XXXXX',
reviewUrl: 'trustpilot.review.com/mywebsite.com',
locale: 'en-us',
// ...more Trstupilot options in camel case
}
const reviewsListWidget = {
templateId: 'XXXX',
businessunitId: 'XXXXX',
reviewUrl: 'trustpilot.review.com/mywebsite.com',
locale: 'en-us',
// ...more Trstupilot options in camel case
}
const options = {
widgets: {
carousel: carouselWidget,
list: reviewsListWidget
}
}
Vue.use(TrustpilotPlugin, options)
The Plugin going to register the component vue-trustpilot
globally.
该插件将在全球范围内注册组件vue-trustpilot
。
In your Vue component:
在您的Vue组件中:
<template>
<vue-trustpilot identifier="carousel" />
</template>
Also, you can add more custom trustpilot arguments directly:
另外,您可以直接添加更多自定义trustpilot参数:
<template>
<vue-trustpilot
identifier="carousel"
data-theme="light"
data-schema-type="Organization"
data-stars="1,2,3,4,5"
/>
</template>
The result:
结果:
![vue-trustpilot](https://i-blog.csdnimg.cn/blog_migrate/37035ca646d452f413492cd5db78b070.png)
Additionally you can access to your widgets data using the method $trustpilot
in Vue global scope
另外,您可以在Vue全局范围内使用$trustpilot
方法访问小部件数据
<script>
export default {
methods: {
printWidgetData() {
console.log(this.$trustpilot('carousel'))
}
}
}
翻译自: https://vuejsexamples.com/plugin-to-create-trustpilot-widgets-in-an-easy-way/