vue组件重复使用问题_使用Vue可重复使用的BLiP卡

vue组件重复使用问题

点卡 (blip-cards)

Reusable BLiP cards using Vue.

使用Vue可重复使用的BLiP卡。

• No need to render the cards yourself

  无需自己渲染卡片

• One simple blip-card tag

  一个简单的便签式标签

用法 (Usage)

NPM (NPM)

$ npm install blip-cards

Just import or require like so:

只需导入或要求像这样：

var Vue = require('vue');
var blipCards = require("blip-cards");

var components = blipCards.install(Vue);

Then, reference the cards via tag as following

然后，通过 标记如下

<blip-card :document="document" :position="'left'" :date="13:00 PM" :on-selected="function" :on-save="function" :editable="true" :hide-options="false" />

Attribute	Description	Type
document	BLiP JSON envelope (REQUIRED)	Object
position	Card position, possible values are 'left' and 'right'. Default: 'left'	String
date	Date that will be shown below the card (OPTIONAL)	String
on-selected	callback function that will be called when the user interacts with the card (OPTIONAL)	Function (text, option)
on-save	callback function that will be called when the user saves the card after editing (OPTIONAL)	Function (document)
on-deleted	callback function that will be called when the user delete the card (OPTIONAL)	Function (document)
editable	make the card editable (OPTIONAL)	Boolean
hide-options	Used only in the select with scope immediate. This is used to hide the quick reply options (OPTIONAL)	Boolean

属性	描述	类型
文件	BLiP JSON信封(必填)	目的
位置	卡位置，可能的值为“左”和“右”。 默认值：“左”	串
日期	卡片下方显示的日期(可选)	串
选择的	用户与卡互动时将调用的回调函数(可选)	功能(文本，选项)
保存	用户在编辑后保存卡时将调用的回调函数(可选)	功能(文件)
删除	用户删除卡时将调用的回调函数(可选)	功能(文件)
可编辑的	使卡片可编辑(可选)	布尔型
隐藏选项	仅在具有立即作用域的选择中使用。 这用于隐藏快速回复选项(​​可选)	布尔型

团体卡 (Group Card)

Is possible to group your cards using any rule you want. For that use the tag as following

可以使用所需的任何规则对卡进行分组。 为此使用 标记如下

<blip-group-card :documents="documentList" :compare-messages="function" :on-selected="function" :on-save="function" :editable="true" :hide-options="false"/>

Attribute	Description	Type
documents	Array of BLiP JSON envelopes with the content, position and date (REQUIRED)	Array
compare-messages	callback function to determine if two messages are in the same group	Function (msg1, msg2)
on-selected	callback function that will be called when the user interacts with the card (OPTIONAL)	Function (text, option)
on-save	callback function that will be called when the user saves the card after editing (OPTIONAL)	Function (document)
on-deleted	callback function that will be called when the user delete the card (OPTIONAL)	Function (document)
editable	make the card editable (OPTIONAL)	Boolean
hide-options	Used only in the select with scope immediate. This is used to hide the quick reply options (OPTIONAL)	Boolean

属性	描述	类型
单据	带有内容，位置和日期的BLiP JSON信封数组(必填)	数组
比较消息	回调函数以确定两个消息是否在同一组中	功能(msg1，msg2)
选择的	用户与卡互动时将调用的回调函数(可选)	功能(文本，选项)
保存	用户在编辑后保存卡时将调用的回调函数(可选)	功能(文件)
删除	用户删除卡时将调用的回调函数(可选)	功能(文件)
可编辑的	使卡片可编辑(可选)	布尔型
隐藏选项	仅在具有立即作用域的选择中使用。 这用于隐藏快速回复选项(​​可选)	布尔型

会费 (Contributions)

Any contribution to the code via pull request would be nice and any idea and/or suggestion are very welcome.

通过拉取请求对代码的任何贡献都将是不错的，任何想法和/或建议都将受到欢迎。

However, please do not feel bad if your pull requests or contributions do not get merged or implemented into blip-cards.

但是，如果您的拉取请求或贡献没有被合并或实现到blip-cards ，请不要感到blip-cards 。

建造 (Building)

# install dependencies
npm install

# serve with hot reload at localhost:8081
npm run dev

# build for production with minification
npm run bundle:min

翻译自: https://vuejsexamples.com/reusable-blip-cards-using-vue/

vue组件重复使用问题