mirror of
https://github.com/vxcontrol/ncform.git
synced 2026-07-21 14:25:29 -04:00
daniel.xiao
156 lines
6.1 KiB
JavaScript
Executable File
156 lines
6.1 KiB
JavaScript
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>ncform components document</title>
|
|
<link rel="stylesheet" href="/examples/demo.css">
|
|
<link rel="stylesheet" href="../node_modules/element-ui/lib/theme-chalk/index.css">
|
|
|
|
<script type="text/javascript" src="https://unpkg.com/vue@2.6.10/dist/vue.min.js"></script>
|
|
|
|
<style>
|
|
.doc {
|
|
height: 100%;
|
|
min-height: 300px;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
var _hmt = _hmt || [];
|
|
(function() {
|
|
var hm = document.createElement("script");
|
|
hm.src = "https://hm.baidu.com/hm.js?027aa17f0e14133f0b8aa5f1f0af3ca7";
|
|
var s = document.getElementsByTagName("script")[0];
|
|
s.parentNode.insertBefore(hm, s);
|
|
})();
|
|
</script>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="doc">
|
|
<h2 style="margin-left: 25px; color: #5A5E66">
|
|
<a style="position: relative; top: 9px;" target="_blank" class="header-logo-invertocat" href="https://github.com/ncform/ncform">
|
|
<svg height="32" class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
|
|
</a>
|
|
|
|
ncform standard components
|
|
|
|
<div class="el-radio-group" style="float: right;">
|
|
<label class="el-radio-button">
|
|
<input type="radio" class="el-radio-button__orig-radio" value="en" v-model="lang">
|
|
<span class="el-radio-button__inner">English</span>
|
|
</label>
|
|
<label class="el-radio-button" value="cn">
|
|
<input type="radio" class="el-radio-button__orig-radio" value="cn" v-model="lang">
|
|
<span class="el-radio-button__inner">中文</span>
|
|
</label>
|
|
</div>
|
|
|
|
</h2>
|
|
|
|
<div style="display: flex; height: calc(100vh - 86px); overflow: hidden;" v-cloak>
|
|
<div style="flex:1; overflow: auto">
|
|
<ul class="el-menu el-menu-vertical-demo">
|
|
<li class="el-submenu is-opened">
|
|
<div class="el-submenu__title" style="padding-left: 20px;"><i
|
|
class="el-icon-star-on"></i><span>Controls</span></div>
|
|
<ul class="el-menu">
|
|
<li v-for="item in displayControls" class="el-menu-item" :class="{'is-active': currentUrl === item.url}"
|
|
@click="goto(item.url)">
|
|
{{item.name}}
|
|
</li>
|
|
<!-- Don't touch me - controls -->
|
|
</ul>
|
|
</li>
|
|
<li class="el-submenu is-opened">
|
|
<div class="el-submenu__title" style="padding-left: 20px;"><i
|
|
class="el-icon-star-on"></i><span>Layouts</span>
|
|
</div>
|
|
<ul class="el-menu">
|
|
<li v-for="item in displayLayouts" class="el-menu-item" :class="{'is-active': currentUrl === item.url}"
|
|
@click="goto(item.url)">
|
|
{{item.name}}
|
|
</li>
|
|
<!-- Don't touch me - layouts -->
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div style="flex:5">
|
|
<iframe :src="currentUrl" style="width: 100%; border: none; height: 100%"></iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
new Vue({
|
|
el: '.doc',
|
|
created() {
|
|
if (location.search.indexOf('lang=cn') >= 0) {
|
|
this.$data.lang = 'cn';
|
|
}
|
|
this.$data.currentUrl = this.$data.controls[0].url + '?lang=' + this.$data.lang;
|
|
},
|
|
data: {
|
|
controls: [
|
|
{ "url": "/examples/control-comps/input.html", "name": "input" },
|
|
{ "url": "/examples/control-comps/input-number.html", "name": "input-number" },
|
|
{ "url": "/examples/control-comps/textarea.html", "name": "textarea" },
|
|
{ "url": "/examples/control-comps/select.html", "name": "select" },
|
|
{ "url": "/examples/control-comps/color-picker.html", "name": "color-picker" },
|
|
{ "url": "/examples/control-comps/date-picker.html", "name": "date-picker" },
|
|
{ "url": "/examples/control-comps/slider.html", "name": "slider" },
|
|
{ "url": "/examples/control-comps/rate.html", "name": "rate" },
|
|
{ "url": "/examples/control-comps/radio.html", "name": "radio" },
|
|
{ "url": "/examples/control-comps/checkbox.html", "name": "checkbox" },
|
|
{ "url": "/examples/control-comps/upload.html", "name": "upload" },
|
|
{ "url": "/examples/control-comps/label.html", "name": "label" },
|
|
{ "url": "/examples/control-comps/switch.html", "name": "switch" }],
|
|
|
|
layouts: [
|
|
{ "url": "/examples/layout-comps/object.html", "name": "object" },
|
|
{ "url": "/examples/layout-comps/array.html", "name": "array" },
|
|
{ "url": "/examples/layout-comps/array-table.html", "name": "array-table" },
|
|
{ "url": "/examples/layout-comps/array-tabs.html", "name": "array-tabs" }
|
|
],
|
|
currentUrl: '',
|
|
lang: 'en'
|
|
},
|
|
computed: {
|
|
displayControls() {
|
|
return this.$data.controls.map(item => ({
|
|
url: item.url + '?lang=' + this.$data.lang,
|
|
name: item.name
|
|
}))
|
|
},
|
|
displayLayouts() {
|
|
return this.$data.layouts.map(item => ({
|
|
url: item.url + '?lang=' + this.$data.lang,
|
|
name: item.name
|
|
}))
|
|
}
|
|
},
|
|
methods: {
|
|
goto(url) {
|
|
this.$data.currentUrl = url;
|
|
}
|
|
},
|
|
watch: {
|
|
'lang': function (newVal) {
|
|
let url = location.pathname + '?lang=' + this.$data.lang;
|
|
window.history.replaceState("", document.title, url);
|
|
this.$data.currentUrl = this.$data.currentUrl.replace(/lang=.*/, 'lang=' + this.$data.lang);
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|