xt_pad/src/pages/main/dialog/subMenu/newCheckBoxSubMenu.vue

<template>
  <div v-if="show" class="Dialog">
    <div class="DialogTit">
      <div class="back" @click="cancle()"><span class="iconfont" >&#xe720; </span>返回</div>
      <h1 class="name">{{propsForm.title}}</h1>
      <span  @click="comfirm" class="success">  </span>
    </div>
    <div  class="optionsBox">
      <div class="list">
        <ul>
          <li  @click="itemClick(-2)"  :key="-2" value="-2" >请选择</li>
          <li  @click="itemClick(item.id)"  v-for="item in propsForm.optionList" :key="item.id" value="item" :class="propsForm.selectId == item.id? 'tick':'' ">{{item.name}}</li>
        </ul>
      </div>
    </div>
  </div>
</template>


<script>

  export default {
    name: "newCheckBoxSubMenu",
    created() {},
    data() {
      return {
        result: [],
        id: 0,
        selectName: ""
      };
    },
    props: {
      propsForm: {
        type: Object
      },
      show: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      cancle: function() {
        this.$emit("menu-cancle");
      },
      comfirm: function() {
        this.$emit("menu-comfirm", this.getValue());
      },
      getValue: function() {
        let form = {};
        if (this.propsForm.isMultiple == 2) {
          form["type"] = this.propsForm.type;
          form["result"] = this.propsForm.result;
          // form["click_ref"] = this.propsForm.click_ref
        } else {
          form["type"] = this.propsForm.type;
          form["selectId"] = this.propsForm.selectId;
          // form["click_ref"] = this.propsForm.click_ref
        }
        return form;
      },
      itemClick: function(id) {
        if(id == -2){
          this.$emit("menu-empty", this.getValue());
        }
        this.propsForm.selectId = id;
        this.$emit("menu-comfirm", this.getValue());
      }
    },
    watch: {
      visibility(val) {
        //初始化数据操作
      }
    }
  };

</script>

<style style="stylesheet/scss" lang="scss" scoped>
  .optionsBox {
  background: #fff;
  max-height: 10.6rem;
  min-height: 5rem;
  overflow-y: scroll;
  ul {
  li {
  height: 1.1rem;
  line-height: 1.1rem;
  border-bottom: 1px #e5e5e5 solid;
  padding: 0 0.38rem;
  font-size: 0.36rem;
  color:$title-color;
  }
  .tick {
  position: relative;
  &::before {
  content: "";
  display: inline-block;
  border: 2px solid $main-color;
  border-top-width: 0;
  border-right-width: 0;
  width: 0.3rem;
  height: 0.15rem;
  -webkit-transform: rotate(-50deg);
  position: absolute;
  top: 0.38rem;
  right: 0.44rem;
  }
  }
  }
  }
  .CheckBox {
  background: #fff;
  max-height: 6.8rem;
  min-height: 5rem;
  overflow-y: scroll;

  ul {
  li {
  line-height: 1rem;
  }
  }
  }
</style>