feat(Layout): Add classic layout
陈凯龙
4 years ago
parent
958edefe7b
commit
839b6015b8
@ -0,0 +1,3 @@
|
|||||||
|
import ColorRadioPicker from './src/ColorRadioPicker.vue'
|
||||||
|
|
||||||
|
export { ColorRadioPicker }
|
||||||
@ -0,0 +1,60 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { PropType, watch, unref, ref } from 'vue'
|
||||||
|
import { propTypes } from '@/utils/propTypes'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
schema: {
|
||||||
|
type: Array as PropType<string[]>,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
|
modelValue: propTypes.string.def('')
|
||||||
|
})
|
||||||
|
|
||||||
|
const emit = defineEmits(['update:modelValue', 'change'])
|
||||||
|
|
||||||
|
const colorVal = ref(props.modelValue)
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.modelValue,
|
||||||
|
(val: string) => {
|
||||||
|
if (val === unref(colorVal)) return
|
||||||
|
colorVal.value = val
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
// 监听
|
||||||
|
watch(
|
||||||
|
() => colorVal.value,
|
||||||
|
(val: string) => {
|
||||||
|
emit('update:modelValue', val)
|
||||||
|
emit('change', val)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="v-color-radio-picker flex flex-wrap space-x-14px">
|
||||||
|
<span
|
||||||
|
v-for="(item, i) in schema"
|
||||||
|
:key="`radio-${i}`"
|
||||||
|
class="v-color-radio-picker w-20px h-20px cursor-pointer rounded-2px border-solid border-gray-300 border-2px text-center leading-20px mb-5px"
|
||||||
|
:class="{ 'is-active': colorVal === item }"
|
||||||
|
:style="{
|
||||||
|
background: item
|
||||||
|
}"
|
||||||
|
@click="colorVal = item"
|
||||||
|
>
|
||||||
|
<Icon v-if="colorVal === item" color="#fff" icon="ep:check" :size="16" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
@prefix-cls: ~'@{namespace}-color-radio-picker';
|
||||||
|
|
||||||
|
.@{prefix-cls} {
|
||||||
|
.is-active {
|
||||||
|
border-color: var(--el-color-primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,134 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { ElSwitch } from 'element-plus'
|
||||||
|
import { useI18n } from '@/hooks/web/useI18n'
|
||||||
|
import { useAppStore } from '@/store/modules/app'
|
||||||
|
import { ref } from 'vue'
|
||||||
|
|
||||||
|
const appStore = useAppStore()
|
||||||
|
|
||||||
|
const { t } = useI18n()
|
||||||
|
|
||||||
|
// 面包屑
|
||||||
|
const breadcrumb = ref(appStore.getBreadcrumb)
|
||||||
|
|
||||||
|
const breadcrumbChange = (show: boolean) => {
|
||||||
|
appStore.setBreadcrumb(show)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 面包屑图标
|
||||||
|
const breadcrumbIcon = ref(appStore.getBreadcrumbIcon)
|
||||||
|
|
||||||
|
const breadcrumbIconChange = (show: boolean) => {
|
||||||
|
appStore.setBreadcrumbIcon(show)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 折叠菜单
|
||||||
|
const collapse = ref(appStore.getCollapse)
|
||||||
|
|
||||||
|
const collapseChange = (show: boolean) => {
|
||||||
|
appStore.setCollapse(show)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 折叠图标
|
||||||
|
const hamburger = ref(appStore.getHamburger)
|
||||||
|
|
||||||
|
const hamburgerChange = (show: boolean) => {
|
||||||
|
appStore.setHamburger(show)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 全屏图标
|
||||||
|
const screenfull = ref(appStore.getScreenfull)
|
||||||
|
|
||||||
|
const screenfullChange = (show: boolean) => {
|
||||||
|
appStore.setScreenfull(show)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 尺寸图标
|
||||||
|
const size = ref(appStore.getSize)
|
||||||
|
|
||||||
|
const sizeChange = (show: boolean) => {
|
||||||
|
appStore.setSize(show)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 多语言图标
|
||||||
|
const locale = ref(appStore.getLocale)
|
||||||
|
|
||||||
|
const localeChange = (show: boolean) => {
|
||||||
|
appStore.setLocale(show)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 标签页
|
||||||
|
const tagsView = ref(appStore.getTagsView)
|
||||||
|
|
||||||
|
const tagsViewChange = (show: boolean) => {
|
||||||
|
appStore.setTagsView(show)
|
||||||
|
}
|
||||||
|
|
||||||
|
// logo
|
||||||
|
const logo = ref(appStore.getLogo)
|
||||||
|
|
||||||
|
const logoChange = (show: boolean) => {
|
||||||
|
appStore.setLogo(show)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 灰色模式
|
||||||
|
const greyMode = ref(appStore.getGreyMode)
|
||||||
|
|
||||||
|
const greyModeChange = (show: boolean) => {
|
||||||
|
appStore.setGreyMode(show)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="v-interface-display">
|
||||||
|
<div class="flex justify-between items-center">
|
||||||
|
<span class="text-14px">{{ t('setting.breadcrumb') }}</span>
|
||||||
|
<ElSwitch v-model="breadcrumb" @change="breadcrumbChange" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex justify-between items-center">
|
||||||
|
<span class="text-14px">{{ t('setting.breadcrumbIcon') }}</span>
|
||||||
|
<ElSwitch v-model="breadcrumbIcon" @change="breadcrumbIconChange" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex justify-between items-center">
|
||||||
|
<span class="text-14px">{{ t('setting.collapseMenu') }}</span>
|
||||||
|
<ElSwitch v-model="collapse" @change="collapseChange" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex justify-between items-center">
|
||||||
|
<span class="text-14px">{{ t('setting.hamburgerIcon') }}</span>
|
||||||
|
<ElSwitch v-model="hamburger" @change="hamburgerChange" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex justify-between items-center">
|
||||||
|
<span class="text-14px">{{ t('setting.screenfullIcon') }}</span>
|
||||||
|
<ElSwitch v-model="screenfull" @change="screenfullChange" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex justify-between items-center">
|
||||||
|
<span class="text-14px">{{ t('setting.sizeIcon') }}</span>
|
||||||
|
<ElSwitch v-model="size" @change="sizeChange" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex justify-between items-center">
|
||||||
|
<span class="text-14px">{{ t('setting.localeIcon') }}</span>
|
||||||
|
<ElSwitch v-model="locale" @change="localeChange" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex justify-between items-center">
|
||||||
|
<span class="text-14px">{{ t('setting.tagsView') }}</span>
|
||||||
|
<ElSwitch v-model="tagsView" @change="tagsViewChange" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex justify-between items-center">
|
||||||
|
<span class="text-14px">{{ t('setting.logo') }}</span>
|
||||||
|
<ElSwitch v-model="logo" @change="logoChange" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex justify-between items-center">
|
||||||
|
<span class="text-14px">{{ t('setting.greyMode') }}</span>
|
||||||
|
<ElSwitch v-model="greyMode" @change="greyModeChange" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
Loading…
Reference in New Issue