isu-elements
Version:
Polymer components for building web apps.
565 lines (556 loc) • 23.3 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-cascading demo</title>
<script type="text/javascript" src="../../utils/mock_setup.js"></script>
<script type="module">
import '../../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js';
import '../../node_modules/@polymer/iron-demo-helpers/demo-pages-shared-styles.js';
import '../../node_modules/@polymer/iron-demo-helpers/demo-snippet.js';
import '../../behaviors/base-behavior.js'
import '../../isu-loading.js'
import '../../isu-cascading'
import './demo/isu-cascading-test.js'
if (!window.location.href.endsWith("?mock=mockData.js")) {
window.location.href = window.location.href + "?mock=mockData.js";
}
</script>
<script type="module">
const $_documentContainer = document.createElement('template');
$_documentContainer.innerHTML = `<custom-style>
<style is="custom-style" include="demo-pages-shared-styles">
.centered {
min-width: 800px;
}
demo-snippet {
--demo-snippet-code: {
max-height: 500px;
}
}
</style>
</custom-style>`;
document.body.appendChild($_documentContainer.content);
</script>
</head>
<body>
<!--<h3>基本用法</h3>-->
<!--<demo-snippet>-->
<!--<template>-->
<!--<custom-style>-->
<!--<style is="custom-style">-->
<!--.isu-cascading {-->
<!--width: 300px;-->
<!----isu-label: {-->
<!--/*width: 120px;*/-->
<!--}-->
<!--}-->
<!--</style>-->
<!--</custom-style>-->
<!--<!–<h4>click</h4>–>-->
<!--<!–<isu-cascading class="isu-cascading" label="地址" id="cascading" attr-for-label="label" attr-for-value="value" separator=">" required show-all-levels></isu-cascading>–>-->
<!--<!–<script>–>-->
<!--<!–cascading.items = [{–>-->
<!--<!–value: 'zhinan',–>-->
<!--<!–label: '指南',–>-->
<!--<!–children: [{–>-->
<!--<!–value: 'shejiyuanze',–>-->
<!--<!–label: '设计原则',–>-->
<!--<!–children: [{–>-->
<!--<!–value: 'yizhi',–>-->
<!--<!–label: '一致'–>-->
<!--<!–}, {–>-->
<!--<!–value: 'fankui',–>-->
<!--<!–label: '反馈'–>-->
<!--<!–}, {–>-->
<!--<!–value: 'xiaolv',–>-->
<!--<!–label: '效率'–>-->
<!--<!–}, {–>-->
<!--<!–value: 'kekong',–>-->
<!--<!–label: '可控'–>-->
<!--<!–}]–>-->
<!--<!–}, {–>-->
<!--<!–value: 'daohang',–>-->
<!--<!–label: '导航',–>-->
<!--<!–children: [{–>-->
<!--<!–value: 'cexiangdaohang',–>-->
<!--<!–label: '侧向导航'–>-->
<!--<!–}, {–>-->
<!--<!–value: 'dingbudaohang',–>-->
<!--<!–label: '顶部导航'–>-->
<!--<!–}]–>-->
<!--<!–}]–>-->
<!--<!–}, {–>-->
<!--<!–value: 'zujian',–>-->
<!--<!–label: '组件',–>-->
<!--<!–children: [{–>-->
<!--<!–value: 'basic',–>-->
<!--<!–label: 'Basic',–>-->
<!--<!–children: [{–>-->
<!--<!–value: 'layout',–>-->
<!--<!–label: 'Layout 布局'–>-->
<!--<!–}, {–>-->
<!--<!–value: 'color',–>-->
<!--<!–label: 'Color 色彩'–>-->
<!--<!–}, {–>-->
<!--<!–value: 'typography',–>-->
<!--<!–label: 'Typography 字体'–>-->
<!--<!–}, {–>-->
<!--<!–value: 'icon',–>-->
<!--<!–label: 'Icon 图标'–>-->
<!--<!–}, {–>-->
<!--<!–value: 'button',–>-->
<!--<!–label: 'Button 按钮'–>-->
<!--<!–}]–>-->
<!--<!–}, {–>-->
<!--<!–value: 'form',–>-->
<!--<!–label: 'Form',–>-->
<!--<!–children: [{–>-->
<!--<!–value: 'radio',–>-->
<!--<!–label: 'Radio 单选框'–>-->
<!--<!–}, {–>-->
<!--<!–value: 'checkbox',–>-->
<!--<!–label: 'Checkbox 多选框'–>-->
<!--<!–}, {–>-->
<!--<!–value: 'input',–>-->
<!--<!–label: 'Input 输入框'–>-->
<!--<!–}, {–>-->
<!--<!–value: 'input-number',–>-->
<!--<!–label: 'InputNumber 计数器'–>-->
<!--<!–}, {–>-->
<!--<!–value: 'select',–>-->
<!--<!–label: 'Select 选择器'–>-->
<!--<!–}, {–>-->
<!--<!–value: 'cascader',–>-->
<!--<!–label: 'Cascader 级联选择器'–>-->
<!--<!–}, {–>-->
<!--<!–value: 'switch',–>-->
<!--<!–label: 'Switch 开关'–>-->
<!--<!–}, {–>-->
<!--<!–value: 'slider',–>-->
<!--<!–label: 'Slider 滑块'–>-->
<!--<!–}, {–>-->
<!--<!–value: 'time-picker',–>-->
<!--<!–label: 'TimePicker 时间选择器'–>-->
<!--<!–}, {–>-->
<!--<!–value: 'date-picker',–>-->
<!--<!–label: 'DatePicker 日期选择器'–>-->
<!--<!–}, {–>-->
<!--<!–value: 'datetime-picker',–>-->
<!--<!–label: 'DateTimePicker 日期时间选择器'–>-->
<!--<!–}, {–>-->
<!--<!–value: 'upload',–>-->
<!--<!–label: 'Upload 上传'–>-->
<!--<!–}, {–>-->
<!--<!–value: 'rate',–>-->
<!--<!–label: 'Rate 评分'–>-->
<!--<!–}, {–>-->
<!--<!–value: 'form',–>-->
<!--<!–label: 'Form 表单'–>-->
<!--<!–}]–>-->
<!--<!–}, {–>-->
<!--<!–value: 'data',–>-->
<!--<!–label: 'Data',–>-->
<!--<!–children: [{–>-->
<!--<!–value: 'table',–>-->
<!--<!–label: 'Table 表格'–>-->
<!--<!–}, {–>-->
<!--<!–value: 'tag',–>-->
<!--<!–label: 'Tag 标签'–>-->
<!--<!–}, {–>-->
<!--<!–value: 'progress',–>-->
<!--<!–label: 'Progress 进度条'–>-->
<!--<!–}, {–>-->
<!--<!–value: 'tree',–>-->
<!--<!–label: 'Tree 树形控件'–>-->
<!--<!–}, {–>-->
<!--<!–value: 'pagination',–>-->
<!--<!–label: 'Pagination 分页'–>-->
<!--<!–}, {–>-->
<!--<!–value: 'badge',–>-->
<!--<!–label: 'Badge 标记'–>-->
<!--<!–}]–>-->
<!--<!–}, {–>-->
<!--<!–value: 'notice',–>-->
<!--<!–label: 'Notice',–>-->
<!--<!–children: [{–>-->
<!--<!–value: 'alert',–>-->
<!--<!–label: 'Alert 警告'–>-->
<!--<!–}, {–>-->
<!--<!–value: 'loading',–>-->
<!--<!–label: 'Loading 加载'–>-->
<!--<!–}, {–>-->
<!--<!–value: 'message',–>-->
<!--<!–label: 'Message 消息提示'–>-->
<!--<!–}, {–>-->
<!--<!–value: 'message-box',–>-->
<!--<!–label: 'MessageBox 弹框'–>-->
<!--<!–}, {–>-->
<!--<!–value: 'notification',–>-->
<!--<!–label: 'Notification 通知'–>-->
<!--<!–}]–>-->
<!--<!–}, {–>-->
<!--<!–value: 'navigation',–>-->
<!--<!–label: 'Navigation',–>-->
<!--<!–children: [{–>-->
<!--<!–value: 'menu',–>-->
<!--<!–label: 'NavMenu 导航菜单'–>-->
<!--<!–}, {–>-->
<!--<!–value: 'tabs',–>-->
<!--<!–label: 'Tabs 标签页'–>-->
<!--<!–}, {–>-->
<!--<!–value: 'breadcrumb',–>-->
<!--<!–label: 'Breadcrumb 面包屑'–>-->
<!--<!–}, {–>-->
<!--<!–value: 'dropdown',–>-->
<!--<!–label: 'Dropdown 下拉菜单'–>-->
<!--<!–}, {–>-->
<!--<!–value: 'steps',–>-->
<!--<!–label: 'Steps 步骤条'–>-->
<!--<!–}]–>-->
<!--<!–}, {–>-->
<!--<!–value: 'others',–>-->
<!--<!–label: 'Others',–>-->
<!--<!–children: [{–>-->
<!--<!–value: 'dialog',–>-->
<!--<!–label: 'Dialog 对话框'–>-->
<!--<!–}, {–>-->
<!--<!–value: 'tooltip',–>-->
<!--<!–label: 'Tooltip 文字提示'–>-->
<!--<!–}, {–>-->
<!--<!–value: 'popover',–>-->
<!--<!–label: 'Popover 弹出框'–>-->
<!--<!–}, {–>-->
<!--<!–value: 'card',–>-->
<!--<!–label: 'Card 卡片'–>-->
<!--<!–}, {–>-->
<!--<!–value: 'carousel',–>-->
<!--<!–label: 'Carousel 走马灯'–>-->
<!--<!–}, {–>-->
<!--<!–value: 'collapse',–>-->
<!--<!–label: 'Collapse 折叠面板'–>-->
<!--<!–}]–>-->
<!--<!–}]–>-->
<!--<!–}, {–>-->
<!--<!–value: 'ziyuan',–>-->
<!--<!–label: '资源',–>-->
<!--<!–children: [{–>-->
<!--<!–value: 'axure',–>-->
<!--<!–label: 'Axure Components'–>-->
<!--<!–}, {–>-->
<!--<!–value: 'sketch',–>-->
<!--<!–label: 'Sketch Templates'–>-->
<!--<!–}, {–>-->
<!--<!–value: 'jiaohu',–>-->
<!--<!–label: '组件交互文档'–>-->
<!--<!–}]–>-->
<!--<!–}];–>-->
<!--<!–// cascading.value = ["zhinan", "shejiyuanze", "yizhi"];–>-->
<!--<!–</script>–>-->
<!--<!–<h4>hover</h4>–>-->
<!--<!–<isu-cascading class="isu-cascading" label="地址" id="cascading2" attr-for-label="label" attr-for-value="value" separator="/" expand-trigger="hover"></isu-cascading>–>-->
<!--<h4>通过url获取数据</h4>-->
<!--<isu-cascading class="isu-cascading" label="地址" id="cascading3"-->
<!--attr-for-label="label" src="/init.do"-->
<!--attr-for-value="value" separator=">" required show-all-levels></isu-cascading>-->
<!--<script>-->
<!--</script>-->
<!--<h4>回显数据</h4>-->
<!--<isu-cascading class="isu-cascading" label="地址" id="cascading4"-->
<!--attr-for-label="label"-->
<!--attr-for-value="value" separator=">" required show-all-levels></isu-cascading>-->
<!--<script>-->
<!--cascading4.value=["zhinan", "shejiyuanze", "fankui"]-->
<!--cascading4.items = [{-->
<!--value: 'zhinan',-->
<!--label: '指南',-->
<!--children: [{-->
<!--value: 'shejiyuanze',-->
<!--label: '设计原则',-->
<!--children: [{-->
<!--value: 'yizhi',-->
<!--label: '一致'-->
<!--}, {-->
<!--value: 'fankui',-->
<!--label: '反馈'-->
<!--}, {-->
<!--value: 'xiaolv',-->
<!--label: '效率'-->
<!--}, {-->
<!--value: 'kekong',-->
<!--label: '可控'-->
<!--}]-->
<!--}, {-->
<!--value: 'daohang',-->
<!--label: '导航',-->
<!--children: [{-->
<!--value: 'cexiangdaohang',-->
<!--label: '侧向导航'-->
<!--}, {-->
<!--value: 'dingbudaohang',-->
<!--label: '顶部导航'-->
<!--}]-->
<!--}]-->
<!--}, {-->
<!--value: 'zujian',-->
<!--label: '组件',-->
<!--children: [{-->
<!--value: 'basic',-->
<!--label: 'Basic',-->
<!--children: [{-->
<!--value: 'layout',-->
<!--label: 'Layout 布局'-->
<!--}, {-->
<!--value: 'color',-->
<!--label: 'Color 色彩'-->
<!--}, {-->
<!--value: 'typography',-->
<!--label: 'Typography 字体'-->
<!--}, {-->
<!--value: 'icon',-->
<!--label: 'Icon 图标'-->
<!--}, {-->
<!--value: 'button',-->
<!--label: 'Button 按钮'-->
<!--}]-->
<!--}, {-->
<!--value: 'form',-->
<!--label: 'Form',-->
<!--children: [{-->
<!--value: 'radio',-->
<!--label: 'Radio 单选框'-->
<!--}, {-->
<!--value: 'checkbox',-->
<!--label: 'Checkbox 多选框'-->
<!--}, {-->
<!--value: 'input',-->
<!--label: 'Input 输入框'-->
<!--}, {-->
<!--value: 'input-number',-->
<!--label: 'InputNumber 计数器'-->
<!--}, {-->
<!--value: 'select',-->
<!--label: 'Select 选择器'-->
<!--}, {-->
<!--value: 'cascader',-->
<!--label: 'Cascader 级联选择器'-->
<!--}, {-->
<!--value: 'switch',-->
<!--label: 'Switch 开关'-->
<!--}, {-->
<!--value: 'slider',-->
<!--label: 'Slider 滑块'-->
<!--}, {-->
<!--value: 'time-picker',-->
<!--label: 'TimePicker 时间选择器'-->
<!--}, {-->
<!--value: 'date-picker',-->
<!--label: 'DatePicker 日期选择器'-->
<!--}, {-->
<!--value: 'datetime-picker',-->
<!--label: 'DateTimePicker 日期时间选择器'-->
<!--}, {-->
<!--value: 'upload',-->
<!--label: 'Upload 上传'-->
<!--}, {-->
<!--value: 'rate',-->
<!--label: 'Rate 评分'-->
<!--}, {-->
<!--value: 'form',-->
<!--label: 'Form 表单'-->
<!--}]-->
<!--}, {-->
<!--value: 'data',-->
<!--label: 'Data',-->
<!--children: [{-->
<!--value: 'table',-->
<!--label: 'Table 表格'-->
<!--}, {-->
<!--value: 'tag',-->
<!--label: 'Tag 标签'-->
<!--}, {-->
<!--value: 'progress',-->
<!--label: 'Progress 进度条'-->
<!--}, {-->
<!--value: 'tree',-->
<!--label: 'Tree 树形控件'-->
<!--}, {-->
<!--value: 'pagination',-->
<!--label: 'Pagination 分页'-->
<!--}, {-->
<!--value: 'badge',-->
<!--label: 'Badge 标记'-->
<!--}]-->
<!--}, {-->
<!--value: 'notice',-->
<!--label: 'Notice',-->
<!--children: [{-->
<!--value: 'alert',-->
<!--label: 'Alert 警告'-->
<!--}, {-->
<!--value: 'loading',-->
<!--label: 'Loading 加载'-->
<!--}, {-->
<!--value: 'message',-->
<!--label: 'Message 消息提示'-->
<!--}, {-->
<!--value: 'message-box',-->
<!--label: 'MessageBox 弹框'-->
<!--}, {-->
<!--value: 'notification',-->
<!--label: 'Notification 通知'-->
<!--}]-->
<!--}, {-->
<!--value: 'navigation',-->
<!--label: 'Navigation',-->
<!--children: [{-->
<!--value: 'menu',-->
<!--label: 'NavMenu 导航菜单'-->
<!--}, {-->
<!--value: 'tabs',-->
<!--label: 'Tabs 标签页'-->
<!--}, {-->
<!--value: 'breadcrumb',-->
<!--label: 'Breadcrumb 面包屑'-->
<!--}, {-->
<!--value: 'dropdown',-->
<!--label: 'Dropdown 下拉菜单'-->
<!--}, {-->
<!--value: 'steps',-->
<!--label: 'Steps 步骤条'-->
<!--}]-->
<!--}, {-->
<!--value: 'others',-->
<!--label: 'Others',-->
<!--children: [{-->
<!--value: 'dialog',-->
<!--label: 'Dialog 对话框'-->
<!--}, {-->
<!--value: 'tooltip',-->
<!--label: 'Tooltip 文字提示'-->
<!--}, {-->
<!--value: 'popover',-->
<!--label: 'Popover 弹出框'-->
<!--}, {-->
<!--value: 'card',-->
<!--label: 'Card 卡片'-->
<!--}, {-->
<!--value: 'carousel',-->
<!--label: 'Carousel 走马灯'-->
<!--}, {-->
<!--value: 'collapse',-->
<!--label: 'Collapse 折叠面板'-->
<!--}]-->
<!--}]-->
<!--}, {-->
<!--value: 'ziyuan',-->
<!--label: '资源',-->
<!--children: [{-->
<!--value: 'axure',-->
<!--label: 'Axure Components'-->
<!--}, {-->
<!--value: 'sketch',-->
<!--label: 'Sketch Templates'-->
<!--}, {-->
<!--value: 'jiaohu',-->
<!--label: '组件交互文档'-->
<!--}]-->
<!--}]-->
<!--</script>-->
<!--</template>-->
<!--</demo-snippet>-->
<!--<h3>动态获取</h3>-->
<!--<demo-snippet>-->
<!--<template>-->
<!--<custom-style>-->
<!--<style is="custom-style">-->
<!--.isu-cascading {-->
<!--width: 300px;-->
<!----isu-label: {-->
<!--/*width: 120px;*/-->
<!--}-->
<!--}-->
<!--</style>-->
<!--</custom-style>-->
<!--<isu-cascading class="isu-cascading" label="地址" id="cascading1"></isu-cascading>-->
<!--<script>-->
<!--let items = [{-->
<!--value: 'beijing',-->
<!--label: '北京'-->
<!--}, {-->
<!--value: 'shanghai',-->
<!--label: '上海'-->
<!--}, {-->
<!--value: 'hubei',-->
<!--label: '湖北'-->
<!--}];-->
<!--cascading1.treeItems = [items];-->
<!--cascading1.addEventListener('value-changed', ({detail: {value}}) => {-->
<!--setTimeout(() => {-->
<!--const treeItems = [].concat(cascading1.treeItems);-->
<!--if (value.length) {-->
<!--treeItems.push([-->
<!--{-->
<!--value: 'dongcheng',-->
<!--label: '东城'-->
<!--},-->
<!--{-->
<!--value: 'xicheng',-->
<!--label: '西城'-->
<!--}-->
<!--]);-->
<!--cascading1.treeItems = treeItems;-->
<!--}-->
<!--}, 1000)-->
<!--})-->
<!--</script>-->
<!--</template>-->
<!--</demo-snippet>-->
<h3>动态获取2</h3>
<demo-snippet>
<template>
<custom-style>
<style is="custom-style">
.isu-cascading {
width: 300px;
}
</style>
</custom-style>
<isu-cascading-test class="isu-cascading" label="地址" id="cascading5"></isu-cascading-test>
<script>
let items = [{
value: 'beijing',
label: '北京'
}, {
value: 'shanghai',
label: '上海'
}, {
value: 'hubei',
label: '湖北'
}];
cascading5.treeItems = [items];
cascading5.treeItems2 = [items];
// cascading1.addEventListener('value-changed', ({detail: {value}}) => {
// setTimeout(() => {
// const treeItems = [].concat(cascading1.treeItems);
// if (value.length) {
// treeItems.push([
// {
// value: 'dongcheng',
// label: '东城'
// },
// {
// value: 'xicheng',
// label: '西城'
// }
// ]);
// cascading1.treeItems = treeItems;
// }
// }, 1000)
// })
</script>
</template>
</demo-snippet>
</body>
</html>