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组件重复使用问题