isu-elements
Version:
Polymer components for building web apps.
306 lines (277 loc) • 10.7 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-picker 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 '../../isu-picker';
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;
}
}
#picker6 {
--isu-picker-input-width: 170px;
--isu-picker-tags-box-width: 180px;
--isu-picker-height: 40px;
}
isu-picker {
margin-bottom: 10px;
}
</style>
</custom-style>`;
document.body.appendChild($_documentContainer.content);
</script>
</head>
<body>
<div class="vertical-section-container centered">
<h3>支持单选、多选、输入关键字过滤下拉选项</h3>
<demo-snippet>
<template>
<isu-picker id="picker" label="单选" font-size="small" mode="text" text="99" attr-for-value="id" placeholder="请选择" clearable></isu-picker>
<isu-picker id="picker1" label="多选" value="1,2,3,4" attr-for-value="id" multi placeholder="请选择" picker-meta='[{"field": "label", "label": "选项"}, {"field": "business", "label": "业务范围"}]'></isu-picker>
<isu-picker id="pickerAll" label="多选" font-size="large" value="1,2,3,4" attr-for-value="id" show-all
multi placeholder="请选择" picker-meta='[{"field": "label", "label": "选项"}, {"field": "business", "label": "业务范围"}]'></isu-picker>
<script>
const productPickerMeta = [{field: 'category', label: '分类'}, {field: 'designation', label: '牌号'}, {field: 'manufacturerName', label: '生产商'}, {field: 'originCountry', label: '产地'}];
const products = [
{
"id": 1,
"category": "PE",
"designation": "I26A50UA",
"manufacturerId": 1375,
"manufacturerName": "印度信诚",
"originCountry": "CN"
},
{
"id": 2,
"category": "PP",
"designation": "S003G",
"manufacturerId": 1937,
"manufacturerName": "云天化",
"originCountry": "CN"
},
{
"id": 3,
"category": "PP",
"designation": "EPS30R-B",
"manufacturerId": 173,
"manufacturerName": "延长榆能化",
"originCountry": "CN"
},
{
"id": 4,
"category": "PP",
"designation": "T4401",
"manufacturerId": 21,
"manufacturerName": "茂名石化",
"originCountry": "CN"
},
{
"id": 5,
"category": "PE",
"designation": "5502A",
"manufacturerId": 90,
"manufacturerName": "中海壳牌",
"originCountry": "CN"
}
];
picker.attrForLabel = ({category, designation, manufacturerName}) => `${category} | ${designation} | ${manufacturerName}`;
picker.shortcutKey = ' ';
picker.pickerMeta = productPickerMeta;
picker.fieldsForIndex = ['category', 'designation', 'manufacturerName', 'originCountry'];
picker.items = products;
const items = [
{"id": 1, "label": "天猫", "business": "塑料", "tags": ["ksw", "sl"]},
{"id": 2, "label": "阿里巴巴", "business": "电商", "tags": ["albb", "ds"]},
{"id": 3, "label": "腾讯", "business": "游戏", "tags": ["tx", "yx"]},
{"id": 4, "label": "京东", "business": "电商", "tags": ["jd", "ds"]}
];
picker1.attrForLabel = "label";
picker1.shortcutKey = ' ';
picker1.items = items;
pickerAll.attrForLabel = "label";
pickerAll.shortcutKey = ' ';
// pickerAll.fieldsForIndex = ['label', 'business'];
pickerAll.items = items;
</script>
</template>
</demo-snippet>
<h3>支持只读、必填、快捷键属性,可限制多选的数量</h3>
<demo-snippet>
<template>
<isu-picker id="picker3" label="公司" value="1,2,3" attr-for-value="id" multi readonly></isu-picker>
<isu-picker id="pickerView" label="公司" value="1,2,3,4" attr-for-value="id" multi readonly is-view></isu-picker>
<isu-picker id="picker4" label="公司" value="1,2,3" attr-for-value="id" multi required enable-hotkey></isu-picker>
<isu-picker id="pickerNum" label="公司" attr-for-value="id" multi-limit="3" multi required prompt="公司不能为空" enable-hotkey></isu-picker>
<script>
const pickerMeta = [{field: 'label', label: '选项'}, {field: 'business', label: '业务范围'}];
picker3.pickerMeta = pickerMeta;
picker3.items = items;
pickerView.pickerMeta = pickerMeta;
pickerView.items = items;
picker4.pickerMeta = pickerMeta;
picker4.items = items;
pickerNum.pickerMeta = pickerMeta;
pickerNum.items = items;
</script>
</template>
</demo-snippet>
<h3>修改组件大小</h3>
<demo-snippet>
<template>
<custom-style>
<style>
#picker5 {
width: 250px;
height: 70px;
line-height: 70px;
}
</style>
</custom-style>
<isu-picker id="picker5" label="公司" multi="" attr-for-value="id" value="1,2,3,4,5"></isu-picker>
<script>
picker5.pickerMeta = pickerMeta;
picker5.items = items;
</script>
</template>
</demo-snippet>
<h3>支持自定义模糊搜索的字段（默认为对所有字段做搜索缓存）</h3>
<demo-snippet>
<template>
<custom-style>
<style>
#picker6,
#picker7 {
width: 350px;
--isu-label: {
width: 120px;
}
}
</style>
</custom-style>
<isu-picker id="picker6" label="默认" attr-for-value="id"></isu-picker>
<isu-picker id="picker7" label="自定义搜索字段" attr-for-value="id"></isu-picker>
<script>
picker6.pickerMeta = pickerMeta;
picker6.items = items;
picker7.pickerMeta = pickerMeta;
picker7.fieldsForIndex = ["business"];
picker7.items = items;
</script>
</template>
</demo-snippet>
<h3>自定义初始数据源</h3>
<demo-snippet>
<template>
<isu-picker id="picker8" src="/init.do" label="公司" attr-for-value="id"></isu-picker>
<script>
picker8.pickerMeta = pickerMeta;
</script>
</template>
</demo-snippet>
<h3>通过接口搜索数据</h3>
<demo-snippet>
<template>
<custom-style>
<style>
#picker9 {
height: 70px;
line-height: 70px;
}
</style>
</custom-style>
<isu-picker id="picker9" label="公司" src="/init.do" multi="" attr-for-value="id"></isu-picker>
<script>
// const pickerMeta = [{field: 'label', label: '选项'}, {field: 'business', label: '业务范围'}];
picker9.pickerMeta = pickerMeta;
picker9.value = 2222
// picker9.fetchParam = {id: 2}
picker9.keywordSearchSrc = JSON.stringify({pageRequest: {limit: "10", start: 0}});
</script>
</template>
</demo-snippet>
<!--<h3>键盘快捷键操作</h3>-->
<!--<demo-snippet>-->
<!--<template>-->
<!--<custom-style>-->
<!--<style>-->
<!--#picker10 {-->
<!--height: 70px;-->
<!--line-height: 70px;-->
<!--}-->
<!--</style>-->
<!--</custom-style>-->
<!--<isu-picker id="picker10" label="公司"-->
<!--src="/api/listProduct"-->
<!--attr-for-value="id"-->
<!--keyword-path="request.keyword"-->
<!--result-path="success.result"-->
<!--fetch-param='{"request": {"pageRequest": {"limit": 10, "start": 0}}}'>-->
<!--</isu-picker>-->
<!--<p>-->
<!--</p><ul>-->
<!--<li>下拉选择框打开是，键盘UP, DOWN键 切换选项</li>-->
<!--<li>Space 或 Enter 选择选项</li>-->
<!--<li>光标闪烁，且下拉框收起时，DOWN键 可以重新打开下拉框</li>-->
<!--<li>没有输入内容时，Backspace 可删除选中项</li>-->
<!--</ul>-->
<!--<p></p>-->
<!--<script>-->
<!--picker10.pickerMeta = productPickerMeta;-->
<!--picker10.attrForLabel = ({category, designation, manufacturerName}) => `${category} | ${designation} | ${manufacturerName}`;-->
<!--</script>-->
<!--</template>-->
<!--</demo-snippet>-->
<!--<h3>自定义组件样式</h3>-->
<!--<demo-snippet>-->
<!--<template>-->
<!--<custom-style>-->
<!--<style>-->
<!--#picker11 {-->
<!--width: 250px;-->
<!----isu-ui-red: red;-->
<!----isu-picker-input: {-->
<!--background-color: lightpink;-->
<!--};-->
<!----isu-picker-tag: {-->
<!----isu-ui-bg: purple;-->
<!--};-->
<!----isu-select-tag-deleter: {-->
<!--color: yellow;-->
<!--};-->
<!----isu-picker-dropdown: {-->
<!--background-color: green;-->
<!--};-->
<!----collapase-table-cell: {-->
<!--color: lightgreen;-->
<!--};-->
<!--}-->
<!--</style>-->
<!--</custom-style>-->
<!--<isu-picker id="picker11" label="公司" multi="" attr-for-value="id" value="1,2,3,4,5"></isu-picker>-->
<!--<script>-->
<!--picker11.pickerMeta = pickerMeta;-->
<!--picker11.items = items;-->
<!--</script>-->
<!--</template>-->
<!--</demo-snippet>-->
</div>
</body>
</html>