vue css.js_使用CSS Grid构建的自适应Vue.js注释系统插件-CSDN博客

vue css.js

Vue.js注释网格 (Vue.js Comment Grid)

speech_balloon Responsive Vue.js comment system plugin that built with CSS Grid and Firebase REST API + Authentication.

speech_balloon使用CSS Grid和Firebase REST API +身份验证构建的自适应Vue.js注释系统插件。

安装 (Installation)

下载插件 (Downloading Plugin)

npm install --save vue-comment-grid

依存关系 (Dependencies)

Axios - For HTTP requests.
Axios-用于HTTP请求。

If you already use Axios in your project then no dependencies at all. 🤗

如果您已经在项目中使用Axios，则完全没有依赖项。 🤗

包括插件 (Include Plugin)

Include plugin in your main.js file.

在main.js文件中包含插件。

import Vue from 'vue'
import CommentGrid from 'vue-comment-grid'

Vue.use(CommentGrid)

️️⚠️ The following steps are important please read all.

️️⚠️ 以下步骤很重要，请仔细阅读所有内容。

Most steps will only performing once.

大多数步骤只会执行一次。

Believe me, i wanted zero config usage for you but for security reasons some steps need to be setting up manually by you.

相信我，我希望您使用零配置，但是出于安全原因 ，您需要手动设置一些步骤。

创建Firebase项目 (Creating Firebase Project)

Create new project in firebase console.

在Firebase控制台中创建新项目。

If you don't know how to create new project see detailed here.

如果您不知道如何创建新项目，请参见此处。

设置登录方法 (Setting Up Sign-In Method)

Enable Email/Password method under Firebase Authentication menu.

在Firebase身份验证菜单下启用电子邮件/密码方法。

If you don't know how to enable Email/Password sign-in method see detailed here.

如果您不知道如何启用电子邮件/密码登录方法，请参阅此处的详细信息。

获取基本URL和API密钥 (Getting Base URL and API Key)

Get databaseURL and apiKey from Firebase.

从Firebase获取databaseURL和apiKey。

You can find Firebase databaseURL and apiKey in web setup under authentication menu from Firebase console.

您可以从Firebase控制台的“身份验证”菜单下的Web设置中找到Firebase databaseURL和apiKey。

If you don't know how to get there see detailed here.

如果您不知道如何到达那里，请参阅此处的详细信息。

创建数据库节点名称 (Creating Database Node Name)

For security reasons you need to create node names manually by yourself. Before passing new nodeName for different pages be sure you created that node name in database.

出于安全原因，您需要自己手动创建节点名称。在为不同的页面传递新的nodeName之前，请确保已在数据库中创建了该节点名称。

If you adding your first node name add Name: commentsGrid/nodeNameYouWant/active Value: true under Realtime Database Root.

如果添加第一个节点名称，请在“实时数据库根”下添加“ Name: commentsGrid/nodeNameYouWant/active Value: true ”。

For other node names that you will create add Name: nodeNameYouWant/active Value: true under commentsGrid .

对于将要创建的其他节点名称，在commentsGrid下添加Name: nodeNameYouWant/active Value: true 。

If you don't know how to do this see detailed here.

如果您不知道该怎么做，请参阅此处的详细信息。

设置数据库规则 (Setting Up Database Rules)

Set Realtime Database Rules to this.

为此设置实时数据库规则。

If you don't know how to change database rules see detailed here.

如果您不知道如何更改数据库规则，请参见此处的详细信息。

授予自己的管理员权限 (Giving Yourself Admin Permission)

After setting up database rules, you have everything that you need. Pass required values as props to component and run system.

设置数据库规则后，您将拥有所需的一切。将所需的值作为道具传递给组件和运行系统。

First sign up as a normal user in the comment system then find yourself under commentUsers node in Firebase Database and add new child Name: admin Value: true there.

首先在评论系统中以普通用户身份注册，然后在Firebase数据库的commentUsers节点下找到自己，并添加新的子Name: admin Value: true 。

If you want to give more people admin permission just add them admin: true child too.

如果您想给更多的人管理员权限，只需添加他们admin: true孩子。

If you don't know how to do this see detailed here.

如果您不知道该怎么做，请参阅此处的详细信息。

