vue3按钮组件
1
悬赏园豆：50
[待解决问题]
有么有vue3大神，帮我看看这个代码的问题在哪里，找了半天没有发现问题在哪里：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>开关组件</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<script>
const switchComponent={
//定义外部属性
props:["switchStyle","borderColor","backgroundColor","color"],
data(){
return{
isOpen:false,
left:'0px'
}
},
//通过计算属性来设置样式
computed:{
cssStyleBG:{
get(){
if(this.switchStyle == 'mini'){
return`
position: relative;
border-color: ${this.borderColor};
border-width: 2px;
border-style: solid;
width: 55px;
height: 30px;
border-radius: 30px;
background-color: ${this.isOpen ? this.backgroundColor:'white'}
`
}else{
return`
position: relative;
border-color: ${this.borderColor};
border-width: 2px;
border-style: solid;
width: 55px;
height: 30px;
border-radius: 100px;
background-color: ${this.isOpen ? this.backgroundColor:'white'}
`
}
}
},
cssStyleBtn:{
get(){
if(this.switchStyle == 'mini'){
return`
position: absolute;
width: 30px;
height: 30px;
left: ${this.left};
border-radius: 50%;
backgournd-color:${this.color};
`
}else{
return`
position: absolute;
width: 30px;
height: 30px;
left: ${this.left};
border-radius: 8px;
backgournd-color:${this.color};
`
}
}
}
},
methods:{
click(){
this.isOpen = !this.isOpen;
this.left = this.isOpen? '25px' : '0px'
this.$emit('switchChange',this.isOpen)
}
},
template:`<div :style="cssStyleBG" @click="click">
<div :style="cssStyleBtn"></div>
</div>`
}
</script>
<script>
const App = Vue.createApp({
data(){
return{
state1:"关",
state2:"开"
}
},
methods:{
change1(isOpen){
this.state1 = isOpen? "开":"关";
},
change2(isOpen){
this.state2 = isOpen? "开":"关";
}
}
})
App.component("my-switch",switchComponent);
App.mount("#Application");
</script>
<div id="Application">
<my-switch @switch-change="change1" switch-style="mini" background-color="green" border-color="green" color="blue"></my-switch>
<div>开关状态：{{state1}}</div>
</div>
</body>
</html>
所有回答(3)
1
一来就是<html>?
这样会有很多麻烦的。
我这边开发vue，都是写 .vue 文件、写组件啥的：三天入门，一周熟练。
既然是 vue 开发，还是用 选项式、组合式 + node.js 的方式吧，直接引入 vue的 js 问题，问题多多。
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> // not good
好的，谢谢指点
1
将<div id="Application">移到<script>标签之前
谢谢指点
0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>开关组件</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<script>
const switchComponent = {
//定义外部属性
props: ["switchStyle", "borderColor", "backgroundColor", "color"],
data() {
return {
isOpen: false,
left: "0px",
};
},
//通过计算属性来设置样式
computed: {
cssStyleBG: {
get() {
if (this.switchStyle == "mini") {
return `
position: relative;
border-color: ${this.borderColor};
border-width: 2px;
border-style: solid;
width: 55px;
height: 30px;
border-radius: 30px;
background-color: ${
this.isOpen ? this.backgroundColor : "white"
}
`;
} else {
return `
position: relative;
border-color: ${this.borderColor};
border-width: 2px;
border-style: solid;
width: 55px;
height: 30px;
border-radius: 100px;
background-color: ${
this.isOpen ? this.backgroundColor : "white"
}
`;
}
},
},
cssStyleBtn: {
get() {
if (this.switchStyle == "mini") {
return `
position: absolute;
width: 30px;
height: 30px;
left: ${this.left};
border-radius: 50%;
background-color:${this.color};
`;
} else {
return `
position: absolute;
width: 30px;
height: 30px;
left: ${this.left};
border-radius: 8px;
background-color:${this.color};
`;
}
},
},
},
methods: {
click() {
this.isOpen = !this.isOpen;
this.left = this.isOpen ? "25px" : "0px";
this.$emit("switchChange", this.isOpen);
},
},
template: `<div :style="cssStyleBG" @click="click">
<div :style="cssStyleBtn"></div>
</div>`,
};
</script>
<div id="Application">
<my-switch
@switch-change="change1"
switch-style="mini"
background-color="green"
border-color="green"
color="blue"></my-switch>
<div>开关状态：{{state1}}</div>
</div>
<script>
const App = Vue.createApp({
data() {
return {
state1: "关",
state2: "开",
};
},
methods: {
change1(isOpen) {
this.state1 = isOpen ? "开" : "关";
},
change2(isOpen) {
this.state2 = isOpen ? "开" : "关";
},
},
});
App.component("my-switch", switchComponent);
App.mount("#Application");
</script>
</body>
</html>