极客观点
研发管理
HarmonyOS
.net做移动端页面，使用vant组件多选下拉菜单，为什么会出现下面这个问题，直接复制vant官网的都没用
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SYZPZ2.aspx.cs" Inherits="QinStyle.AppWeb.phone.SYZPZ2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<title>“2023，我们这一年”</title>
<link rel="stylesheet" href="css/vant.css" type="text/css" />
<%-- <link rel="stylesheet" href="css/HLHJY2.css" type="text/css" />
<link rel="stylesheet" href="css/SYZPZ.css" type="text/css" />
<link rel="stylesheet" href="css/SYZPXQ2.css" type="text/css" />--%>
<%--<link href="css/SYZPZ.css" rel="stylesheet" />--%>
<script src="./js/vue.min.js"></script>
<script src="./js/vant.min.js"></script>
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="./js/api.js"></script>
<script src="./js/config.js"></script>
<%-- <script src="../../Static/JS/Form/enumDataSuppurt.js"></script>--%>
<script src="js/moment.min.js"></script>
<style>
.van-image-preview__index {
left: 0%;
/* bottom: 22%;*/
top: 80%;
}
.van-image__error, .van-image__img, .van-image__loading {
height: 80%;
}
.van-image-preview__image {
height: 80%;
}
</style>
</head>
<body class="ixBody">
<div id="app" v-cloak="">
<van-dropdown-menu>
<van-dropdown-item
ref="inlineOption"
title="分组"
multiple
:options="inlineOption"
@change="changeOption"
>
<van-button
plain
border-color="#e2e2e2"
class="margin-top20 width50"
@click="onCancel"
>次按钮</van-button
>
<van-button type="primary" class="margin-top20 width50" @click="onConfirm"
>主按钮</van-button
>
</van-dropdown-item>
<van-dropdown-item
ref="inlineOption1"
title="不分组"
multiple
:options="inlineOption1"
@change="changeOption1"
>
<van-button
type="primary"
plain
block
border-color="#e2e2e2"
class="margin-top20"
@click="onConfirm1"
>主按钮</van-button
>
</van-dropdown-item>
</van-dropdown-menu>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
created() { },
mounted: function () {
},
data() {
return {
inlineOption: [
{
title: '标题',
options: [
{ text: '内容' },
{ text: '内容' },
{ text: '内容' },
{ text: '内容' }
]
},
{
title: '标题1',
options: [
{ text: '内容1' },
{ text: '内容1' },
{ text: '内容1' },
{ text: '内容1' }
]
}
],
inlineOption1: [
{ text: '内容' },
{ text: '内容' },
{ text: '内容' },
{ text: '内容' },
{ text: '内容' },
{ text: '内容' },
{ text: '内容' },
{ text: '内容' },
{ text: '内容' },
{ text: '内容' },
{ text: '内容' },
{ text: '内容' }
]
}
},
methods: {
changeOption(options) {
this.inlineOption = options;
this.inlineOption.map(item => {
console.log(item.options.filter(obj => obj.checked));
});
},
changeOption1(options) {
this.inlineOption1 = options;
console.log(this.inlineOption1.filter(obj => obj.checked));
},
onCancel() {
this.$refs.inlineOption.reset();
this.$refs.inlineOption.toggle();
},
onConfirm() {
this.$refs.inlineOption.toggle();
},
onConfirm1() {
this.$refs.inlineOption1.toggle();
}
}
});
</script>
</html>
{ text: '内容1' }你这内容都一样。试试不一样的内容呢？