更改名称或评论长度的道具 (Changing Name or Comment Length Props)

The default max user name length is "30" and default max comment length is "1000" character long. If you want change this values then you need to change values from Firebase Rules too. See detailed here.

默认的最大用户名长度为“ 30”，默认的最大注释长度为“ 1000”字符长。如果要更改此值，则还需要从Firebase规则中更改值。详见这里。

用法 (Usage)

<comment-grid 
  baseURL="https://your-app.firebaseio.com"
  apiKey="your-api-key"
  nodeName="nodeNameThatYouCreated">
</comment-grid>

The above code is default required settings.

上面的代码是默认的必需设置。

深色背景的默认设置 (Default settings with Dark Backgrounds)

浅色背景的默认设置 (Default settings with Light Backgrounds)

道具 (Props)

Name	Type	Default	Description	Required
baseURL	String	null	databaseURL of your Firebase Project	True
apiKey	String	null	apiKey of your Firebase Project	True
nodeName	String	null	node name that you created in Firebase Realtime Database	True
maxUserNameLength	String	"30"	The name of the user must be below this value when sign-up. If you change this value then you need to change values from Firebase Rules too. See docs.	Optional
maxCommentLength	String	"1000"	The character limit of comments. If you change this value then you need to change values from Firebase Rules too. See docs.	Optional
initialMessageLimit	String	"10"	Sets maximum message limit to shown at first load. When 'Show more comment' is clicked, the number of comment impressions will increase by this number.	Optional
maxLineLimit	String	"40"	Sets line break limit. This is for prevent users from creating too many lines. Exceeded line breaks will be converted to spaces. Lines number are stored in database, so under this limit comments show directly without any operation.	Optional
maxShowingDepth	String	"5"	Sets maximum reply depth to shown. This is not a maximum reply depth limit. Just for showing and hiding. There is no limit for depth.	Optional
background	String	"transparent"	This is for customizing the background color of component. You can pass HEX, RGB, RGBA, HSL, HSV and even Gradient values.	Optional
commentBackgroundColor	String	"white"	This is for customizing the color of comment box. You can pass HEX, RGB, etc. like the ones above.	Optional
commentTextColor	String	"#1d2129"	This is for customizing the color of comments. You can pass HEX, RGB, etc. like the ones above.	Optional
userNameColor	String	"rgb(6, 177, 183)"	This is for customizing the color of user names. You can pass HEX, RGB, etc. like the ones above.	Optional

名称	类型	默认	描述	需要
baseURL	串	空值	Firebase项目的databaseURL	真正
apiKey	串	空值	您的Firebase项目的apiKey	真正
nodeName	串	空值	您在Firebase Realtime数据库中创建的节点名称	真正
maxUserNameLength	串	“ 30”	注册时，用户名必须低于此值。如果您更改此值，则还需要从Firebase规则中更改值。参见文档。	可选的
maxCommentLength	串	“ 1000”	注释的字符数限制。如果您更改此值，则还需要从Firebase规则中更改值。参见文档。	可选的
initialMessageLimit	串	“ 10”	将最大消息限制设置为在首次加载时显示。单击“显示更多评论”时，评论印象数将增加此数字。	可选的
maxLineLimit	串	“ 40”	设置换行限制。这是为了防止用户创建太多行。超出的换行符将转换为空格。行号存储在数据库中，因此在此限制下，注释无需任何操作即可直接显示。	可选的
maxShowingDepth	串	“ 5”	将最大回复深度设置为所示。这不是最大答复深度限制。仅用于显示和隐藏。深度没有限制。	可选的
背景	串	“透明”	这是用于自定义组件的背景色。您可以传递十六进制，RGB，RGBA，HSL，HSV甚至是渐变值。	可选的
commentBackgroundColor	串	“白色”	这是用于自定义注释框的颜色。您可以像上面那样传递HEX，RGB等。	可选的
commentTextColor	串	“＃1d2129”	这是用于自定义注释的颜色。您可以像上面那样传递HEX，RGB等。	可选的
userNameColor	串	“ rgb(6，177，183)”	这是用于自定义用户名的颜色。您可以像上面那样传递HEX，RGB等。	可选的