zhangqi
1 year ago
commit
c62f88622d
@ -0,0 +1 @@ |
||||
|
||||
@ -0,0 +1,35 @@ |
||||
# vue-project |
||||
|
||||
This template should help get you started developing with Vue 3 in Vite. |
||||
|
||||
## Recommended IDE Setup |
||||
|
||||
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). |
||||
|
||||
## Customize configuration |
||||
|
||||
See [Vite Configuration Reference](https://vitejs.dev/config/). |
||||
|
||||
## Project Setup |
||||
|
||||
```sh |
||||
npm install |
||||
``` |
||||
|
||||
### Compile and Hot-Reload for Development |
||||
|
||||
```sh |
||||
npm run dev |
||||
``` |
||||
|
||||
### Compile and Minify for Production |
||||
|
||||
```sh |
||||
npm run build |
||||
``` |
||||
|
||||
### Lint with [ESLint](https://eslint.org/) |
||||
|
||||
```sh |
||||
npm run lint |
||||
``` |
||||
@ -0,0 +1,13 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<link rel="icon" href="/favicon.ico"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
<title>Vite App</title> |
||||
</head> |
||||
<body> |
||||
<div id="app"></div> |
||||
<script type="module" src="/src/main.js"></script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,8 @@ |
||||
{ |
||||
"compilerOptions": { |
||||
"paths": { |
||||
"@/*": ["./src/*"] |
||||
} |
||||
}, |
||||
"exclude": ["node_modules", "dist"] |
||||
} |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,26 @@ |
||||
{ |
||||
"name": "vue-project", |
||||
"version": "0.0.0", |
||||
"private": true, |
||||
"type": "module", |
||||
"scripts": { |
||||
"dev": "vite", |
||||
"build": "vite build", |
||||
"preview": "vite preview", |
||||
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore", |
||||
"format": "prettier --write src/" |
||||
}, |
||||
"dependencies": { |
||||
"element-plus": "^2.4.3", |
||||
"vue": "^3.3.10" |
||||
}, |
||||
"devDependencies": { |
||||
"@rushstack/eslint-patch": "^1.3.3", |
||||
"@vitejs/plugin-vue": "^4.5.1", |
||||
"@vue/eslint-config-prettier": "^8.0.0", |
||||
"eslint": "^8.49.0", |
||||
"eslint-plugin-vue": "^9.17.0", |
||||
"prettier": "^3.0.3", |
||||
"vite": "^5.0.5" |
||||
} |
||||
} |
||||
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
@ -0,0 +1,9 @@ |
||||
<script setup> |
||||
import Yys from './components/Yys.vue' |
||||
</script> |
||||
|
||||
<template> |
||||
<main> |
||||
<Yys /> |
||||
</main> |
||||
</template> |
||||
@ -0,0 +1,86 @@ |
||||
/* color palette from <https://github.com/vuejs/theme> */ |
||||
:root { |
||||
--vt-c-white: #ffffff; |
||||
--vt-c-white-soft: #f8f8f8; |
||||
--vt-c-white-mute: #f2f2f2; |
||||
|
||||
--vt-c-black: #181818; |
||||
--vt-c-black-soft: #222222; |
||||
--vt-c-black-mute: #282828; |
||||
|
||||
--vt-c-indigo: #2c3e50; |
||||
|
||||
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29); |
||||
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12); |
||||
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); |
||||
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); |
||||
|
||||
--vt-c-text-light-1: var(--vt-c-indigo); |
||||
--vt-c-text-light-2: rgba(60, 60, 60, 0.66); |
||||
--vt-c-text-dark-1: var(--vt-c-white); |
||||
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64); |
||||
} |
||||
|
||||
/* semantic color variables for this project */ |
||||
:root { |
||||
--color-background: var(--vt-c-white); |
||||
--color-background-soft: var(--vt-c-white-soft); |
||||
--color-background-mute: var(--vt-c-white-mute); |
||||
|
||||
--color-border: var(--vt-c-divider-light-2); |
||||
--color-border-hover: var(--vt-c-divider-light-1); |
||||
|
||||
--color-heading: var(--vt-c-text-light-1); |
||||
--color-text: var(--vt-c-text-light-1); |
||||
|
||||
--section-gap: 160px; |
||||
} |
||||
|
||||
@media (prefers-color-scheme: dark) { |
||||
:root { |
||||
--color-background: var(--vt-c-black); |
||||
--color-background-soft: var(--vt-c-black-soft); |
||||
--color-background-mute: var(--vt-c-black-mute); |
||||
|
||||
--color-border: var(--vt-c-divider-dark-2); |
||||
--color-border-hover: var(--vt-c-divider-dark-1); |
||||
|
||||
--color-heading: var(--vt-c-text-dark-1); |
||||
--color-text: var(--vt-c-text-dark-2); |
||||
} |
||||
} |
||||
|
||||
*, |
||||
*::before, |
||||
*::after { |
||||
box-sizing: border-box; |
||||
margin: 0; |
||||
font-weight: normal; |
||||
} |
||||
|
||||
body { |
||||
min-height: 100vh; |
||||
color: var(--color-text); |
||||
background: var(--color-background); |
||||
transition: |
||||
color 0.5s, |
||||
background-color 0.5s; |
||||
line-height: 1.6; |
||||
font-family: |
||||
Inter, |
||||
-apple-system, |
||||
BlinkMacSystemFont, |
||||
'Segoe UI', |
||||
Roboto, |
||||
Oxygen, |
||||
Ubuntu, |
||||
Cantarell, |
||||
'Fira Sans', |
||||
'Droid Sans', |
||||
'Helvetica Neue', |
||||
sans-serif; |
||||
font-size: 15px; |
||||
text-rendering: optimizeLegibility; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
} |
||||
|
After Width: | Height: | Size: 276 B |
@ -0,0 +1,35 @@ |
||||
@import './base.css'; |
||||
|
||||
#app { |
||||
max-width: 1280px; |
||||
margin: 0 auto; |
||||
padding: 2rem; |
||||
font-weight: normal; |
||||
} |
||||
|
||||
a, |
||||
.green { |
||||
text-decoration: none; |
||||
color: hsla(160, 100%, 37%, 1); |
||||
transition: 0.4s; |
||||
padding: 3px; |
||||
} |
||||
|
||||
@media (hover: hover) { |
||||
a:hover { |
||||
background-color: hsla(160, 100%, 37%, 0.2); |
||||
} |
||||
} |
||||
|
||||
@media (min-width: 1024px) { |
||||
body { |
||||
display: flex; |
||||
place-items: center; |
||||
} |
||||
|
||||
#app { |
||||
display: grid; |
||||
grid-template-columns: 1fr 1fr; |
||||
padding: 0 2rem; |
||||
} |
||||
} |
||||
Binary file not shown.
@ -0,0 +1,80 @@ |
||||
<template> |
||||
<el-dialog |
||||
v-model="show" |
||||
:visable.sync="show" |
||||
title="配置属性" |
||||
@cancel="cancel" |
||||
> |
||||
<span>当前选择侍神：{{current.name}}</span> |
||||
<el-form :model="form" label-width="120px"> |
||||
<el-form-item label="速度"> |
||||
<el-input v-model="form.speed" /> |
||||
</el-form-item> |
||||
<el-form-item label="天赋"> |
||||
<el-select v-model="form.region" placeholder="please select your zone"> |
||||
<el-option label="Zone one" value="shanghai" /> |
||||
<el-option label="Zone two" value="beijing" /> |
||||
</el-select> |
||||
</el-form-item> |
||||
|
||||
<el-form-item label="Activity form"> |
||||
<el-input v-model="form.desc" type="textarea" /> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button type="primary" @click="confirm">Confirm</el-button> |
||||
<el-button @click="cancel">Cancel</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
</el-dialog> |
||||
</template> |
||||
|
||||
<script> |
||||
import propertyData from "../data/property.json"; |
||||
import { ref } from "vue"; |
||||
|
||||
export default { |
||||
props: { |
||||
currentHero: { |
||||
type: Object, |
||||
default: {}, |
||||
}, |
||||
showProperty: { |
||||
type: Boolean, |
||||
}, |
||||
}, |
||||
|
||||
data() { |
||||
return { |
||||
propertyData: propertyData, |
||||
form: { |
||||
speed: "" |
||||
}, |
||||
current: {}, |
||||
show: false, |
||||
}; |
||||
}, |
||||
watch: { |
||||
showProperty(newVal, oldVal) { |
||||
console.log("=======>>>> ", newVal, oldVal); |
||||
this.show = newVal; |
||||
}, |
||||
currentHero(newVal, oldVal) { |
||||
console.log("===item====>>>> ", newVal, oldVal); |
||||
if (newVal.property != undefined) { |
||||
this.form = newVal.property; |
||||
} |
||||
this.current = newVal; |
||||
}, |
||||
}, |
||||
methods: { |
||||
cancel() { |
||||
console.log("cancel===="); |
||||
this.$emit("closeProperty"); |
||||
}, |
||||
confirm() { |
||||
console.log("confirm===="); |
||||
this.$emit("updateProperty", this.form); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
@ -0,0 +1,66 @@ |
||||
<template> |
||||
<el-dialog v-model="show" :visable.sync="show" title="请选择侍神" @cancel="cancel"> |
||||
<span>当前选择：{{current.name}}</span> |
||||
<li v-for="(item, index) in heroData" :key="index" @click.stop="select(item)"> |
||||
<div> |
||||
<span>{{ item.name }}</span> |
||||
</div> |
||||
</li> |
||||
<template #footer> |
||||
<span class="dialog-footer"> |
||||
<el-button @click.stop="cancel">Cancel</el-button> |
||||
<el-button type="primary" @click.stop="confirm"> Confirm </el-button> |
||||
</span> |
||||
</template> |
||||
</el-dialog> |
||||
</template> |
||||
|
||||
<script> |
||||
import heroData from "../data/hero.json"; |
||||
import { ref } from "vue"; |
||||
|
||||
export default { |
||||
props: { |
||||
currentHero: { |
||||
type: Object, |
||||
default: {}, |
||||
}, |
||||
showSelectHero: { |
||||
type: Boolean, |
||||
}, |
||||
}, |
||||
|
||||
data() { |
||||
return { |
||||
heroData: heroData, |
||||
selected: null, |
||||
current: {}, |
||||
show: false, |
||||
}; |
||||
}, |
||||
watch: { |
||||
showSelectHero(newVal, oldVal) { |
||||
console.log("=======>>>> ", newVal, oldVal); |
||||
this.show = newVal; |
||||
}, |
||||
currentHero(newVal, oldVal) { |
||||
console.log("===item====>>>> ", newVal, oldVal); |
||||
this.current = newVal; |
||||
}, |
||||
}, |
||||
methods: { |
||||
select(item) { |
||||
this.current = item; |
||||
}, |
||||
cancel() { |
||||
console.log("cancel===="); |
||||
this.$emit("closeSelectHero"); |
||||
}, |
||||
confirm() { |
||||
console.log("confirm===="); |
||||
this.$emit("updateHero", this.current); |
||||
this.current = {}; |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
@ -0,0 +1,99 @@ |
||||
<template> |
||||
<HeroSelect |
||||
:showSelectHero="showSelectHero" |
||||
:currentHero="currentHero" |
||||
@closeSelectHero="closeSelectHero" |
||||
@updateHero="updateHero" |
||||
/> |
||||
|
||||
<HeroProperty |
||||
:showProperty="showProperty" |
||||
:currentHero="currentHero" |
||||
@closeProperty="closeProperty" |
||||
@updateProperty="updateProperty" |
||||
/> |
||||
<el-row> |
||||
<el-col v-for="(item, index) in items" :key="index" :span="8"> |
||||
<el-card :body-style="{ padding: '0px' }"> |
||||
<img :src="item.avatar || '111'" class="image" @click="editHero(index, item)" /> |
||||
<div style="padding: 14px"> |
||||
<span>{{ item.name || "" }}</span> |
||||
<div v-if="item.properties"> |
||||
<span>已配置属性：</span> |
||||
<div v-for="(value, key, index) in item.properties"> |
||||
<span>{{key}}</span> : <span>{{value || '-'}}</span> |
||||
</div> |
||||
</div> |
||||
<div class="bottom"> |
||||
<el-button @click="editProperties(index, item)">配置属性</el-button> |
||||
</div> |
||||
</div> |
||||
</el-card> |
||||
</el-col> |
||||
</el-row> |
||||
|
||||
<div style="margin: 20px"> |
||||
<span>配置结果</span> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import heroData from "../data/hero.json"; |
||||
|
||||
import { ref, reactive, toRefs } from "vue"; |
||||
import HeroSelect from "./HeroSelect.vue"; |
||||
import HeroProperty from "./HeroProperty.vue"; |
||||
|
||||
export default { |
||||
data() { |
||||
return { |
||||
heroData: heroData, |
||||
showSelectHero: false, |
||||
showProperty: false, |
||||
items: [{}, {}, {}], |
||||
index: 0, |
||||
currentHero: {}, |
||||
}; |
||||
}, |
||||
components: { |
||||
HeroSelect, |
||||
HeroProperty, |
||||
}, |
||||
|
||||
methods: { |
||||
closeSelectHero() { |
||||
console.log("close select ===="); |
||||
this.showSelectHero = false; |
||||
this.currentHero = {}; |
||||
}, |
||||
editHero(index, item) { |
||||
console.log("==== edit hero ===", index, item); |
||||
this.currentHero = item; |
||||
this.showSelectHero = true; |
||||
this.index = index; |
||||
}, |
||||
updateHero(hero) { |
||||
console.log("parent====> ", hero); |
||||
this.showSelectHero = false; |
||||
this.items[this.index].name = hero.name; |
||||
this.currentHero = {}; |
||||
}, |
||||
editProperties(index, item) { |
||||
console.log("add properties", index, item); |
||||
this.showProperty = true; |
||||
this.currentHero = item; |
||||
}, |
||||
closeProperty() { |
||||
console.log("close property ==="); |
||||
this.showProperty = false; |
||||
this.currentHero = {}; |
||||
}, |
||||
updateProperty(property) { |
||||
console.log("parent property====> ", property); |
||||
this.showProperty = false; |
||||
this.currentHero = {}; |
||||
this.items[this.index].properties = property; |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
@ -0,0 +1,22 @@ |
||||
[ |
||||
{ |
||||
"name": "妖刀姬", |
||||
"avatar":"https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" |
||||
}, |
||||
{ |
||||
"name": "大狗", |
||||
"avatar":"https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" |
||||
}, |
||||
{ |
||||
"name": "青灯", |
||||
"avatar":"https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" |
||||
}, |
||||
{ |
||||
"name": "打火机", |
||||
"avatar":"https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" |
||||
}, |
||||
{ |
||||
"name": "和尚", |
||||
"avatar":"https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" |
||||
} |
||||
] |
||||
@ -0,0 +1,3 @@ |
||||
{ |
||||
"speed":[] |
||||
} |
||||
@ -0,0 +1,10 @@ |
||||
import { createApp } from 'vue' |
||||
import App from './App.vue' |
||||
|
||||
import ElementPlus from 'element-plus' |
||||
import 'element-plus/dist/index.css' |
||||
|
||||
const app = createApp(App) |
||||
|
||||
app.use(ElementPlus) |
||||
app.mount('#app') |
||||
@ -0,0 +1,16 @@ |
||||
import { fileURLToPath, URL } from 'node:url' |
||||
|
||||
import { defineConfig } from 'vite' |
||||
import vue from '@vitejs/plugin-vue' |
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({ |
||||
plugins: [ |
||||
vue(), |
||||
], |
||||
resolve: { |
||||
alias: { |
||||
'@': fileURLToPath(new URL('./src', import.meta.url)) |
||||
} |
||||
} |
||||
}) |
||||
Loading…
Reference in new issue