@pluginarch/create-parch
Version:
this is way to create a ui project
321 lines (313 loc) • 10.5 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<title>图形编辑器demo</title>
<link rel="stylesheet" href="../lib/nusp-ui.css" />
<script src="./js/vue.min.js"></script>
<script src="./js/esprima.min.js"></script>
<script src="./js/estraverse.js"></script>
<script src="./js/escodegen.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<!-- <div id="app" style="width: 600px; height: 600px;">
<div id="app-render-upxgaugeitem"></div>
</div> -->
<!-- <div id="app-progressBar" style="width: 320px; height: 40px;">
<div id="app-render-progressBar"></div>
</div>-->
<div id="app" style="width: 600px; height: 600px;">
<div id="app-render"></div>
</div>
<!-- <div id="app2" style="width: 120px; height: 36px;">
<div id="app-render2"></div>
</div>
<div id="app-label" style="width: 120px; height: 236px;">
<div id="app-render-label"></div>
</div>
<div id="app-progressBar" style="width: 320px; height: 40px;">
<div id="app-render-progressBar"></div>
</div>
<div id="app-slider" style="width: 320px; height: 150px;">
<div id="app-render-slider"></div>
</div>
<div id="app-mediaView" style="width:300px;height:300px;">
<div id="app-render-mediaView"></div>
</div>
<div id="app-webView" style="width:1200;height:1080px;">
<div id="app-render-webView"></div>
</div>
<div id="app-switchButton" style="width: 200px;height:50px;">
<div id="app-render-switchButton"></div>
</div>
<div id="app-switchButton" style="width: 200px;height:50px;">
<div id="app-render-switchButton"></div>
</div>
<div id="app-dLabel" style="width:100px; height: 82px;">
<div id="app-render-dLabel-dSource"></div>
<div id="app-render-dataSource-dLabel"></div>
</div>
<div id="app-animateImage" style="width:100px; height: 82px;">
<div id="app-render-animateImage"></div>
</div>
<div id="app-spinner" style="width: 80px;height: 20px;padding: 0 20px;">
<div id="app-render-spinner"></div>
</div>
<div id="app-composecombobox" style="width: 120px;height: 20px;">
<div id="app-render-composecombobox-dsource"></div>
<div id="app-render-datasource-ccbBox"></div>
</div>
<div id="app-drawer" style="width: 80px;height: 20px;padding: 0 20px;">
<div id="app-render-drawer"></div>
</div>
<div id="app-menu" style="width: 250px;height: 20px;padding: 0 20px;">
<div id="app-render-menu"></div>
</div>
<div id="app-searchboxview" style="width: 250px;height: 40px;padding: 0 20px;">
<div id="app-render-searchboxview"></div>
</div>-->
<script src="./js/genScript.js"></script>
<script src="./js/init.js"></script>
<script src="../lib/nusp-ui.umd.min.js"></script>
<script src="../lib/nusp-ui.umd.min.js.map"></script>
<script src="../lib/nusp-lib.umd.min.js"></script>
<script src="./testData/button.js"></script>
<script src="./testData/toggleGroup.js"></script>
<script src="./testData/label.js"></script>
<script src="./testData/digitalfolp.js"></script>
<script src="./testData/dataSource.js"></script>
<script src="./testData/nbinding.js"></script>
<script src="./testData/silder.js"></script>
<script src="./testData/combobox.js"></script>
<script src="./testData/progressBar.js"></script>
<script src="./testData/mediaView.js"></script>
<script src="./testData/webView.js"></script>
<script src="./testData/switchButton.js"></script>
<script src="./testData/dLabel.js"></script>
<script src="./testData/animateImage.js"></script>
<script src="./testData/spinner.js"></script>
<script src="./testData/composecombobox.js"></script>
<script src="./testData/drawer.js"></script>
<script src="./testData/menu.js"></script>
<script src="./testData/searchBoxView.js"></script>
<script src="./testData/upxgaugeitem.js"></script>
<script src="./testData/treeview.js"></script>
<script>
// 事件总线singleton, 需要初始化时加载
window.$eventbus = window.$eventbus || new Vue()
Vue.prototype.$eventbus = window.$eventbus
function changeEventStr(props) { // 组属性改变事件字符串变量
let proschangedstr = ''
for (let i in props) {
proschangedstr += `on${props[i].replace(/^\S/, s => s.toUpperCase())}Changed: {
console.log('eventName:'+arguments[0],'oldVal=>newVal:'+arguments[1]+'=>'+arguments[2])
}`
}
return proschangedstr
}
function propsArr(elmArr) { // 从js中获取属性的值
return Object.keys(elmArr.attrMap).filter(val => val != 'id')
}
</script>
<script>
// initRender(
// upxgaugeitemArr,
// '#app-render-upxgaugeitem',
// ``)
// initRender(
// composecomboboxAttr,
// '#app-render',
// `function aa(index, text){
// console.log('onPressed',index, text);
// }`)
// initRender(digitalflopAttr, '#app-render2', '')
// initRender(
// nbindingAttr,
// '#app-render2',
// ``
// )
initRender(
buttonAttr,
'#app-render',
`onClicked: {
jsonName.sort(compareFunction( param1, param2 ) =>{} );
}
`
)
initRender(
buttonAttr,
'#app-render',
`onClicked: {
jsonName.sort(compareFunction( param1, param2 ) =>{} );
}
`
)
// // initRender(
// // 'combobox111',
// // comboboxAttr,
// // '#app-render',
// // `onValueChangeAction: {
// // console.log(value);
// // }`
// // )
// /*
// 测试label组件
// */
// initRender(
// labelAttr,
// '#app-render-label',
// changeEventStr(propsArr(labelAttr)))
/*
// 测试组件slider
// */
// initRender(
// sliderAttr,
// '#app-render-slider',
// changeEventStr(propsArr(sliderAttr))+`onValueChangeAction: {
// console.log('onValueChangeAction:'+value)
// }`)
// /*
// 测试组件progressBar
// */
initRender(
progressBarAttr,
'#app-render-progressBar',
changeEventStr(propsArr(progressBarAttr))+`onProgressChangeAction: {
console.log('onProgressChangeAction:'+progress)
}`)
// /*
// 测试组件mediaView
// */
// initRender(
// mediaViewAttr,
// '#app-render-mediaView',
// changeEventStr(propsArr(mediaViewAttr))+`onClicked: {
// console.log('onClicked')
// }
// onRightButtonClicked:{
// console.log('onRightButtonClicked')
// }
// onErrorAction:{
// console.log('onErrorAction', event)
// }`)
// /*
// 测试组件webView
// */
// initRender(
// webViewAttr,
// '#app-render-webView',
// changeEventStr(propsArr(webViewAttr))+`onJsCallBack: {
// console.log('onJsCallBack---value',value)
// }
// `)
// /*
// 测试组件切换开关switchButton
// */
// initRender(
// switchButtonAttr,
// '#app-render-switchButton',
// changeEventStr(propsArr(switchButtonAttr))+`onToggleLeft: {
// console.log('onToggleLeft')
// }
// onToggleRight: {
// console.log('onToggleRight')
// }
// `)
// /*
// 测试组件动态数据DLabel
// */
// initRender(
// dLabelAttr,
// '#app-render-dLabel-dSource',
// changeEventStr(propsArr(dLabelAttr))+`onDataReturn: {
// console.log('onDataReturn')
// }
// onClicked: {
// console.log('onClicked')
// }
// onDoubleClicked: {
// console.log('onDoubleClicked')
// }
// // `)
// initRender(
// dataSourceAttr,
// '#app-render-dataSource-dLabel',
// changeEventStr(propsArr(dataSourceAttr)))
// initRender(
// dLabelAttr,
// '#app-render-dLabel-dSource',
// changeEventStr(propsArr(dLabelAttr))
// )
// initRender(
// progressBarAttr,
// '#app-render-progressBar',
// changeEventStr(propsArr(progressBarAttr))+`onProgressChangeAction: {
// console.log('onProgressChangeAction:'+progress)
// }`)
/* console.log(changeEventStr(propsArr(drawerAttr)))
initRender(
drawerAttr,
'#app-render-drawer',
changeEventStr(propsArr(drawerAttr)) + `onMenuSelected: {
console.log('onMenuSelected:'+iconname)
}onSubmenuSelected: {
console.log('onSubmenuSelected:'+index)
}`
)
initRender(
menuAttr,
'#app-render-menu',
changeEventStr(propsArr(menuAttr)) + `onLastMenuClick: {
console.log('onLastMenuClick:'+idx)
}`
) */
/*
测试组件动态数据AnimateImage
*/
// initRender(
// animateImageAttr,
// '#app-render-animateImage',
// changeEventStr(propsArr(animateImageAttr))) //绝对路径下获取图片
/*
测试组件微调控制器
*/
// initRender(
// spinnerAttr,
// '#app-render-spinner',
// changeEventStr(propsArr(spinnerAttr))+`onValueChangeAction: {
// console.log('onValueChangeAction',value)
// }
// `)
/*
测试组件动态组合框两个vue 实例可以通过eventbus来通信
*/
// initRender(
// composecomboboxAttr,
// '#app-render-composecombobox-dsource',
// changeEventStr(propsArr(composecomboboxAttr))+`onIndexChanged: {
// console.log('onIndexChanged','index:'+arguments[0], 'value:' + arguments[1], 'list:' + arguments[2])
// }
// `)
// initRender(
// dataSourceAttr,
// '#app-render-datasource-ccbBox',
// changeEventStr(propsArr(dataSourceAttr)))
// initRender(
// searchBoxViewAttr,
// '#app-render-searchboxview',
// changeEventStr(propsArr(searchBoxViewAttr)) + `onSearchClicked: {
// console.log('onSearchClicked:value'+ value);
// console.log('onSearchClicked:jsonObject'+ jsonObject);
// }onPopItemClicked: {
// console.log('onSearchClicked:'+ jsonObject)
// }`
// )
</script>
</body>
</html>