mirror of
https://github.com/tidys/cc-inspector-chrome
synced 2025-10-23 10:35:23 +00:00
devtool_panel调整
This commit is contained in:
许彦峰
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<div>
|
||||
<div>
|
||||
<h4 @click="onClickComp" style="margin-top: 5px;margin-bottom: 1px;font-weight: bold;cursor: pointer">挂载组件:</h4>
|
||||
<hr style="margin-bottom: 2px;margin-top: 2px;"/>
|
||||
</div>
|
||||
<div v-show="isShowComp">
|
||||
<ui-prop :name="index" track-by="$index" v-for="(comp,index) in components" :key="index">
|
||||
<span>{{comp.type}}</span>
|
||||
</ui-prop>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "",
|
||||
data() {
|
||||
return {
|
||||
isShowComp: true,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onClickComp() {
|
||||
this.isShowComp = !this.isShowComp;
|
||||
}
|
||||
},
|
||||
props: [
|
||||
'components'
|
||||
]
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
span {
|
||||
color: #fd942b;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,282 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<div>
|
||||
<ui-prop name="uuid">
|
||||
<span> {{itemData.uuid}}</span>
|
||||
</ui-prop>
|
||||
<ui-prop name="name">
|
||||
<span> {{itemData.name}}</span>
|
||||
</ui-prop>
|
||||
<!--坐标-->
|
||||
<ui-prop name="Position">
|
||||
<div style="float: left;width: 100%;">
|
||||
<ui-prop name="X" style="width: 50%;float: left; cursor: ew-resize;"
|
||||
@movestep="changePositionActionX"
|
||||
step="10">
|
||||
<!--<span>{{itemData.x}}</span>-->
|
||||
<input class="myInput"
|
||||
@change="changePosition"
|
||||
placeholder="itemData.x"
|
||||
v-model="itemData.x">
|
||||
</ui-prop>
|
||||
<ui-prop name="Y" style="width: 50%;float:left;cursor: ew-resize;"
|
||||
@movestep="changePositionActionY"
|
||||
step="10">
|
||||
<!--<span>{{itemData.y}}</span>-->
|
||||
<input class="myInput"
|
||||
@change="changePosition"
|
||||
placeholder="itemData.y"
|
||||
v-model="itemData.y">
|
||||
</ui-prop>
|
||||
</div>
|
||||
</ui-prop>
|
||||
<!--旋转-->
|
||||
<!--rotationX, rotationY暂时舍弃显示-->
|
||||
<ui-prop name="Rotation">
|
||||
<span> {{itemData.rotation}}</span>
|
||||
<!--<input class="myInput"-->
|
||||
<!--@change="changeRotation"-->
|
||||
<!--placeholder="itemData.rotation"-->
|
||||
<!--v-model="itemData.rotation"-->
|
||||
<!--style="width: 98%">-->
|
||||
</ui-prop>
|
||||
<!--缩放-->
|
||||
<ui-prop name="Scale">
|
||||
<div style="float: left;width: 100%;">
|
||||
<ui-prop name="X" style="width: 50%;float: left;">
|
||||
<span>{{itemData.scaleX}}</span>
|
||||
</ui-prop>
|
||||
<ui-prop name="Y" style="width: 50%;float:left;">
|
||||
<span>{{itemData.scaleY}}</span>
|
||||
</ui-prop>
|
||||
</div>
|
||||
</ui-prop>
|
||||
<!--锚点-->
|
||||
<ui-prop name="Anchor">
|
||||
<div style="float: left;width: 100%;">
|
||||
<ui-prop name="X" style="width: 50%;float: left;">
|
||||
<span>{{itemData.anchorX}}</span>
|
||||
</ui-prop>
|
||||
<ui-prop name="Y" style="width: 50%;float:left;">
|
||||
<span>{{itemData.anchorY}}</span>
|
||||
</ui-prop>
|
||||
</div>
|
||||
</ui-prop>
|
||||
<!--尺寸-->
|
||||
<ui-prop name="Size">
|
||||
<div style="float: left;width: 100%;">
|
||||
<ui-prop name="W" style="width: 50%;float: left;cursor: ew-resize;"
|
||||
@movestep="changeSizeActionWidth"
|
||||
step="10">
|
||||
<!--<span>{{itemData.width}}</span>-->
|
||||
<input class="myInput"
|
||||
@change="changeSize"
|
||||
placeholder="itemData.width"
|
||||
v-model="itemData.width">
|
||||
</ui-prop>
|
||||
<ui-prop name="H" style="width: 50%;float:left;cursor: ew-resize;"
|
||||
@movestep="changeSizeActionHeight"
|
||||
step="10">
|
||||
<!--<span>{{itemData.height}}</span>-->
|
||||
<input class="myInput"
|
||||
@change="changeSize"
|
||||
placeholder="itemData.height"
|
||||
v-model="itemData.height">
|
||||
</ui-prop>
|
||||
</div>
|
||||
</ui-prop>
|
||||
</ui-prop>
|
||||
<!--透明度-->
|
||||
<ui-prop name="Opacity">
|
||||
<span>{{itemData.opacity}}</span>
|
||||
</ui-prop>
|
||||
<!--斜切-->
|
||||
<ui-prop name="Skew">
|
||||
<div style="float: left;width: 100%;">
|
||||
<ui-prop name="X" style="width: 50%;float: left;">
|
||||
<span>{{itemData.skewX}}</span>
|
||||
</ui-prop>
|
||||
<ui-prop name="Y" style="width: 50%;float:left;">
|
||||
<span>{{itemData.skewY}}</span>
|
||||
</ui-prop>
|
||||
</div>
|
||||
</ui-prop>
|
||||
</div>
|
||||
<ui-prop name="zIndex">
|
||||
<span>{{itemData.zIndex}}</span>
|
||||
</ui-prop>
|
||||
<ui-prop name="childrenCount">
|
||||
<span>{{itemData.childrenCount}}</span>
|
||||
</ui-prop>
|
||||
<!--节点状态-->
|
||||
<ui-prop name="active">
|
||||
<p v-if="itemData.active" style="margin: 0;display: flex;align-items: center;flex-wrap: wrap;">
|
||||
<input type="checkbox"
|
||||
style="width: 20px;height: 20px;"
|
||||
:checked="itemData.active"
|
||||
@click="onBtnClickNodeHide">
|
||||
隐藏节点
|
||||
</p>
|
||||
|
||||
<p v-if="!itemData.active" style="margin: 0;display: flex;align-items: center;flex-wrap: wrap;">
|
||||
<input type="checkbox"
|
||||
style="width: 20px;height: 20px;"
|
||||
:checked="itemData.active"
|
||||
@click="onBtnClickNodeShow"
|
||||
>
|
||||
显示节点
|
||||
</p>
|
||||
</ui-prop>
|
||||
<!--颜色-->
|
||||
<ui-prop name="color">
|
||||
<div style="float: left;width: 100%;height: 100%;">
|
||||
<div style="float: left;width: 50%; height: 100%;">
|
||||
<el-color-picker v-model="itemData.color" size="mini"
|
||||
style="margin: 0;display: flex;align-items: center;flex-wrap: wrap;"
|
||||
@change="changeColor"></el-color-picker>
|
||||
</div>
|
||||
<div style="float: left;width: 50%;">
|
||||
<span>{{itemData.color}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ui-prop>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
export default {
|
||||
name: "app",
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
changeSizeActionWidth(step) {
|
||||
let w = parseFloat(this.itemData.width);
|
||||
this.itemData.width = w + step;
|
||||
this.changeSize();
|
||||
},
|
||||
changeSizeActionHeight(step) {
|
||||
let h = parseFloat(this.itemData.height);
|
||||
this.itemData.height = h + step;
|
||||
this.changeSize();
|
||||
},
|
||||
changePositionActionX(step) {
|
||||
let x = parseFloat(this.itemData.x);
|
||||
this.itemData.x = x + step;
|
||||
this.changePosition();
|
||||
},
|
||||
changePositionActionY(step) {
|
||||
let y = parseFloat(this.itemData.y);
|
||||
this.itemData.y = y + step;
|
||||
this.changePosition();
|
||||
},
|
||||
changePosition() {
|
||||
// console.log("change changePositionX:" + this.itemData.x);
|
||||
// console.log("change changePositionY:" + this.itemData.y);
|
||||
this._evalCode(
|
||||
"window.pluginSetNodePosition(" +
|
||||
"'" + this.itemData.uuid + "'," +
|
||||
"'" + this.itemData.x + "'," +
|
||||
"'" + this.itemData.y + "'" +
|
||||
")");
|
||||
this._freshNode();
|
||||
},
|
||||
changeSize() {
|
||||
// console.log("change width:" + this.itemData.width);
|
||||
// console.log("change height:" + this.itemData.height);
|
||||
this._evalCode(
|
||||
"window.pluginSetNodeSize(" +
|
||||
"'" + this.itemData.uuid + "'," +
|
||||
"'" + this.itemData.width + "'," +
|
||||
"'" + this.itemData.height + "'" +
|
||||
")");
|
||||
this._freshNode();
|
||||
},
|
||||
changeRotation() {
|
||||
console.log("change rotation:" + this.itemData.rotation);
|
||||
this._evalCode(
|
||||
"window.pluginSetNodeRotation('" +
|
||||
this.itemData.uuid + "','" +
|
||||
this.itemData.rotation + "')");
|
||||
this._freshNode();
|
||||
},
|
||||
changeColor() {
|
||||
let color = this.itemData.color;
|
||||
console.log("color:" + color);
|
||||
this._evalCode(
|
||||
"window.pluginSetNodeColor('" +
|
||||
this.itemData.uuid + "','" +
|
||||
color + "');");
|
||||
this._freshNode();
|
||||
},
|
||||
onBtnClickNodeHide() {
|
||||
let uuid = this.itemData.uuid;
|
||||
if (uuid !== undefined) {
|
||||
let code = "window.pluginSetNodeActive('" + uuid + "', 0);";
|
||||
this._evalCode(code);
|
||||
this._freshNode();
|
||||
}
|
||||
},
|
||||
onBtnClickNodeShow() {
|
||||
let uuid = this.itemData.uuid;
|
||||
if (uuid !== undefined) {
|
||||
let code = "window.pluginSetNodeActive('" + uuid + "', 1);";
|
||||
this._evalCode(code);
|
||||
this._freshNode();
|
||||
}
|
||||
},
|
||||
_freshNode() {
|
||||
let uuid = this.itemData.uuid;
|
||||
let code2 = "window.getNodeInfo('" + uuid + "')";
|
||||
this._evalCode(code2);
|
||||
},
|
||||
_evalCode(code) {
|
||||
if (chrome && chrome.devtools) {
|
||||
chrome.devtools.inspectedWindow.eval(code);
|
||||
} else {
|
||||
console.log(code);
|
||||
}
|
||||
},
|
||||
},
|
||||
props: [
|
||||
'itemData'
|
||||
]
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
span {
|
||||
color: #fd942b;
|
||||
}
|
||||
|
||||
.btnSize {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.comp {
|
||||
border: 2px solid #a1a1a1;
|
||||
padding: 5px 5px;
|
||||
background: #dddddd;
|
||||
width: 100%;
|
||||
border-radius: 5px;
|
||||
-moz-border-radius: 5px; /* 老的 Firefox */
|
||||
}
|
||||
|
||||
.float-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.compBorder {
|
||||
border: 1px solid #b3b3b3;
|
||||
background: #ffffff
|
||||
}
|
||||
|
||||
.myInput {
|
||||
width: 90%;
|
||||
border-radius: 5px;
|
||||
color: #fd942b;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<!--<h1> cc_Scene</h1>-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "app",
|
||||
data() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
23
CocosCreatorInspector/src/devtools/panel/index.js
Normal file
23
CocosCreatorInspector/src/devtools/panel/index.js
Normal file
@@ -0,0 +1,23 @@
|
||||
import Vue from 'vue';
|
||||
import ElementUI from 'element-ui'
|
||||
import 'element-ui/lib/theme-chalk/index.css'
|
||||
import index from './index.vue';
|
||||
|
||||
import ui_prop from './ui/ui-prop.vue'
|
||||
import NodeBaseProperty from './ccType/NodeBaseProperty.vue'
|
||||
import SceneProperty from './ccType/SceneProperty.vue'
|
||||
import ComponentsProperty from './ccType/ComponentsProperty'
|
||||
import ColorPicker from './ui/colorPicker'
|
||||
|
||||
|
||||
Vue.component('ui-prop', ui_prop);
|
||||
Vue.component('NodeBaseProperty', NodeBaseProperty);
|
||||
Vue.component('SceneProperty', SceneProperty);
|
||||
Vue.component('ComponentsProperty', ComponentsProperty);
|
||||
Vue.component('ColorPicker', ColorPicker);
|
||||
|
||||
Vue.use(ElementUI);
|
||||
new Vue({
|
||||
el: '#app',
|
||||
render: h => h(index)
|
||||
});
|
||||
220
CocosCreatorInspector/src/devtools/panel/index.vue
Normal file
220
CocosCreatorInspector/src/devtools/panel/index.vue
Normal file
@@ -0,0 +1,220 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<el-button type="success" class="el-icon-refresh" size="mini" @click="onBtnClickUpdatePage">刷新</el-button>
|
||||
<!--<el-button type="success" size="mini" @click="onTestData">测试</el-button>-->
|
||||
<!--<el-button type="success" size="mini" @click="onBtnClickTest">test</el-button>-->
|
||||
<div v-show="isShowDebug">
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<div class="grid-content treeList">
|
||||
<el-tree :data="treeData"
|
||||
:props="defaultProps"
|
||||
:expand-on-click-node="false"
|
||||
@node-click="handleNodeClick"></el-tree>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<div class="grid-content bg-purple-light treeInfo">
|
||||
<NodeBaseProperty v-bind:itemData="treeItemData"></NodeBaseProperty>
|
||||
<SceneProperty v-show=" treeItemData.type === 'cc_Scene'"></SceneProperty>
|
||||
<ComponentsProperty v-bind:components="treeItemData.components"></ComponentsProperty>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div v-show="!isShowDebug">
|
||||
未发现cocos creator的游戏!
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import injectScript from '../injectScript.js'
|
||||
let injectScript = "";
|
||||
|
||||
export default {
|
||||
name: "app",
|
||||
data() {
|
||||
return {
|
||||
isShowDebug: false,
|
||||
treeItemData: {},
|
||||
treeData: [],
|
||||
treeDataMap: {},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (chrome && chrome.extension) {
|
||||
|
||||
} else {
|
||||
this.isShowDebug = true;
|
||||
this.onTestData();
|
||||
return;
|
||||
}
|
||||
let backgroundPageConnection = chrome.extension.connect({
|
||||
name: btoa("for" + String(chrome.devtools.inspectedWindow.tabId))
|
||||
});
|
||||
backgroundPageConnection.onMessage.addListener(function (message) {
|
||||
if (message !== null) {
|
||||
let msgType = {
|
||||
nodeInfo: 2,//节点信息
|
||||
nodeListInfo: 1,// 节点列表信息
|
||||
notSupport: 0,// 不支持的游戏
|
||||
};
|
||||
if (message.type === msgType.nodeListInfo) {// 游戏节点
|
||||
this.isShowDebug = true;
|
||||
// let str = JSON.stringify(message.msg);
|
||||
// console.log("onMessage: " + str);
|
||||
this._updateView(message.msg);
|
||||
} else if (message.type === msgType.notSupport) {// 不支持调试
|
||||
this.isShowDebug = false;
|
||||
} else if (message.type === msgType.nodeInfo) {
|
||||
this.isShowDebug = true;
|
||||
this.treeItemData = message.msg;
|
||||
}
|
||||
}
|
||||
}.bind(this));
|
||||
|
||||
window.addEventListener('message', function (event) {
|
||||
console.log("on vue:" + JSON.stringify(event.data));
|
||||
console.log("on vue:" + JSON.stringify(event));
|
||||
}, false);
|
||||
},
|
||||
methods: {
|
||||
onTestData() {
|
||||
let testData = {
|
||||
"type": "cc_Node",
|
||||
"uuid": "5cUWX4Yh1MipGk+ssnZ/fL",
|
||||
"name": "Canvas",
|
||||
"x": 960,
|
||||
"y": 540.4931506849315,
|
||||
"zIndex": 0,
|
||||
"childrenCount": 6,
|
||||
"children": [],
|
||||
"width": 1920,
|
||||
"height": 1080.986301369863,
|
||||
"color": "#fff85f",
|
||||
"opacity": 255,
|
||||
"rotation": 0,
|
||||
"rotationX": 0,
|
||||
"rotationY": 0,
|
||||
"anchorX": 0.5,
|
||||
"anchorY": 0.5,
|
||||
"scaleX": 1,
|
||||
"scaleY": 1,
|
||||
"skewX": 0,
|
||||
"skewY": 0,
|
||||
"components": [
|
||||
{
|
||||
"uuid": "Comp.931",
|
||||
"type": "cc_Canvas",
|
||||
"name": "Canvas<Canvas>"
|
||||
},
|
||||
{
|
||||
"uuid": "Comp.932",
|
||||
"type": "HotUpdateScene",
|
||||
"name": "Canvas<HotUpdateScene>"
|
||||
}],
|
||||
"active": true
|
||||
};
|
||||
this.treeItemData = testData;
|
||||
},
|
||||
handleNodeClick(data) {
|
||||
// todo 去获取节点信息
|
||||
// console.log(data);
|
||||
let uuid = data.uuid;
|
||||
if (uuid !== undefined) {
|
||||
let code = "window.getNodeInfo('" + uuid + "')";
|
||||
chrome.devtools.inspectedWindow.eval(code);
|
||||
}
|
||||
},
|
||||
_updateView(data) {
|
||||
// 构建树形数据
|
||||
this.treeData = [];
|
||||
let sceneData = data.scene;
|
||||
if (sceneData) {
|
||||
// scene info
|
||||
let dataRoot = {
|
||||
type: sceneData.type, uuid: sceneData.uuid,
|
||||
label: sceneData.name, children: []
|
||||
};
|
||||
this.treeData.push(dataRoot);
|
||||
this.handleNodeClick(dataRoot);
|
||||
// scene children info
|
||||
for (let k in sceneData.children) {
|
||||
let itemSceneData = sceneData.children[k];
|
||||
// let sceneItem = {uuid: itemSceneData.uuid, label: itemSceneData.name, children: []};
|
||||
let sceneItem = {};
|
||||
dealChildrenNode(itemSceneData, sceneItem);
|
||||
this.treeData[0].children.push(sceneItem);
|
||||
}
|
||||
}
|
||||
// TODO 节点树折叠的问题
|
||||
if (JSON.stringify(this.treeData) === "[]") {// 第一次赋值
|
||||
|
||||
} else {// 更新值
|
||||
}
|
||||
|
||||
function dealChildrenNode(rootData, obj) {
|
||||
obj['data'] = rootData;
|
||||
obj['uuid'] = rootData.uuid;
|
||||
obj['label'] = rootData.name;
|
||||
obj['type'] = rootData.type;
|
||||
obj['children'] = [];
|
||||
let rootChildren = rootData.children;
|
||||
for (let k in rootChildren) {
|
||||
let itemData = rootChildren[k];
|
||||
let item = {};
|
||||
dealChildrenNode(itemData, item);
|
||||
obj.children.push(item);
|
||||
}
|
||||
}
|
||||
},
|
||||
_getInjectScriptString() {
|
||||
let code = injectScript.toString();
|
||||
let array = code.split('\n');
|
||||
array.splice(0, 1);// 删除开头
|
||||
array.splice(-1, 1);// 删除结尾
|
||||
let evalCode = "";
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
evalCode += array[i] + '\n';
|
||||
}
|
||||
// console.log(evalCode);
|
||||
return evalCode;
|
||||
},
|
||||
|
||||
onBtnClickUpdatePage() {
|
||||
let code = this._getInjectScriptString();
|
||||
chrome.devtools.inspectedWindow.eval(code, function () {
|
||||
console.log("刷新成功!");
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.treeList {
|
||||
height: 100%
|
||||
}
|
||||
|
||||
.treeInfo {
|
||||
height: 100%
|
||||
}
|
||||
|
||||
.bg-purple {
|
||||
background: #d3dce6;
|
||||
}
|
||||
|
||||
.grid-content {
|
||||
border-radius: 4px;
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
.bg-purple-light {
|
||||
background: #e5e9f2;
|
||||
}
|
||||
|
||||
body span h1 h2 h3 {
|
||||
font-family: BlinkMacSystemFont, 'Helvetica Neue', Helvetica, 'Lucida Grande', 'Segoe UI', Ubuntu, Cantarell, 'SourceHanSansCN-Normal', Arial, sans-serif
|
||||
}
|
||||
</style>
|
||||
229
CocosCreatorInspector/src/devtools/panel/ui/colorPicker.vue
Normal file
229
CocosCreatorInspector/src/devtools/panel/ui/colorPicker.vue
Normal file
@@ -0,0 +1,229 @@
|
||||
<template lang="html">
|
||||
<div class="m-colorPicker" ref="colorPicker" v-on:click="event => { event.stopPropagation() }">
|
||||
<!-- 颜色显示小方块 -->
|
||||
<div class="colorBtn"
|
||||
v-bind:style="`background-color: ${showColor}`"
|
||||
v-on:click="openStatus = !disabled"
|
||||
v-bind:class="{ disabled: disabled }"
|
||||
></div>
|
||||
<!-- 用以激活HTML5颜色面板 -->
|
||||
<input type="color"
|
||||
ref="html5Color"
|
||||
v-model="html5Color"
|
||||
v-on:change="updataValue(html5Color)">
|
||||
<!-- 颜色色盘 -->
|
||||
<div class="box" v-bind:class="{ open: openStatus }">
|
||||
<div class="hd">
|
||||
<div class="colorView" v-bind:style="`background-color: ${showPanelColor}`"></div>
|
||||
<div class="defaultColor"
|
||||
v-on:click="handleDefaultColor"
|
||||
v-on:mouseover="hoveColor = defaultColor"
|
||||
v-on:mouseout="hoveColor = null"
|
||||
>默认颜色</div>
|
||||
</div>
|
||||
<div class="bd">
|
||||
<h3>主题颜色</h3>
|
||||
<ul class="tColor">
|
||||
<li
|
||||
v-for="color of tColor"
|
||||
v-bind:style="{ backgroundColor: color }"
|
||||
v-on:mouseover="hoveColor = color"
|
||||
v-on:mouseout="hoveColor = null"
|
||||
v-on:click="updataValue(color)"
|
||||
></li>
|
||||
</ul>
|
||||
<ul class="bColor">
|
||||
<li v-for="item of colorPanel">
|
||||
<ul>
|
||||
<li
|
||||
v-for="color of item"
|
||||
v-bind:style="{ backgroundColor: color }"
|
||||
v-on:mouseover="hoveColor = color"
|
||||
v-on:mouseout="hoveColor = null"
|
||||
v-on:click="updataValue(color)"
|
||||
></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h3>标准颜色</h3>
|
||||
<ul class="tColor">
|
||||
<li
|
||||
v-for="color of bColor"
|
||||
v-bind:style="{ backgroundColor: color }"
|
||||
v-on:mouseover="hoveColor = color"
|
||||
v-on:mouseout="hoveColor = null"
|
||||
v-on:click="updataValue(color)"
|
||||
></li>
|
||||
</ul>
|
||||
<h3 v-on:click="triggerHtml5Color">更多颜色...</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'colorPicker',
|
||||
props: {
|
||||
// 当前颜色值
|
||||
value: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
// 默认颜色
|
||||
defaultColor: {
|
||||
type: String,
|
||||
default: '#000'
|
||||
},
|
||||
// 禁用状态
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
// 面板打开状态
|
||||
openStatus: false,
|
||||
// 鼠标经过的颜色块
|
||||
hoveColor: null,
|
||||
// 主题颜色
|
||||
tColor: ['#000', '#fff', '#eeece1', '#1e497b', '#4e81bb', '#e2534d', '#9aba60', '#8165a0', '#47acc5', '#f9974c'],
|
||||
// 颜色面板
|
||||
colorConfig: [
|
||||
['#7f7f7f', '#f2f2f2'],
|
||||
['#0d0d0d', '#808080'],
|
||||
['#1c1a10', '#ddd8c3'],
|
||||
['#0e243d', '#c6d9f0'],
|
||||
['#233f5e', '#dae5f0'],
|
||||
['#632623', '#f2dbdb'],
|
||||
['#4d602c', '#eaf1de'],
|
||||
['#3f3150', '#e6e0ec'],
|
||||
['#1e5867', '#d9eef3'],
|
||||
['#99490f', '#fee9da']
|
||||
],
|
||||
// 标准颜色
|
||||
bColor: ['#c21401', '#ff1e02', '#ffc12a', '#ffff3a', '#90cf5b', '#00af57', '#00afee', '#0071be', '#00215f', '#72349d'],
|
||||
html5Color: this.value
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 显示面板颜色
|
||||
showPanelColor () {
|
||||
if (this.hoveColor) {
|
||||
return this.hoveColor
|
||||
} else {
|
||||
return this.showColor
|
||||
}
|
||||
},
|
||||
// 显示颜色
|
||||
showColor () {
|
||||
if (this.value) {
|
||||
return this.value
|
||||
} else {
|
||||
return this.defaultColor
|
||||
}
|
||||
},
|
||||
// 颜色面板
|
||||
colorPanel () {
|
||||
let colorArr = []
|
||||
for (let color of this.colorConfig) {
|
||||
colorArr.push(this.gradient(color[1], color[0], 5))
|
||||
}
|
||||
return colorArr
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
triggerHtml5Color () {
|
||||
this.$refs.html5Color.click()
|
||||
},
|
||||
// 更新组件的值 value
|
||||
updataValue (value) {
|
||||
this.$emit('input', value)
|
||||
this.$emit('change', value)
|
||||
this.openStatus = false
|
||||
},
|
||||
// 设置默认颜色
|
||||
handleDefaultColor () {
|
||||
this.updataValue(this.defaultColor)
|
||||
},
|
||||
// 格式化 hex 颜色值
|
||||
parseColor (hexStr) {
|
||||
if (hexStr.length === 4) {
|
||||
hexStr = '#' + hexStr[1] + hexStr[1] + hexStr[2] + hexStr[2] + hexStr[3] + hexStr[3]
|
||||
} else {
|
||||
return hexStr
|
||||
}
|
||||
},
|
||||
// RGB 颜色 转 HEX 颜色
|
||||
rgbToHex (r, g, b) {
|
||||
let hex = ((r << 16) | (g << 8) | b).toString(16)
|
||||
return '#' + new Array(Math.abs(hex.length - 7)).join('0') + hex
|
||||
},
|
||||
// HEX 转 RGB 颜色
|
||||
hexToRgb (hex) {
|
||||
hex = this.parseColor(hex)
|
||||
let rgb = []
|
||||
for (let i = 1; i < 7; i += 2) {
|
||||
rgb.push(parseInt('0x' + hex.slice(i, i + 2)))
|
||||
}
|
||||
return rgb
|
||||
},
|
||||
// 计算渐变过渡颜色
|
||||
gradient (startColor, endColor, step) {
|
||||
// 讲 hex 转换为 rgb
|
||||
let sColor = this.hexToRgb(startColor)
|
||||
let eColor = this.hexToRgb(endColor)
|
||||
|
||||
// 计算R\G\B每一步的差值
|
||||
let rStep = (eColor[0] - sColor[0]) / step
|
||||
let gStep = (eColor[1] - sColor[1]) / step
|
||||
let bStep = (eColor[2] - sColor[2]) / step
|
||||
|
||||
let gradientColorArr = []
|
||||
// 计算每一步的hex值
|
||||
for (let i = 0; i < step; i++) {
|
||||
gradientColorArr.push(this.rgbToHex(parseInt(rStep * i + sColor[0]), parseInt(gStep * i + sColor[1]), parseInt(bStep * i + sColor[2])))
|
||||
}
|
||||
return gradientColorArr
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
// 点击页面上其他地方，关闭弹窗
|
||||
document.onclick = (e) => {
|
||||
this.openStatus = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.m-colorPicker{
|
||||
position: relative; text-align: left; font-size: 14px; display: inline-block;
|
||||
ul,li,ol{ list-style: none; margin: 0; padding: 0; }
|
||||
input{ display: none; }
|
||||
.colorBtn{ width: 15px; height: 15px; }
|
||||
.colorBtn.disabled{ cursor: no-drop; }
|
||||
.box{
|
||||
position: absolute; width: 190px; background: #fff; border: 1px solid #ddd; visibility: hidden; border-radius: 2px; margin-top: 2px; padding: 10px; padding-bottom: 5px; box-shadow: 0 0 5px rgba(0,0,0,.15); opacity: 0; transition: all .3s ease;
|
||||
h3{ margin: 0; font-size: 14px; font-weight: normal; margin-top: 10px; margin-bottom: 5px; line-height: 1; }
|
||||
}
|
||||
.box.open{ visibility: visible; opacity: 1; }
|
||||
.hd{
|
||||
overflow: hidden; line-height: 29px;
|
||||
.colorView{ width: 100px; height: 30px; float: left; transition: background-color .3s ease; }
|
||||
.defaultColor{ width: 80px; float: right; text-align: center; border: 1px solid #ddd; cursor: pointer; }
|
||||
}
|
||||
.tColor{
|
||||
li{ width: 15px; height: 15px; display: inline-block; margin: 0 2px; transition: all .3s ease; }
|
||||
li:hover{ box-shadow: 0 0 5px rgba(0,0,0,.4); transform: scale(1.3); }
|
||||
}
|
||||
.bColor{
|
||||
li{
|
||||
width: 15px; display: inline-block; margin: 0 2px;
|
||||
li{ display: block; width: 15px; height: 15px; transition: all .3s ease; margin: 0; }
|
||||
li:hover{ box-shadow: 0 0 5px rgba(0,0,0,.4); transform: scale(1.3); }
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
79
CocosCreatorInspector/src/devtools/panel/ui/ui-prop.vue
Normal file
79
CocosCreatorInspector/src/devtools/panel/ui/ui-prop.vue
Normal file
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<div id="app" style="height: 30px;overflow: hidden;width: 100%;">
|
||||
<div style="width: 20%;float: left;background-color: #4a4a4a;text-align: left;"
|
||||
@mousedown="changePositionMouseAction"
|
||||
onselectstart="return false;"
|
||||
class="noselect">
|
||||
<span onselectstart="return false;" class="noselect font"
|
||||
style="line-height: 30px;color: #bdbdbd;font-size: 12px;margin: 3px;">
|
||||
{{name}}
|
||||
</span>
|
||||
</div>
|
||||
<div style=" float:left;background-color: #4a4a4a;width: 80%;height:100%;text-align: left;">
|
||||
<div style="line-height: 30px;height: 100%;">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "app",
|
||||
data() {
|
||||
return {
|
||||
clientX: 0,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
changePositionMouseAction(event) {
|
||||
document.addEventListener("mousemove", this._onMouseMove);
|
||||
document.addEventListener("mouseup", this._onMouseUp);
|
||||
document.addEventListener("onselectstart", this._onSelect);
|
||||
},
|
||||
_onSelect() {
|
||||
return false;
|
||||
},
|
||||
_onMouseMove(event) {
|
||||
let x = event.clientX;
|
||||
let calcStep = parseFloat(this.step) || 1;// 默认值为1
|
||||
// console.log("curentX: " + x);
|
||||
// console.log("clientX: " + this.clientX);
|
||||
if (x > this.clientX) {
|
||||
calcStep = Math.abs(calcStep);
|
||||
} else {
|
||||
calcStep = -Math.abs(calcStep);
|
||||
}
|
||||
// console.log(calcStep);
|
||||
this.$emit("movestep", calcStep);
|
||||
this.clientX = x;
|
||||
},
|
||||
_onMouseUp(event) {
|
||||
document.removeEventListener('mousemove', this._onMouseMove);
|
||||
document.removeEventListener("mouseup", this._onMouseUp);
|
||||
document.removeEventListener("onselectstart", this._onSelect);
|
||||
},
|
||||
},
|
||||
props: [
|
||||
'name',
|
||||
'step',
|
||||
]
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.font {
|
||||
font-family: BlinkMacSystemFont, 'Helvetica Neue', Helvetica, 'Lucida Grande', 'Segoe UI', Ubuntu, Cantarell, 'SourceHanSansCN-Normal', Arial, sans-serif
|
||||
}
|
||||
|
||||
.noselect {
|
||||
-webkit-touch-callout: none; /* iOS Safari */
|
||||
-webkit-user-select: none; /* Chrome/Safari/Opera */
|
||||
-khtml-user-select: none; /* Konqueror */
|
||||
-moz-user-select: none; /* Firefox */
|
||||
-ms-user-select: none; /* Internet Explorer/Edge */
|
||||
user-select: none;
|
||||
/* Non-prefixed version, currently
|
||||
not supported by any browser */
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user