自定义io控制码

My article described how you could use pre-built components on any site regardless of the Content Management System, languages, or technologies used. The benefits include:

我的文章介绍了如何在任何站点上使用预建组件，而不管所使用的内容管理系统，语言或技术如何。 好处包括：

• hundreds of ready-made, attractive and configurable components to choose from including content blocks, galleries, navigation bars, social media widgets, forms and more
  数百种现成的，有吸引力的和可配置的组件可供选择，包括内容块，画廊，导航栏，社交媒体小部件，表单等
• component code can be installed with a simple cut and paste
  可以通过简单的剪切和粘贴来安装组件代码
• the same components can be used across other pages and sites will updated instantly
  相同的组件可以在其他页面上使用，站点将立即更新
• it’s easy for non-technical editors to make changes in a WYSIWYG editor and check it with a live preview
  非技术编辑人员可以轻松地在所见即所得编辑器中进行更改，并通过实时预览进行检查
• all users can share Component IO dashboard links and collaborate on the same items
  所有用户都可以共享组件IO仪表板链接并在相同项目上进行协作
• Component IO is fast and delivers items quickly with a single API call, regardless of the number embedded in the page
  组件IO速度很快，并且通过一个API调用即可快速交付项目，而无需考虑页面中嵌入的数量
• you can switch CMS or build processes at any point and retain components
  您可以随时切换CMS或构建流程并保留组件
• a full help guide and real-time chat assistance is available
  完整的帮助指南和实时聊天帮助

• a can be used to test the service with your system.

  一个可用于在您的系统上测试该服务。

组件IO自定义组件 (Component IO Custom Components)

Despite the huge range available, Component IO permits developers to create and edit their own components. In this tutorial, I will illustrate how to create a simple custom bar chart component which can be displayed and configured on any site:

尽管可用范围很广，但是组件IO允许开发人员创建和编辑自己的组件。 在本教程中，我将说明如何创建一个简单的自定义条形图组件，该组件可以在任何站点上显示和配置：

组件开发概念 (Component Development Concepts)

Component IO uses the component model. Those with experience with the framework will immediately recognize the concepts and syntax. That said, I’m no Vue.js expert — but a little HTML, CSS and JavaScript knowledge is enough to build a complex component.

组件IO使用组件模型。 那些具有框架经验的人将立即认识到这些概念和语法。 就是说，我不是Vue.js专家，但是只要具备一点HTML，CSS和JavaScript知识就可以构建一个复杂的组件。

All components are encapsulated; their styles and code cannot ‘leak’ to other parts of the page. For example, the bar chart component’s title is an H2 element and we can apply any styles, e.g.

所有组件都被封装； 它们的样式和代码无法“泄漏”到页面的其他部分。 例如，条形图组件的标题是H2元素，我们可以应用任何样式，例如

