gallery-row

<style lang="stylus" scoped>  @import "../css/base/variables.styl"  .photo-checkbox    position: absolute;    clip: rect(0, 0, 0, 0);    pointer-events: none;  .checkbox    position absolute    right 3px    top 3px    width 16px    height 16px    border-radius 50%    border 1px solid #fff    z-index 3    color transparent    background-color rgba(0, 0, 0, .2)    text-align center    &.active      color red      background-color #fff      box-shadow 0 1px 1px rgba(0, 0, 0, .375)  .mask    width 100%    height 100%    position absolute    left 0    top 0    background-color rgba(white .2)    z-index -4  .mask-show    z-index 2</style><template>  <label v-if="url"         class="pic"         :style="picStyle"         @click="onPicClick()"  >    <!--<img v-lazy="col('IMG_URL', 'value')" />-->    <lazy-img :src="url" />    <template v-if="selectMode">      <input type="checkbox" class="photo-checkbox" v-model="checked">      <!--<div class="photo-selected" v-if="selectModel" :class="{text:selectedShow}">√</div>-->      <div class="checkbox" :class="{active:checked}">        <icon name="check"></icon>      </div>      <div class="mask" :class="{'mask-show':checked}"></div>    </template>  </label></template><script>  import colMixin from './mixins/col'  import photoMixin from './mixins/photo'  import bLazyMixin from './mixins/bLazy'  import _ from 'lodash'  export default{    mixins: [colMixin, photoMixin, bLazyMixin],    methods: {      onPicClick(url) {        if (this.selectMode) {          return        }        this.$emit('show-big-photo', this.url)      }    },    data(){      return {        url: this.col('IMG_URL', 'value'),        checked: false      }    },    watch: {      checked (checked) {//        當選中狀態發生變化//        從value數組中查找當前發生變化的圖片路徑        const index = this.value.indexOf(this.url)//        當數組中存在該路徑        const inSelectList = index !== -1//        當爲選中狀態時        if (checked) {//          將選中的圖片路徑存進數組中          this.value.push(this.url)        } else if (inSelectList) {//          當選中狀態爲false，但數組中存在該路徑，則刪除掉該路徑          this.value.splice(index, 1)        }      },      value(val) {        if (val.indexOf(this.url) !== -1) {          this.checked = true        } else {          this.checked = false        }        this.$emit('input', val)      }    },    props: {      // 選中的數據      value: Array,      // 選擇模式      selectMode: {        type: Boolean,        default: false,      }    }  }</script>