isu-elements
Version:
Polymer components for building web apps.
157 lines (145 loc) • 4.41 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>isu-loading demo</title>
<script type="module">
import '../../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader';
import '../../node_modules/@polymer/iron-demo-helpers/demo-pages-shared-styles';
import '../../node_modules/@polymer/iron-demo-helpers/demo-snippet';
import '../../isu-loading';
import '../../isu-button';
import '../../isu-table';
import '../../isu-table-column';
</script>
<!---->
</head>
<body>
<div class="vertical-section-container centered">
<h3>Basic isu-loading demo</h3>
<demo-snippet>
<template>
<isu-button id="btn">自定义背景</isu-button>
<isu-loading id="loading" background="rgba(0, 0, 0, 0.8)"></isu-loading>
<script>
var clickHandler = e => {
loading.opened = true
setTimeout(e=> {
loading.opened = false
}, 2000)
};
btn.onclick = clickHandler;
</script>
<isu-button id="btn2">默认</isu-button>
<isu-loading id="loading2"></isu-loading>
<script>
var clickHandler = e => {
loading2.opened = true
setTimeout(e=> {
loading2.opened = false
}, 2000)
};
btn2.onclick = clickHandler;
</script>
<isu-button id="btn3">加载文字</isu-button>
<isu-loading id="loading3" text="加载中..."></isu-loading>
<script>
var clickHandler = e => {
loading3.opened = true
setTimeout(e=> {
loading3.opened = false
}, 2000)
};
btn3.onclick = clickHandler;
</script>
</template>
</demo-snippet>
<h3>Loading需要覆盖的DOM节点</h3>
<demo-snippet>
<template>
<style>
#table {
width: 300px;
position: relative;
}
isu-loading :host {
position: fixed;
top: 0;
left: 0;
background: white;
opacity: 0.7;
width: 100%;
height: 100%;
z-index: 9999;
display: flex;
/*position: absolute;*/
}
.loading-container {
width: 80px;
height: 80px;
margin: auto;
border-radius: 6px;
display: flex;
position: relative;
}
svg {
margin: auto;
}
svg path,
svg rect{
fill: var(--isu-ui-color_skyblue);
}
.span-text {
position: absolute;
bottom: 0px;
text-align: center;
display: inline-block;
width: 100%;
font-size: 12px;
font-family: 微软雅黑;
letter-spacing: 1px;
color: #61B3F4;
}
</style>
<isu-button id="btn4">局部加载</isu-button>
<isu-loading id="loading4" text="加载中..." background="rgba(0, 0, 0, 0.8)" target="#table" style="display: none"></isu-loading>
<div id="table" style="width: 400px; height: 600px; border: 1px solid red;"></div>
<script>
var clickHandler = e => {
table.querySelector('isu-loading').opened = true
setTimeout(e=> {
table.querySelector('isu-loading').opened = false
}, 2000)
};
btn4.onclick = clickHandler;
</script>
<script>
table.view = ({model}) => {
console.log("view", model.user);
};
table.modify = ({model}) => {
console.log("modify", model.user);
};
table.more = (e) => {
console.log(e.model.action, e.model.parentModel.user);
};
table.global = {
lookup: "查看",
modify: "修改",
more: "更多"
};
table.data = [
{sex: '男', name: 'Wahson', phone: '12341111116', modify: true},
{sex: '女', name: 'Rose', actions:['more']},
{sex: '女', name: 'Lucy', phone: '12390'},
{sex: '男', name: 'James', phone: '12326'},
{sex: '男', name: 'Cat', phone: '12349'},
{sex: '男', name: 'Apple', phone: '1211111111345', modify: true, actions:['more', 'more1']}
]
</script>
</template>
</demo-snippet>
</div>
</body>
</html>