h2 {  font-family: comic-sans;  font-size: 8em;  color: #f00;}

Vue.js will ensure those (awful!) styles are only applied to our component and not H2 headings elsewhere on the page. However, a style applied to all H2 titles on the page can cascade to our component title. This can be useful since our component can inherit default fonts, colors and dimensions.

Vue.js将确保这些(糟糕的！)样式仅应用于我们的组件，而不应用于页面其他位置的H2标题。 但是，应用于页面上所有H2标题的样式可以层叠到我们的组件标题。 这很有用，因为我们的组件可以继承默认字体，颜色和尺寸。

步骤1：创建一个空白组件 (Step 1: Create a Blank Component)

Log in to , and then click Blank component on the Project page:

登录到 ，然后在“ 项目”页面上单击空白组件 ：

From the Edit menu, choose Edit component name and enter “barchart” or another suitable name.

从“ 编辑”菜单中，选择“ 编辑组件名称”，然后输入“ barchart”或其他合适的名称。

步骤2：定义字段 (Step 2: Define Fields)

Fields are used to configure a component. They allow:

字段用于配置组件。 他们允许：

1. Content editors to modify values.
   内容编辑器修改值。
2. Other components to be created with a different configuration. For example, if we require two bar charts, we can duplicate the first and change the field values accordingly.
   使用其他配置创建的其他组件。 例如，如果我们需要两个条形图，则可以复制第一个条形图并相应地更改字段值。

From the Edit menu, choose Add / remove fields and enter the fields you require:

从“ 编辑”菜单中，选择“ 添加/删除字段”，然后输入所需的字段：

For this control, I defined:

对于此控件，我定义了：

1. A single title text field.

   单个标题文本字段。

2. The barvalue numeric field which defines the bar’s value.

   该barvalue数字字段定义酒吧的价值。

3. The barlabel text field which defines the bar’s label.

   该barlabel文本字段定义酒吧的标签。

4. The barcolor color field which defines the bar’s color.

   条形颜色字段，用于定义条形的颜色。

These last three items had the repeat checkbox checked. We can therefore define any number of data items in our bar chart.

最后三个项目选中了重复复选框。 因此，我们可以在条形图中定义任意数量的数据项。

步骤3：设定初始资料 (Step 3: Set the Initial Data)

Hit the Edit menu to open the Content and Code control. Remaining in the Content section, I entered values for the title and three data items:

点击“ 编辑”菜单以打开“内容和代码”控件。 在“ 内容”部分中，我输入了标题的值和三个数据项：

步骤4：定义组件代码 (Step 4: Define the Component Code)

Hit the Code toggle to open the code editor. This is where the component’s HTML, CSS and JavaScript is defined:

点击代码开关以打开代码编辑器。 在此定义组件HTML，CSS和JavaScript：

The describes how templates are created. There is no need for an outer DIV or other element because the component will be automatically given one.

描述了如何创建模板。 不需要外部DIV或其他元素，因为该组件将自动获得一个。

The title field is added first:

首先添加标题字段：

Alternatively, we could use:

或者，我们可以使用：

{
   { title }}

The chart bars will be contained in a <ul> list element where each <li> displays a single value. The HTML code:

图表条将包含在<ul>列表元素中，其中每个<li>显示单个值。 HTML代码：

    
    
     
        {
   { item.barlabel }}             {
   { item.barpc }}            
    

v-for renders the <li> element multiple times depending on the repeating source data (it is assigned to the items array). Note that I have not defined fields for item.style and item.barpc at this stage since they will be calculated in JavaScript code.

v-for根据重复的源数据(将其分配给items数组)多次渲染<li>元素。 请注意，由于此阶段将使用JavaScript代码计算，因此我目前尚未为item.style和item.barpc定义字段。

The can now be defined. This will only be applied to the component itself and not any other page elements. Sass SCSS syntax can be adopted for variables, nesting and other functions but I’ve kept it simple here:

现在可以定义 。 这将仅应用于组件本身，而不应用于任何其他页面元素。 Sass SCSS语法可以用于变量，嵌套和其他函数，但是我在这里保持简单：

h2 {    font-weight: normal;}ul {    padding: 2px 0;    margin: 1em 0;    list-style-type: none;    border-left: 1px solid #666;}li {    line-height: 1.2;    padding: 1px 4px;    margin: 0 0 1px 0;}span {    display: block;    color: #888;    mix-blend-mode: difference;}strong {    float: right;    font-size: 0.8em;    font-weight: normal;    line-height: 1.5;}

Note that I have not set font styles or sizes so the component can inherit these from the page where it is used.

请注意，我尚未设置字体样式或大小，因此组件可以从使用它的页面继承这些样式或大小。

Each Component IO component is a Vue.js instance and can use . For example:

每个Component IO组件都是一个Vue.js实例，可以使用 。 例如：

• component.data holds field values such as component.data.title and component.data.items[0].barlabel. If we change a value, it will be instantly updated in the component.

  component.data包含字段值，例如component.data.title和component.data.items[0].barlabel 。 如果我们更改一个值，它将在组件中立即更新。

• the component.mounted method is called as soon as the component has been rendered.

  呈现组件后，将立即调用component.mounted方法。

The barchart component requires initialization code to calculate:

条形图组件需要初始化代码来计算：

1. the sum of all bar values (totValue), and

   所有条形值的总和( totValue )，以及

2. the highest value (maxValue). This will have a bar which uses 100% of the available space.

   最大值( maxValue )。 这将有一个使用100％可用空间的栏。

// initialisationlet     items = component.data.items,    totValue = 0, maxValue = 0;for (let i = 0; i < items.length; i++) {    totValue += items[i].barvalue;    maxValue = Math.max(maxValue, items[i].barvalue);    items[i].style = '';}

The component.mounted method can now calculate each bar’s percentage and create the bar lengths using a CSS background linear-gradient:

component.mounted方法现在可以使用CSS背景线性渐变来计算每个钢筋的百分比并创建钢筋长度：

// component createdcomponent.mounted = function() {    for (let i = 0; maxValue && i < items.length; i++) {        let             color = items[i].barcolor || '#888',            pc = Math.round(items[i].barvalue / maxValue * 100);        // calculate bar percentage        items[i].barpc = (Math.round(items[i].barvalue / totValue * 100)) + '%';        // set bar style        items[i].style = 'background-image:linear-gradient(90deg,' + color + ' ' +             pc + '%,transparent ' + pc + '%,transparent ' + (100 - pc) + '%);';    }};

Hit Save (or press Ctrl + S) and close the editor using the X at the top-left.

点击保存 (或按Ctrl + S)，然后使用左上角的X关闭编辑器。

步骤5：预览组件 (Step 5: Preview Your Component)

All going well, the component is now rendered as expected:

一切顺利，该组件现在按预期方式呈现：

You can change field data to see how it affects the component.

您可以更改字段数据以查看它如何影响组件。

If anything fails, open your browser developer tools (F12 or Ctrl|Cmd + Shift + I) and examine any error messages in the console. The provides further information about APIs and using code within other frameworks.

如果失败，请打开浏览器开发人员工具( F12或Ctrl | Cmd + Shift + I )，然后在控制台中检查所有错误消息。 提供了有关API以及在其他框架内使用代码的更多信息。

步骤6：在您的网站上安装组件 (Step 6: Install the Component on Your Site)

The component can be installed on any website where you are able to insert HTML code (a system such as is ideal). Hit the Install button to view the instructions.

该组件可以安装在任何您可以插入HTML代码的网站上(理想的系统是的系统)。 点击安装按钮以查看说明。

The first component on the page will require both the component HTML, e.g.

页面上的第一个组件将同时需要两个组件HTML，例如

… and the Component IO script (just before the closing </body> tag is ideal):

…和Component IO脚本(在理想的</body>标记之前)：

Subsequent components on that page just need their <component> tag.

该页面上的后续组件仅需要其<component>标记。

See the Pen by Craig Buckler () on .

请参阅上Craig Buckler( ) 的Pen 。

Users will see an edit icon on the right-hand side of the page if they are logged in to their Component IO account. When they click the icon, they can choose one of the components and edit the field data or code.

如果用户登录到其组件IO帐户，则将在页面的右侧看到一个编辑图标。 单击图标时，他们可以选择其中一个组件并编辑字段数据或代码。

提示组件化的工作流程！ (Cue Componentized Workflow!)

Custom components provides a flexible, modular development workflow for any website regardless of the CMS, server-side language, or technologies. Components can be shared, modified, duplicated and put live without a complicated build process or a rigid CMS plug-in system. You can be productive immediately without having to learn yet another web-based eco-system!

自定义组件为任何网站提供了灵活的模块化开发工作流程，无论CMS，服务器端语言或技术如何。 无需复杂的构建过程或严格的CMS插件系统，即可共享，修改，复制和启用组件。 您无需学习另一个基于Web的生态系统，就可以立即提高生产力！

provides a simple tool which could revolutionize how you approach new features and updates for clients. It’s easy to start with pre-built widgets then create your own component collection. – you have nothing to lose!

提供了一个简单的工具，可以彻底改变您为客户端使用新功能和更新的方式。 从预构建的小部件开始然后创建自己的组件集合很容易。 - 您没有损失！

翻译自:

自定义io控制码