@farris/ui-vue
Version:
Farris Vue, a Farris Design based Vue3 component library.
75 lines (74 loc) • 3.43 kB
TypeScript
/**
* Response Toolbar 是一个可以根据屏幕尺寸自定义调整显示按钮个数的工具条组件。
*
* @example
* ```tsx
* import { defineComponent, ref, computed, reactive } from 'vue';
* import { FResponseToolbar } from '../../components/response-toolbar';
*
* export default defineComponent({
* name: 'ResponseToolbarBasic',
* setup() {
* const currentState = ref<string>('init');
*
* function executeMethod($event: MouseEvent, method: string) {
* $event.stopPropagation();
* switch (method) {
* case 'add':
* currentState.value = 'adding';
* break;
* case 'edit':
* currentState.value = 'editing';
* break;
* default:
* currentState.value = 'init';
* }
* window.alert(`The button named ${method} is clicked.`);
* }
*
* const status = {
* canAdd: computed(() => currentState.value === 'init'),
* canEdit: computed(() => currentState.value === 'init'),
* canCancel: computed(() => currentState.value === 'adding' || currentState.value === 'editing'),
* canSave: computed(() => currentState.value === 'adding' || currentState.value === 'editing'),
* canDelete: computed(() => currentState.value === 'init'),
* canSubmit: computed(() => currentState.value === 'init'),
* canRetrieve: computed(() => currentState.value === 'init')
* };
*
* const items = reactive([
* { id: 'add', text: '新增', onClick: executeMethod, enable: status.canAdd, class: 'btn-success btn-sm' },
* { id: 'edit', text: '编辑', onClick: executeMethod, enable: status.canEdit },
* { id: 'cancel', text: '取消', onClick: executeMethod, enable: status.canCancel },
* {
* id: 'save',
* text: '保存',
* onClick: executeMethod,
* children: [
* { id: 'addNewAfterSave', text: '保存并新增', onClick: executeMethod, enable: status.canSave },
* { id: 'submitAfterSave', text: '保存并提交', onClick: executeMethod, enable: status.canSave }
* ]
* },
* { id: 'delete', text: '删除', onClick: executeMethod, enable: status.canDelete },
* { id: 'submit', text: '提交审批', onClick: executeMethod, enable: status.canSubmit },
* { id: 'withTips', text: '按钮带提示', onClick: executeMethod, tipsEnable: true, tipsText: '此处是提示' },
* { id: 'retrieve', text: '取消提交审批', onClick: executeMethod, enable: status.canRetrieve }
* ]);
*
* return () => <FResponseToolbar items={items} />;
* }
* });
* ```
*
* @public
*/
declare const _default: import("vue").DefineComponent<{
[x: string]: any;
}, () => any, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").PublicProps, Readonly<{
[x: string]: any;
}> & Readonly<{
onClick?: ((...args: any[]) => any) | undefined;
}>, {
[x: string]: any;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
export default _default;