先展示一下成果,整体是要的这个效果
第一步在src/views/components下新建文件 circle.vue
<template>
<div class="home">
<div class="control-c">
<div class="control-left">
<div class="cross-c">
<div class="cross-item" @click="turnArround('up')">
<div data-v-edfc5b8b="" class="arr arr-1"></div>
</div>
<div class="cross-item" @click="turnArround('right')">
<div data-v-edfc5b8b="" class="arr arr-2"></div>
</div>
<div class="cross-item" @click="turnArround('left')">
<div data-v-edfc5b8b="" class="arr arr-3"></div>
</div>
<div class="cross-item" @click="turnArround('down')">
<div data-v-edfc5b8b="" class="arr arr-4"></div>
</div>
</div>
<div class="center-btn"></div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
components: {},
data() {
return {
fileList: []
}
},
created() {
},
methods: {
turnArround(i) {
//操作代码
}
}
}
</script>
<style lang="scss" scoped>
.control-c {
width: 102px;
height: 102px;
border-radius: 50%;
position: relative;
overflow: hidden;
background: linear-gradient(180deg, #2f2f30 0%, #1f1f1f 100%);
// border: solid 2px #0a0a0a;
.control-left{
width: 102px;
height: 102px;
border-radius: 50%;
position: relative;
overflow: hidden;
background: linear-gradient(180deg,#2f2f30 0%,#1f1f1f 100%);
border: solid 2px #0a0a0a;
.cross-c{
width: 102px;
height: 102px;
display: flex;
flex-wrap: wrap;
transform: rotate(45deg);
position: absolute;
left: 50%;
top: 50%;
margin-left: -51px;
margin-top: -51px;
.cross-item{
width: 51px;
height: 51px;
cursor: pointer;
position: relative;
border: 1px solid black;
.arr{
width: 0;
height: 0;
border: solid 4px transparent;
border-bottom-color: #fff;
position: absolute;
top: 50%;
left: 50%;
}
.arr-1{
margin-top: -7px;
margin-left: -7px;
transform: rotate(-45deg);
}
.arr-2 {
margin-top: -8px;
margin-left: -4px;
transform: rotate(45deg);
}
.arr-3 {
margin-top: -3px;
margin-left: -7px;
transform: rotate(-135deg);
}
.arr-4 {
margin-top: -3px;
margin-left: -1px;
transform: rotate(135deg);
}
}
}
.center-btn{
position: absolute;
top: 50%;
left: 50%;
margin-top: -14px;
margin-left: -14px;
border-radius: 24px;
width: 28px;
height: 28px;
border: solid 2px #0a0a0a;
background: #0a0a0a;
display: flex;
justify-content: center;
align-items: center;
}
}
}
</style>
第二步直接引用注册
<template>
<div class="org">
<Acircle/>
</div>
</template>
import Acircle from '你的路径'
export default {
components:{Acircle},
}