elementui添加代码

要添加Element UI代码，请参考以下步骤：

1. 安装Element UI：npm install element-ui --save

2. 将Element UI组件导入到项目中：import ElementUI from 'element-ui'

3. 注册Element UI组件：Vue.use(ElementUI)

4. 在.vue文件中使用Element UI：<el-button type="primary">Hello Element</el-button>

2.1?首先建立主配置界面：

安装好 CocoStudio

程序，并准备好所需要的素材

建立新的项目，命名“ChaosFight”,设置分辨率（根据实际需要），这里手动填写分辨率。

导入游戏的素材到项目，在界面添加图片框控件，显示背景

根据需要添加控件，在这个主界面上我们添加了，一个图片框，下面四个文本按钮，再下面一排四个图片按钮，最下面是两个文本按钮和一个文本框（文本域）。

在编辑时，我们需要注意以下几点：

设置图片按钮之时，可以设置禁用时显示的图片。所有的可点击 *** 作的控件，需要启用“交互”属性。

设置按钮属性 默认图片 与 点击效果图 的图片相同（或者不同，按下效果图如果不设置，实际 *** 作按下也不显示，空白）

导出各部分资源文件

2.2?其次我们需要一个 “修改密码” 的二级 UI 界面：

新建立项目，并导入相关资源。

设计界面，如下图所示：

这里我们添加了三组密码框。而在设计这样三个类似控件集的时候，有个技巧，我们首先局部好一个个控件区域，如上“旧密码”区域，然后我们将相关的控件树结构，统一在一起，如图：

点击右侧对象结构，我们可以复制整个树枝“节点”，然后粘贴到树中，如上图，“新密码”区域，我们将相关的控件集合在“新密码”节点，然后拖动此节点，可以很好的完成内部元素的相对位置。

修改相关属性，命名规范并导出资源

3?编写代码控制页面逻辑

建立新的工程，引入 CocoGUILIB 扩展库，和 UI

编辑器导出的资源文件（工程建立步骤请实时关注官方说明，不同版本 *** 作步骤不同，这里使用的时 2.1.4e

版本，请下载最新的版本库，以使用最简单的方法配置环境等。）

创建一个新的场景类，用于加载我们的 UI

资源，并编写相关逻辑，其关键代码如下（实现加载，跳转逻辑控制功能） 所有代码即工程资源:

?工程代码下载 地址：点击下载整个工程

#ifndef TestCpp_ChaosFight_h

#define TestCpp_ChaosFight_h

#include "cocos2d.h"

#include "CocosGUI.h"

USING_NS_CC

USING_NS_CC_EXT

class ChaosFightUI: public CCLayer{

public:

static CCScene* scene()

virtual bool init()

CREATE_FUNC(ChaosFightUI)

void tbChangePwdCallback(CCObject* pSender)

void tbBindingEmailCallback(CCObject* pSender)

void tbChangeRoleCallback(CCObject* pSender)

void tbLogoutCallback(CCObject* pSender)

void btnSoundEffectCallback(CCObject* pSender)

void btnMusicEffectCallback(CCObject* pSender)

void btnSavingElectricityCallback(CCObject* pSender)

void btnVideoCallback(CCObject* pSender)

void tbAboutCallback(CCObject* pSender)

void tbClearCacheCallback(CCObject* pSender)

void btnXCallback(CCObject* pSender)

void tbOkCallback(CCObject* pSender)

private:

UILayer* ul

UILayer* ulPwd

UIButton* btnX

UITextButton* tbOk

UITextField* tfOldPwd

UITextField* tfNewPwd

UITextField* tfNewPwdConfirm

}

#endif

#include "ChaosFight.h"

CCScene* ChaosFightUI::scene(){

CCScene* scene = CCScene::create()

CCLayer* layer = ChaosFightUI::create()

scene->addChild(layer)

return scene

}

