testzm0318
/
farris-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge branch 'master' into docs

This commit is contained in:
Sagi 2022-10-08 19:23:49 +08:00
parent 3d2c1d1ef9 2562ef9e77
commit 46aa98c022
6 changed files with 38 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.vscode/settings.json vendored
View File

@ -7,6 +7,6 @@
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"[vue]": {
"editor.defaultFormatter": "Wscats.vue"
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}

92
packages/ui-vue/components/button/src/button.component.tsx
View File

@ -9,94 +9,12 @@ export default defineComponent({
emits: ['click'],
setup(props: ButtonProps, context: SetupContext) {
const { onClickButton } = useButton(props, context);
const fButtonSize = computed(() => ({
'btn-lg': props.size === 'large',
'btn-sm': props.size === 'small',
}));
const fButtonType = computed(() => ({
'btn-primary': props.buttonType === 'primary',
'btn-warning': props.buttonType === 'warning',
'btn-danger': props.buttonType === 'danger',
'btn-success': props.buttonType === 'success',
'btn-link': props.buttonType === 'link',
'btn-secondary': props.buttonType === 'secondary',
}));
return () => (
// btn-lg btn btn-primary
// btn-sm btn btn-warning
<div>
<div style={'text-align:left;margin-top:10px;'}>
<div style={'margin-top:10px;'}>primary</div>
<button
class={[fButtonSize.value, ' btn btn-primary']}
style={'margin:5px'}
id={props.id}
disabled={props.disable}
onClick={onClickButton}>
主要按钮
</button>
<button
class={[fButtonSize.value, ' btn btn-danger']}
style={'margin:5px'}
id={props.id}
disabled={props.disable}
onClick={onClickButton}>
危险按钮
</button>
<button
class={[fButtonSize.value, ' btn btn-success']}
style={'margin:5px'}
id={props.id}
disabled={props.disable}
onClick={onClickButton}>
成功按钮
</button>
<button
class={[fButtonSize.value, ' btn btn-warning']}
style={'margin:5px'}
id={props.id}
disabled={props.disable}
onClick={onClickButton}>
警告按钮
</button>
<button
class={[fButtonSize.value, ' btn btn-secondary']}
style={'margin:5px'}
id={props.id}
disabled={props.disable}
onClick={onClickButton}>
信息按钮
</button>
<button
class={[fButtonSize.value, ' btn btn-link']}
style={'margin:5px'}
id={props.id}
disabled={props.disable}
onClick={onClickButton}>
文本按钮
</button>
</div>
<div style={'text-align:left'}>
<div style={'margin-top:10px;'}>size</div>
<button
class={['btn-sm btn', fButtonType.value]}
style={'margin:5px'}
id={props.id}
disabled={props.disable}
onClick={onClickButton}>
小尺寸
</button>
<button
class={['btn-lg btn', fButtonType.value]}
style={'margin:5px'}
id={props.id}
disabled={props.disable}
onClick={onClickButton}>
大尺寸
</button>
</div>
</div>
<button class={(props.size === 'large' ? 'btn-lg ' : 'btn-sm ') + 'btn ' + (props.buttonType ? 'btn-' + props.buttonType + ' ' : '')}
disabled={props.disable}
onClick={(event: MouseEvent) => onClickButton(event)} >
{context.slots.default && context.slots.default()}
</button >
);
},
});

5
packages/ui-vue/components/button/src/button.props.ts
View File

@ -20,7 +20,10 @@ export const buttonProps = {
* 按钮尺寸
*/
size: { type: String as PropType<SizeType>, default: 'small' },
// 待确定：text参数
// /**
// * button上显示的文字
// */
// text: { type: String }
};
export type ButtonProps = ExtractPropTypes<typeof buttonProps>;

7
packages/ui-vue/components/button/src/composition/use-button.ts
View File

@ -4,21 +4,14 @@ import { computed, SetupContext } from 'vue';
export function useButton(props: ButtonProps, context: SetupContext): UseButton {
// const buttonClass = computed(() => ({
// // 'input-group-append': true,
// // 'append-force-show': props.showButtonWhenDisabled && (props.readonly || props.disable),
// }));
function onClickButton($event: Event) {
$event.stopPropagation();
// this.disabled
if (props.disable) {
context.emit('clickButton', $event);
}
}
return {
// buttonClass,
onClickButton
};
}

6
packages/ui-vue/src/App.vue
View File

@ -6,7 +6,7 @@ import HelloWorld from "./components/hello-world.vue";
import Avatar from "./components/avatar.vue";
import Tabs from "./components/tabs.vue";
import ButtonEdit from "./components/button-edit.vue";
import FButton from "../components/button/src/button.component";
import FButton from "./components/button.vue";
import Switch from "./components/switch.vue";
import RadioGroup from "./components/radio-group.vue";
import Section from "./components/section.vue";
@ -36,9 +36,7 @@ const canAutoComplete = ref(false);
<!-- <ButtonEdit :editable="canEdit" :auto-complete="canAutoComplete" :enable-clear="true"></ButtonEdit> -->
<ButtonEdit></ButtonEdit>
<Avatar></Avatar>
<input type="checkbox" id="checkbox" v-model="disable" />
<label for="checkbox">disable:{{ disable }}</label>
<FButton :disable="disable"></FButton>
<FButton></FButton>
<Switch></Switch>
<RadioGroup></RadioGroup>
<Section></Section>

26
packages/ui-vue/src/components/button.vue Normal file
View File

@ -0,0 +1,26 @@
<script setup lang="ts">
import { ref } from 'vue';
import FButton from '../../components/button/src/button.component';
const disable = ref(false);
</script>
<template>
<input type="checkbox" id="checkbox" v-model="disable" />
<div>
<label for="checkbox">disable:{{ disable }}</label>
</div>
<div>
<FButton style="margin: 5px;" :disable="disable"> 主要按钮 </FButton>
<FButton style="margin: 5px;" :button-type="'danger'" :disable="disable"> 危险按钮 </FButton>
<FButton style="margin: 5px;" :button-type="'success'" :disable="disable"> 成功按钮 </FButton>
<FButton style="margin: 5px;" :button-type="'warning'" :disable="disable"> 警告按钮 </FButton>
<FButton style="margin: 5px;" :button-type="'secondary'" :disable="disable"> 信息按钮 </FButton>
<FButton style="margin: 5px;" :button-type="'link'" :disable="disable"> 文本按钮 </FButton>
</div>
<div>
<FButton style="margin: 5px;" :size="'small'" :disable="disable"> 小尺寸 </FButton>
<FButton style="margin: 5px;" :size="'large'" :disable="disable"> 大尺寸 </FButton>
</div>
</template>