提交 7484a09b 编写于 作者: KK's avatar KK

组件逻辑调整&格式化

上级 dc9eb9fb
.van-dropdown-menu__bar {
box-shadow: none;
}
.van-ellipsis {
padding-right: 15px;
}
.van-dropdown-menu__title::after {
right: 6px;
}
.dropdown-box {
display: flex;
flex-wrap: wrap;
padding: 15px 0;
.dropdown-item {
width: 50%;
display: flex;
padding: 8px 12px;
.dropdown-item-icon {
padding: 0 5px;
position: absolute;
}
.dropdown-item-text {
margin-left: 35px;
}
}
}
.dropdown-btn {
width: 50%;
}
.van-dropdown-item__content {
border-radius: 0 0 15px 15px;
}
<template>
<van-dropdown-menu :class="showTitle === title?'':'dropdown-menu-ative'" class="ibiz-dropdown-menu">
<van-dropdown-item :title="showTitle" ref="item" >
<van-dropdown-item get-container="#app" :lazy-render="false" :title="showTitle" ref="item" >
<div class="dropdown-box">
<div v-for="(item,index) in items" :key="index" class="dropdown-item" @click="itemClick(item)">
<div v-show="selectItem == item" class="dropdown-item-icon"><van-icon name="success" /></div>
......@@ -14,14 +14,7 @@
</template>
<script lang="ts">
import {
Vue,
Component,
Prop,
Provide,
Emit,
Watch
} from "vue-property-decorator";
import { Vue, Component, Prop, Provide, Emit, Watch } from "vue-property-decorator";
@Component({
components: {},
......@@ -44,7 +37,7 @@ export default class AppVanSelect extends Vue {
* 数据集
*
* @type {any}
* @memberof AppVanMenu
* @memberof AppVanSelect
*/
@Prop() public items?: any;
......@@ -52,7 +45,7 @@ export default class AppVanSelect extends Vue {
* 搜索名
*
* @type {any}
* @memberof AppVanMenu
* @memberof AppVanSelect
*/
@Prop() public name!: string;
......@@ -60,7 +53,7 @@ export default class AppVanSelect extends Vue {
* 名称
*
* @type {any}
* @memberof AppVanMenu
* @memberof AppVanSelect
*/
@Prop() public title?: any;
......@@ -68,114 +61,82 @@ export default class AppVanSelect extends Vue {
* 展示信息
*
* @type {any}
* @memberof AppVanMenu
* @memberof AppVanSelect
*/
public showTitle :any = "";
public showTitle: any = "";
/**
* 当前选中数据
*
* @type {any}
* @memberof AppVanSelect
*/
public selectItem: any = {};
/**
* 重置按钮
*
* @type {string}
* @memberof AppVanMenu
* @memberof AppVanSelect
*/
public onReset(){
public onReset() {
this.selectItem = {};
this.showTitle = this.title;
this.closeDropdown();
this.$emit('onConfirm',{[this.name]:this.selectItem.value})
this.$emit('onConfirm', { [this.name]: this.selectItem.value })
}
/**
* 当前选中数据
*
* @type {any}
* @memberof AppVanMenu
*/
public selectItem: any ={};
/**
* 数据点击事件
*
* @type {any}
* @memberof AppVanMenu
* @memberof AppVanSelect
*/
public itemClick(item:any){
public itemClick(item: any) {
this.selectItem = item;
}
/**
* 生命周期
*
* @memberof AppVanMenu
*/
created(){
this.showTitle = this.title ;
}
/**
* 收起数据
*
* @type {any}
* @memberof AppVanMenu
* @memberof AppVanSelect
*/
public closeDropdown() {
let dropdown: any =this.$refs.item;
if(dropdown.toggle && dropdown.toggle instanceof Function){
let dropdown: any = this.$refs.item;
if (dropdown.toggle && dropdown.toggle instanceof Function) {
dropdown.toggle();
}
}
/**
* 提交事件
*
* @type {any}
* @memberof AppVanMenu
* @memberof AppVanSelect
*/
public onConfirm() {
if(this.selectItem.label){
if (this.selectItem.label) {
this.showTitle = this.selectItem.label;
}
this.closeDropdown();
this.$emit('onConfirm',{[this.name]:this.selectItem.value})
this.$emit('onConfirm', { [this.name]: this.selectItem.value })
}
/**
* 生命周期
*
* @memberof AppVanSelect
*/
created() {
this.showTitle = this.title;
}
}
</script>
<style lang="less">
.ibiz-dropdown-menu {
min-width: 100px;
max-width: 100px;
height: 30px;
.van-ellipsis {
padding-right: 15px;
}
.van-dropdown-menu__title::after {
right: 6px;
}
.dropdown-box {
display: flex;
flex-wrap: wrap;
padding: 15px 0;
.dropdown-item {
width: 50%;
display: flex;
padding: 8px 12px;
.dropdown-item-icon {
padding: 0 5px;
position: absolute;
}
.dropdown-item-text {
margin-left: 35px;
}
}
}
.dropdown-btn {
width: 50%;
}
.van-dropdown-item__content {
border-radius: 0 0 15px 15px;
}
.dropdown-menu-ative {
}
}
@import "./app-van-select.less";
</style>
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册