bool ChaosFightUI::init(){

bool bRef = false

do{

CC_BREAK_IF(! CCLayer::init())

ul = UILayer::create()

// 设置 UI 层的tag

this->addChild(ul, 0, 100)

ul->addWidget(CCUIHELPER->createWidgetFromJsonFile("ChaosFight_1/ChaosFight_1.json"))

// 获得各个控件，并添加点击事件

UITextButton* tbChangePwd = dynamic_cast<UITextButton*>(ul->getWidgetByName("tbChangePwd"))

UITextButton* tbBindingEmail = dynamic_cast<UITextButton*>(ul->getWidgetByName("tbBindingEmail"))

UITextButton* tbChangeRole = dynamic_cast<UITextButton*>(ul->getWidgetByName("tbChangeRole"))

UITextButton* tbLogout = dynamic_cast<UITextButton*>(ul->getWidgetByName("tbLogout"))

UIButton* btnSoundEffect = dynamic_cast<UIButton*>(ul->getWidgetByName("btnSoundEffect"))

UIButton* btnMusic = dynamic_cast<UIButton*>(ul->getWidgetByName("btnMusic"))

UIButton* btnSavingElectricity = dynamic_cast<UIButton*>(ul->getWidgetByName("btnSavingElectricity"))

UIButton* btnVideo = dynamic_cast<UIButton*>(ul->getWidgetByName("btnVideo"))

UITextButton* tbAbout = dynamic_cast<UITextButton*>(ul->getWidgetByName("tbAbout"))

UITextButton* tbClearCache = dynamic_cast<UITextButton*>(ul->getWidgetByName("tbClearCache"))

// 设置字体颜色

tbChangePwd->setTextColor(0, 0, 0)

tbBindingEmail->setTextColor(0, 0, 0)

tbChangeRole->setTextColor(0, 0, 0)

tbLogout->setTextColor(0, 0, 0)

tbAbout->setTextColor(0, 0, 0)

tbClearCache->setTextColor(0, 0, 0)

// 为控件添加处理事件

tbChangePwd->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::tbChangePwdCallback))

tbBindingEmail->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::tbBindingEmailCallback))

tbChangeRole->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::tbChangeRoleCallback))

tbLogout->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::tbLogoutCallback))

btnSoundEffect->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::btnSoundEffectCallback))

btnMusic->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::btnMusicEffectCallback))

btnSavingElectricity->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::btnSavingElectricityCallback))

btnVideo->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::btnVideoCallback))

tbAbout->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::tbAboutCallback))

tbClearCache->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::tbClearCacheCallback))

bRef = true

}while(0)

return bRef

}

void ChaosFightUI::tbChangePwdCallback(cocos2d::CCObject *pSender){

// 创建加载修改密码界面 ulPwd 作为类成员属性，以便重用

ulPwd = UILayer::create()

ulPwd->addWidget(CCUIHELPER->createWidgetFromJsonFile("ChaosFightPassword_1/ChaosFightPassword_1.json"))

this->addChild(ulPwd)

ulPwd->setAnchorPoint(CCPoint(0.5,0.5))

CCSize winSize = CCDirector::sharedDirector()->getWinSize()

ulPwd->setPosition(CCPoint(winSize.width / 2 - 250, winSize.height / 2 - 180))

// 获取点击确定按钮

tbOk = dynamic_cast<UITextButton*>(ulPwd->getWidgetByName("tbOk"))

tbOk->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::tbOkCallback))

tbOk->setTextColor(0, 0, 0)

tfOldPwd = dynamic_cast<UITextField*>(ulPwd->getWidgetByName("tfOldPwd"))

tfNewPwd = dynamic_cast<UITextField*>(ulPwd->getWidgetByName("tfNewPwd"))

tfNewPwdConfirm = dynamic_cast<UITextField*>(ulPwd->getWidgetByName("tfNewPwdConfirm"))

tfOldPwd->setColor(ccc3(0, 0, 0))

tfNewPwd->setColor(ccc3(0, 0, 0))

tfNewPwdConfirm->setColor(ccc3(0, 0, 0))

ul->setTouchEnabled(false)

}

void ChaosFightUI::tbBindingEmailCallback(cocos2d::CCObject *pSender){

CCMessageBox("绑定邮箱", "title")

}

void ChaosFightUI::tbChangeRoleCallback(cocos2d::CCObject* pSender){

CCMessageBox("切换角色", "title")

}

void ChaosFightUI::tbLogoutCallback(cocos2d::CCObject *pSender){

CCMessageBox("注销", "title")

}

void ChaosFightUI::btnSoundEffectCallback(cocos2d::CCObject *pSender){

CCMessageBox("音效", "title")

}

void ChaosFightUI::btnMusicEffectCallback(cocos2d::CCObject *pSender){

CCMessageBox("音乐", "title")

}

void ChaosFightUI::btnSavingElectricityCallback(cocos2d::CCObject *pSender){

CCMessageBox("省电", "title")

}

void ChaosFightUI::btnVideoCallback(cocos2d::CCObject *pSender){

CCMessageBox("片头", "title")

}

void ChaosFightUI::tbAboutCallback(cocos2d::CCObject *pSender){

CCMessageBox("关于", "title")

}

void ChaosFightUI::tbClearCacheCallback(cocos2d::CCObject *pSender){

CCMessageBox("清楚缓存", "title")

}

void ChaosFightUI::btnXCallback(cocos2d::CCObject *pSender){

CCMessageBox("btnX", "title")

}

void ChaosFightUI::tbOkCallback(cocos2d::CCObject *pSender){

// 获取文本框值，并且打印

const char* value = tfOldPwd->getStringValue()

CCLog(value)

ul->setTouchEnabled(true)

this->removeChild(ulPwd)

}

最后运行效果如下：二级 UI

界面：文本输入框控件：

---