项目中使用了ElementUI的穿梭框，但由于穿梭框在dialog中选择完成并点击确定后，业务页面只留下一个按钮，用户无法确定是否选择成功，所以设计了一个提示input，给用户以安全感
选择完成后三种状态对比
image.png
相比较下，有提示input的方式更能提高用户的使用体验
三种形式的比较
代码如下
<head>
<meta charset="UTF-8">
<title></title>
<link href="https://cdn.bootcss.com/element-ui/2.4.0/theme-chalk/index.css" rel="stylesheet">
</head>
<body>
<div id="app">
<div style="margin: 55px;width: 20%;">
<el-button @click="dialogVisible = true">选择事项</el-button>
</div>
<div style="margin: 55px;width: 20%;">
<el-input placeholder="请选择事项" :disabled="true" v-model="val">
<template slot="append">
<el-button @click="dialogVisible = true">选择事项</el-button>
</template>
</el-input>
</div>
<div style="margin: 55px;width: 20%;">
<el-input placeholder="请选择事项" :disabled="true" v-model="value2">
<template slot="append">
<el-button @click="dialogVisible = true">选择事项</el-button>
</template>
</el-input>
</div>
<template>
<el-dialog title="提示" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
<template>
<el-transfer v-model="value1" :data="data" ></el-transfer>
</template>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="valLen()">确 定</el-button>
</span>
</el-dialog>
</template>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.4.0/index.js"></script>
<script>
var vm = new Vue({
el: "#app",
data() {
const generateData = _ => {
const data = [];
for (let i = 1; i <= 10; i++) {
data.push({
key: i,
label: `备选项 ${ i }`,
disabled: i % 4 === 0
});
}
return data;
};
return {
data: generateData(),
value1: [],
input4: '',
dialogVisible: false,
val:[],
value2:'已选择0事项'
};
},
methods: {
handleClose: function() {
this.dialogVisible = false;
},
valLen:function(){
this.val = [];
this.dialogVisible = false;
for (let var1 in this.value1) {
let var2 = this.data[var1].key
this.val.push(this.data[var2].label);
}
this.value2 = '已选择' + this.value1.length + '项';
}
}
});
</script>
</body>
网友评论