vue自定義控件

---

<!--彈窗多選控件-->
<template>
  <cell
    style="min-height:3em"
    primary="content"
    value-align="left"
    :title="title"
    is-link
    @click.native="handleCellClick"
    :disabled="disabled"
  >
    <p class="cellText">{{checked_list|arrToString|keysToValuesConverter(options)}}</p>
    <div v-transfer-dom>
      <popup v-model="isPopVisible" :popup-style="{zIndex: 505,'border-top':'1px solid #E1E1E1','max-height':'80%'}">
        <div>
          <checker
            v-model="checked_list"
            @on-change="selectedChanged"
            type="checkbox"
            class="popupChecker"
            default-item-class="checker-item"
            selected-item-class="checker-item-selected"
          >
            <checker-item v-for="item in options" :key="item.key" :value="item.key">{{item.value}}</checker-item>
          </checker>
        </div>
      </popup>
    </div>
  </cell>
</template>

<script>
const COMPONENT_NAME = "PopupChecker";
import { Cell, Popup, Checker, CheckerItem } from "vux";
export default {
  name: COMPONENT_NAME,
  components: { Cell, Popup, Checker, CheckerItem },
  props: {
    value: {//對應v-model
      type: Array,
      default: []
    },
    options: {
      type: Array,
      default: []
    },
    title: {
      type: String,
      default: null
    },
    disabled: {
      type: Boolean,
      default: false
    },
    isPopShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      checked_list: [],
      isPopVisible: false
    };
  },
  watch: {
    value(val) {
      this.checked_list = val;
    },
    isPopShow(val) {
      this.isPopVisible = val;
    },
    isPopVisible(val) {
      this.$emit("update:isPopShow", val); //事件實現雙向綁定
    }
  },
  methods: {
    handleCellClick() {
      if (!this.disabled) {
        this.isPopVisible = true;
      }
    },
    selectedChanged() {
      this.$emit("input", this.checked_list);//事件實現雙向綁定
    }
  },
  filters: {
    arrToString(checked_list) {
      if (checked_list != null) {
        return checked_list.join(",");
      } else {
        return "";
      }
    }
  }
};
</script>
 <style lang="less" scoped>
.cellText {
  width: 100%;
  height: auto;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
}
.popupChecker {
  padding: 0.5em;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  > * {
    flex: auto;
    margin: 0.5em 1em;
    text-align: center;
  }
}
.checker-item {
  background-color: #ddd;
  color: #222;
  font-size: 14px;
  padding: 5px 10px;
  margin-right: 10px;
  line-height: 18px;
  border-radius: 15px;
}
.checker-item-selected {
  background-color: #ff3b3b;
  color: #fff;
}
</style>