feat: 添加第三方授权登录icon和优化svg-icon组件可自定义大小
This commit is contained in:
郝先瑞
parent
6049f5ff03
commit
4e60ff0a8d
|
|
@ -1 +1 @@
|
|||
<svg t="1650329991210" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13818" width="200" height="200"><path d="M992 160v576H32V160h960m0-32H32c-17.6 0-32 14.4-32 32v576c0 17.6 14.4 32 32 32h960c17.6 0 32-14.4 32-32V160c0-17.6-14.4-32-32-32z" fill="" p-id="13819"></path><path d="M112 880h800c9.6 0 16 6.4 16 16s-6.4 16-16 16H112c-9.6 0-16-6.4-16-16s6.4-16 16-16z" fill="" p-id="13820"></path><path d="M334.4 275.2l171.2 382.4h-40l-57.6-124.8h-158.4L192 657.6H152l172.8-382.4h9.6z m-4.8 81.6l-62.4 137.6h124.8l-62.4-137.6zM563.2 657.6v-368H640c52.8 0 91.2 3.2 115.2 11.2 24 8 44.8 19.2 64 36.8 17.6 16 32 36.8 41.6 60.8 9.6 24 14.4 51.2 14.4 83.2s-8 62.4-22.4 89.6-35.2 49.6-60.8 64c-25.6 14.4-62.4 20.8-110.4 20.8h-118.4z m35.2-35.2H640c44.8 0 76.8-1.6 96-6.4s36.8-12.8 52.8-25.6c14.4-12.8 27.2-28.8 33.6-48 8-19.2 11.2-40 11.2-64s-4.8-46.4-12.8-67.2c-9.6-20.8-22.4-36.8-38.4-51.2s-36.8-22.4-59.2-27.2c-22.4-4.8-56-6.4-100.8-6.4h-25.6l1.6 296z" fill="" p-id="13821"></path></svg>
|
||||
<svg t="1662278390164" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9866" width="200" height="200"><path d="M544.059897 959.266898h-64.949141c-228.633593 0-415.697442-187.063849-415.697442-415.697442v-64.949141c0-228.633593 187.063849-415.697442 415.697442-415.697442h64.949141c228.633593 0 415.697442 187.063849 415.697442 415.697442v64.949141c-0.001024 228.633593-187.064873 415.697442-415.697442 415.697442z" fill="#5EAADE" p-id="9867"></path><path d="M729.459932 627.30075c-3.156638-39.628458-24.044923-83.747676-32.624058-105.910698l-22.084182-57.046794c-0.701361-23.73059 6.312253-78.322108-30.510759-146.611164s-110.820228-74.444654-124.497288-75.146016c-13.67706-0.701361-99.247252-1.402723-141.330987 72.944663-42.083735 74.347385-30.744205 148.812517-30.744205 148.812517l-23.523765 57.47785c-0.001024 0.002048-10.961716 26.222727-20.429584 58.135185-9.468891 31.913482-18.937783 82.063385-9.468892 92.233638 9.468891 10.170253 43.836626-46.643096 46.993265-51.902795 0 0 2.455277 27.179036 8.942615 41.382373l0.809893 1.776441 0.330715 0.722863 0.378837 0.826276 0.299999 0.652215 0.444366 0.960404 0.202729 0.435151a281.465052 281.465052 0 0 0 1.917738 4.024893l0.188394 0.386005c0.231398 0.473035 0.467916 0.953237 0.711601 1.442655l0.145391 0.291807c6.886653 13.807094 18.611164 33.823028 37.443487 50.420209l0.017406 0.015358-1.183612 0.387029c-10.666837 3.516022-31.69437 11.209497-40.624698 19.819348-1.717056 1.655623-2.987697 3.345033-3.650151 5.045707-5.376422 13.793783 4.208169 15.430976 20.574976 16.365783 16.365783 0.934807 94.922361 3.039916 132.563457-2.220807 0.407506-0.056314 0.787368-0.113651 1.171325-0.170989 2.710224 0.094197 5.32318 0.14232 7.828627 0.16075l0.151535 0.001024c0.83549 0.005119 1.66279 0.008191 2.474731 0.008191 0.496584 0 1.01467-0.002048 1.541971-0.006144l0.209896-0.001023a222.59267 222.59267 0 0 0 5.462429-0.106484c0.260067 0.037884 0.507847 0.075768 0.778152 0.113651 37.64212 5.260723 116.197674 3.156638 132.563457 2.220807 16.365783-0.934807 25.951397-2.572 20.573952-16.365783-4.301342-11.03646-34.17422-21.619339-45.956069-25.412834a141.388325 141.388325 0 0 0 7.958661-7.645351l0.236517-0.244709a142.494121 142.494121 0 0 0 2.531045-2.702033c42.433903-46.643096 38.927096-76.101301 40.681011-92.935 0 0 35.775577 51.552626 43.488506 53.306542 7.712928 1.753916 10.168205-6.311229 7.011566-45.940711z" fill="#FFFFFF" p-id="9868"></path></svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 2.4 KiB |
|
|
@ -1 +1 @@
|
|||
<svg t="1650329991210" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13818" width="200" height="200"><path d="M992 160v576H32V160h960m0-32H32c-17.6 0-32 14.4-32 32v576c0 17.6 14.4 32 32 32h960c17.6 0 32-14.4 32-32V160c0-17.6-14.4-32-32-32z" fill="" p-id="13819"></path><path d="M112 880h800c9.6 0 16 6.4 16 16s-6.4 16-16 16H112c-9.6 0-16-6.4-16-16s6.4-16 16-16z" fill="" p-id="13820"></path><path d="M334.4 275.2l171.2 382.4h-40l-57.6-124.8h-158.4L192 657.6H152l172.8-382.4h9.6z m-4.8 81.6l-62.4 137.6h124.8l-62.4-137.6zM563.2 657.6v-368H640c52.8 0 91.2 3.2 115.2 11.2 24 8 44.8 19.2 64 36.8 17.6 16 32 36.8 41.6 60.8 9.6 24 14.4 51.2 14.4 83.2s-8 62.4-22.4 89.6-35.2 49.6-60.8 64c-25.6 14.4-62.4 20.8-110.4 20.8h-118.4z m35.2-35.2H640c44.8 0 76.8-1.6 96-6.4s36.8-12.8 52.8-25.6c14.4-12.8 27.2-28.8 33.6-48 8-19.2 11.2-40 11.2-64s-4.8-46.4-12.8-67.2c-9.6-20.8-22.4-36.8-38.4-51.2s-36.8-22.4-59.2-27.2c-22.4-4.8-56-6.4-100.8-6.4h-25.6l1.6 296z" fill="" p-id="13821"></path></svg>
|
||||
<svg t="1662278315988" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3147" width="200" height="200"><path d="M347.729118 353.0242c-16.487119 0-29.776737 13.389539-29.776737 29.776737S331.241998 412.677596 347.729118 412.677596s29.776737-13.389539 29.776737-29.776737-13.289617-29.876659-29.776737-29.876659zM577.749415 511.800156c-13.689305 0-24.880562 11.091335-24.880563 24.880562 0 13.689305 11.091335 24.880562 24.880563 24.880562 13.689305 0 24.880562-11.191257 24.880562-24.880562s-11.191257-24.880562-24.880562-24.880562zM500.909446 412.677596c16.487119 0 29.776737-13.389539 29.776737-29.776737s-13.389539-29.776737-29.776737-29.776737c-16.487119 0-29.776737 13.389539-29.776737 29.776737s13.289617 29.776737 29.776737 29.776737zM698.455113 511.600312c-13.689305 0-24.880562 11.091335-24.880562 24.880562 0 13.689305 11.091335 24.880562 24.880562 24.880562 13.689305 0 24.880562-11.091335 24.880562-24.880562-0.099922-13.689305-11.191257-24.880562-24.880562-24.880562z" fill="#00C800" p-id="3148"></path><path d="M511.601093 0.799375C229.12178 0.799375 0.000781 229.820453 0.000781 512.399688s229.021077 511.600312 511.600312 511.600312 511.600312-229.021077 511.600312-511.600312S794.180328 0.799375 511.601093 0.799375z m-90.229508 634.504294c-27.37861 0-49.361436-5.595628-76.839969-10.991413l-76.640125 38.469945 21.882904-65.948477c-54.957065-38.370023-87.73146-87.831382-87.73146-148.084309 0-104.318501 98.722873-186.554254 219.32865-186.554255 107.815769 0 202.34192 65.648712 221.327088 153.979703-6.994536-0.799375-13.989071-1.298985-21.083529-1.298985-104.118657 0-186.454333 77.739266-186.454332 173.564403 0 15.98751 2.498048 31.275566 6.794692 45.964091-6.794692 0.599532-13.689305 0.899297-20.583919 0.899297z m323.547228 76.839969l16.48712 54.757221-60.153006-32.874317c-21.882904 5.495706-43.965652 10.991413-65.848555 10.991413-104.318501 0-186.554254-71.344262-186.554255-159.175644 0-87.631538 82.135831-159.175644 186.554255-159.175644 98.523029 0 186.254489 71.444184 186.254488 159.175644 0.099922 49.461358-32.774395 93.227166-76.740047 126.301327z" fill="#00C800" p-id="3149"></path></svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 2.1 KiB |
|
|
@ -1,5 +1,9 @@
|
|||
<template>
|
||||
<svg aria-hidden="true" class="svg-icon">
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="svg-icon"
|
||||
:style="'width:' + size + ';height:' + size"
|
||||
>
|
||||
<use :xlink:href="symbolId" :fill="color" />
|
||||
</svg>
|
||||
</template>
|
||||
|
|
@ -18,7 +22,11 @@ const props = defineProps({
|
|||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: ''
|
||||
default: '#fff'
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: '1em'
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -27,8 +35,6 @@ const symbolId = computed(() => `#${props.prefix}-${props.iconClass}`);
|
|||
|
||||
<style scoped>
|
||||
.svg-icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
vertical-align: -0.15em;
|
||||
overflow: hidden;
|
||||
fill: currentColor;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="social-signup-container">
|
||||
<div class="sign-btn" @click="wechatHandleClick('wechat')">
|
||||
<span class="wx-svg-container">
|
||||
<svg-icon icon-class="wechat" class="icon" />
|
||||
<svg-icon icon-class="wechat" class="icon" size="1.5em" />
|
||||
</span>
|
||||
WeChat
|
||||
</div>
|
||||
|
|
@ -16,6 +16,8 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import SvgIcon from '@/components/SvgIcon/index.vue';
|
||||
|
||||
/**
|
||||
* 微信授权
|
||||
*/
|
||||
|
|
@ -54,6 +56,7 @@ function tencentHandleClick(thirdpart: string) {
|
|||
color: #fff;
|
||||
font-size: 24px;
|
||||
margin-top: 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.wx-svg-container,
|
||||
|
|
@ -69,12 +72,7 @@ function tencentHandleClick(thirdpart: string) {
|
|||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.wx-svg-container {
|
||||
background-color: #24da70;
|
||||
}
|
||||
|
||||
.qq-svg-container {
|
||||
background-color: #6ba2d6;
|
||||
margin-left: 50px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -180,7 +180,7 @@
|
|||
@click="iconSelectVisible = true"
|
||||
>
|
||||
<template #prefix>
|
||||
<svg-icon :icon-class="formData.icon" />
|
||||
<svg-icon :icon-class="formData.icon" color="999" />
|
||||
</template>
|
||||
</el-input>
|
||||
</template>
|
||||
|
|
@ -235,7 +235,7 @@ import { Dialog, Option } from '@/types/common';
|
|||
import {
|
||||
MenuFormData,
|
||||
MenuItem,
|
||||
MenuQueryParam,
|
||||
MenuQueryParam
|
||||
} from '@/types/api/system/menu';
|
||||
// API 依赖
|
||||
import {
|
||||
|
|
@ -244,7 +244,7 @@ import {
|
|||
listMenuOptions,
|
||||
addMenu,
|
||||
deleteMenus,
|
||||
updateMenu,
|
||||
updateMenu
|
||||
} from '@/api/system/menu';
|
||||
|
||||
import SvgIcon from '@/components/SvgIcon/index.vue';
|
||||
|
|
@ -272,7 +272,7 @@ const state = reactive({
|
|||
visible: 1,
|
||||
sort: 1,
|
||||
component: undefined,
|
||||
type: 'MENU',
|
||||
type: 'MENU'
|
||||
} as MenuFormData,
|
||||
rules: {
|
||||
parentId: [{ required: true, message: '请选择顶级菜单', trigger: 'blur' }],
|
||||
|
|
@ -280,8 +280,8 @@ const state = reactive({
|
|||
type: [{ required: true, message: '请选择菜单类型', trigger: 'blur' }],
|
||||
path: [{ required: true, message: '请输入路由路径', trigger: 'blur' }],
|
||||
component: [
|
||||
{ required: true, message: '请输入组件完整路径', trigger: 'blur' },
|
||||
],
|
||||
{ required: true, message: '请输入组件完整路径', trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
menuOptions: [] as Option[],
|
||||
currentRow: undefined,
|
||||
|
|
@ -289,8 +289,8 @@ const state = reactive({
|
|||
iconSelectVisible: false,
|
||||
cacheData: {
|
||||
menuType: '',
|
||||
menuPath: '',
|
||||
},
|
||||
menuPath: ''
|
||||
}
|
||||
});
|
||||
|
||||
const {
|
||||
|
|
@ -302,7 +302,7 @@ const {
|
|||
rules,
|
||||
menuOptions,
|
||||
iconSelectVisible,
|
||||
cacheData,
|
||||
cacheData
|
||||
} = toRefs(state);
|
||||
|
||||
/**
|
||||
|
|
@ -352,7 +352,7 @@ async function handleAdd(row: any) {
|
|||
await loadMenuData();
|
||||
state.dialog = {
|
||||
title: '添加菜单',
|
||||
visible: true,
|
||||
visible: true
|
||||
};
|
||||
if (row.id) {
|
||||
// 行点击新增
|
||||
|
|
@ -381,7 +381,7 @@ async function handleUpdate(row: MenuFormData) {
|
|||
await loadMenuData();
|
||||
state.dialog = {
|
||||
title: '编辑菜单',
|
||||
visible: true,
|
||||
visible: true
|
||||
};
|
||||
const id = row.id as string;
|
||||
getMenuDetail(id).then(({ data }) => {
|
||||
|
|
@ -435,7 +435,7 @@ function handleDelete(row: any) {
|
|||
ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
deleteMenus(ids).then(() => {
|
||||
|
|
|
|||
|
|
@ -347,7 +347,7 @@ onMounted(() => {
|
|||
plain
|
||||
@click.stop="openRoleResourceDialog(scope.row)"
|
||||
>
|
||||
<svg-icon icon-class="perm" />
|
||||
<svg-icon icon-class="perm" color="#67C23A" />
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue