|
|
@@ -2,41 +2,41 @@
|
|
|
<script>
|
|
|
import { Cell, ActionSheet, Toast } from '../../../../../packages/stdf/components';
|
|
|
|
|
|
- let visible1 = false;
|
|
|
- let visible2 = false;
|
|
|
- let visible3 = false;
|
|
|
- let visible4 = false;
|
|
|
- let visible5 = false;
|
|
|
- let visible6 = false;
|
|
|
- let visible7 = false;
|
|
|
- let visible8 = false;
|
|
|
- let visible9 = false;
|
|
|
- let visible10 = false;
|
|
|
- let visible11 = false;
|
|
|
- let visible12 = false;
|
|
|
+ let visible1 = $state(false);
|
|
|
+ let visible2 = $state(false);
|
|
|
+ let visible3 = $state(false);
|
|
|
+ let visible4 = $state(false);
|
|
|
+ let visible5 = $state(false);
|
|
|
+ let visible6 = $state(false);
|
|
|
+ let visible7 = $state(false);
|
|
|
+ let visible8 = $state(false);
|
|
|
+ let visible9 = $state(false);
|
|
|
+ let visible10 = $state(false);
|
|
|
+ let visible11 = $state(false);
|
|
|
+ let visible12 = $state(false);
|
|
|
|
|
|
const actions = [{ content: 'Option one' }, { content: 'Option two' }, { content: 'Option three' }];
|
|
|
|
|
|
- let toastVisible1 = false;
|
|
|
- let toastVisible2 = false;
|
|
|
- let toastVisible3 = false;
|
|
|
- let index = 0;
|
|
|
- let item = {};
|
|
|
- const clickActionFunc = e => {
|
|
|
- index = e.detail.index;
|
|
|
- item = e.detail.item;
|
|
|
+ let toastVisible1 = $state(false);
|
|
|
+ let toastVisible2 = $state(false);
|
|
|
+ let toastVisible3 = $state(false);
|
|
|
+ let index = $state(0);
|
|
|
+ let item = $state({ content: '' });
|
|
|
+ const clickActionFunc = (i, action) => {
|
|
|
+ index = i;
|
|
|
+ item = action;
|
|
|
toastVisible3 = true;
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<div class="py-4">
|
|
|
- <Cell title="Basic usage" on:click={() => (visible1 = true)} />
|
|
|
+ <Cell title="Basic usage" onclick={() => (visible1 = true)} />
|
|
|
<ActionSheet bind:visible={visible1} {actions} />
|
|
|
|
|
|
- <Cell title="If you have canceled operation and click on the mask, you cannot turn off" on:click={() => (visible2 = true)} />
|
|
|
+ <Cell title="If you have canceled operation and click on the mask, you cannot turn off" onclick={() => (visible2 = true)} />
|
|
|
<ActionSheet bind:visible={visible2} {actions} showCancel popup={{ maskClosable: false }} />
|
|
|
|
|
|
- <Cell title="Different styles" on:click={() => (visible3 = true)} />
|
|
|
+ <Cell title="Different styles" onclick={() => (visible3 = true)} />
|
|
|
<ActionSheet
|
|
|
bind:visible={visible3}
|
|
|
actions={[
|
|
|
@@ -47,7 +47,7 @@
|
|
|
]}
|
|
|
/>
|
|
|
|
|
|
- <Cell title="Title and description information" on:click={() => (visible4 = true)} />
|
|
|
+ <Cell title="Title and description information" onclick={() => (visible4 = true)} />
|
|
|
<ActionSheet
|
|
|
bind:visible={visible4}
|
|
|
actions={[
|
|
|
@@ -58,38 +58,38 @@
|
|
|
title="This is the title, which can be briefly explained."
|
|
|
/>
|
|
|
|
|
|
- <Cell title="Come on the top" on:click={() => (visible5 = true)} />
|
|
|
+ <Cell title="Come on the top" onclick={() => (visible5 = true)} />
|
|
|
<ActionSheet bind:visible={visible5} {actions} popup={{ radius: 'xl' }} />
|
|
|
|
|
|
- <Cell title="There is a spacing on both sides" on:click={() => (visible6 = true)} />
|
|
|
+ <Cell title="There is a spacing on both sides" onclick={() => (visible6 = true)} />
|
|
|
<ActionSheet bind:visible={visible6} {actions} popup={{ radius: 'xl', px: '2' }} />
|
|
|
|
|
|
- <Cell title="Supervision and closing incident" on:click={() => (visible7 = true)} />
|
|
|
- <ActionSheet bind:visible={visible7} {actions} on:close={() => (toastVisible1 = true)} />
|
|
|
+ <Cell title="Supervision and closing incident" onclick={() => (visible7 = true)} />
|
|
|
+ <ActionSheet bind:visible={visible7} {actions} onclose={() => (toastVisible1 = true)} />
|
|
|
<Toast bind:visible={toastVisible1} message="closed ActionSheet!" />
|
|
|
|
|
|
- <Cell title="Supervision and canceling incident" on:click={() => (visible8 = true)} />
|
|
|
- <ActionSheet bind:visible={visible8} {actions} showCancel on:cancel={() => (toastVisible2 = true)} />
|
|
|
+ <Cell title="Supervision and canceling incident" onclick={() => (visible8 = true)} />
|
|
|
+ <ActionSheet bind:visible={visible8} {actions} showCancel oncancel={() => (toastVisible2 = true)} />
|
|
|
<Toast bind:visible={toastVisible2} message="Click to cancel!" />
|
|
|
|
|
|
- <Cell title="Survening options click event" on:click={() => (visible9 = true)} />
|
|
|
- <ActionSheet bind:visible={visible9} {actions} on:clickAction={clickActionFunc} />
|
|
|
+ <Cell title="Survening options click event" onclick={() => (visible9 = true)} />
|
|
|
+ <ActionSheet bind:visible={visible9} {actions} onclickAction={clickActionFunc} />
|
|
|
<Toast bind:visible={toastVisible3} message={`Click the ${index + 1} item,${item.content}!`} />
|
|
|
|
|
|
- <Cell title="Click the option not to be closed" on:click={() => (visible10 = true)} />
|
|
|
+ <Cell title="Click the option not to be closed" onclick={() => (visible10 = true)} />
|
|
|
<ActionSheet bind:visible={visible10} {actions} actionClosable={false} />
|
|
|
|
|
|
- <Cell title="Options with pictures" on:click={() => (visible11 = true)} />
|
|
|
+ <Cell title="Options with pictures" onclick={() => (visible11 = true)} />
|
|
|
<ActionSheet
|
|
|
bind:visible={visible11}
|
|
|
actions={[
|
|
|
- { content: 'Fire girl', showImg: true, imgSrc: '/assets/images/dota_火女.png', imgRadius: 'base' },
|
|
|
- { content: 'calf', showImg: true, imgSrc: '/assets/images/dota_小牛.png', imgRadius: 'base' },
|
|
|
- { content: 'water man', showImg: true, imgSrc: '/assets/images/dota_水人.png', imgRadius: 'base' },
|
|
|
+ { content: 'Lina', showImg: true, imgSrc: '/assets/images/dota_火女.png', imgRadius: 'base' },
|
|
|
+ { content: 'Earthshaker', showImg: true, imgSrc: '/assets/images/dota_小牛.png', imgRadius: 'base' },
|
|
|
+ { content: 'Morphling', showImg: true, imgSrc: '/assets/images/dota_水人.png', imgRadius: 'base' },
|
|
|
]}
|
|
|
/>
|
|
|
|
|
|
- <Cell title="Option left" on:click={() => (visible12 = true)} />
|
|
|
+ <Cell title="Option left" onclick={() => (visible12 = true)} />
|
|
|
<ActionSheet
|
|
|
bind:visible={visible12}
|
|
|
actions={[
|
dufu1991