chore(Sidebar): improve code

This commit is contained in:
chenjiahan 2020-08-25 15:20:05 +08:00
parent e686738fd5
commit d0a3726bbb
2 changed files with 8 additions and 13 deletions

View File

@ -1,4 +1,4 @@
import { ref, computed } from 'vue'; import { ref } from 'vue';
import { createNamespace } from '../utils'; import { createNamespace } from '../utils';
import { route, routeProps } from '../utils/router'; import { route, routeProps } from '../utils/router';
import { useParent } from '../api/use-relation'; import { useParent } from '../api/use-relation';
@ -21,10 +21,9 @@ export default createComponent({
setup(props, { emit }) { setup(props, { emit }) {
const { parent, index } = useParent(SIDEBAR_KEY, ref()); const { parent, index } = useParent(SIDEBAR_KEY, ref());
const selected = computed(() => index.value === +parent.active());
return (vm) => { return (vm) => {
const { dot, badge, title, disabled } = props; const { dot, badge, title, disabled } = props;
const selected = index.value === parent.active();
const onClick = () => { const onClick = () => {
if (disabled) { if (disabled) {
@ -33,7 +32,7 @@ export default createComponent({
emit('click', index.value); emit('click', index.value);
parent.emit('update:modelValue', index.value); parent.emit('update:modelValue', index.value);
parent.setIndex(index.value); parent.setActive(index.value);
route(vm.$router, vm); route(vm.$router, vm);
}; };

View File

@ -17,25 +17,21 @@ export default createComponent({
setup(props, { emit, slots }) { setup(props, { emit, slots }) {
const children = ref([]); const children = ref([]);
const index = ref(+props.modelValue); const active = () => +props.modelValue;
const active = () => props.modelValue;
const setIndex = (value) => { const setActive = (value) => {
if (value !== index.value) { if (value !== active()) {
index.value = value;
emit('change', value); emit('change', value);
} }
}; };
watch(active, (value) => { watch(active, setActive);
setIndex(+value);
});
provide(SIDEBAR_KEY, { provide(SIDEBAR_KEY, {
emit, emit,
active, active,
children, children,
setIndex, setActive,
}); });
return () => <div class={bem()}>{slots.default?.()}</div>; return () => <div class={bem()}>{slots.default?.()}</div>;