<template>
    <div id="select-color">
       <!-- :activeColor.sync="activeColor" :colorList="colorList"-->
      <select-color title="选取颜色" v-on:onChange="onChange" :activeColor.sync="activeColor" />

      <br/><br/><br/>
      颜色：<span :style="`display: inline-block; width: 40px; height: 40px; border: 1px solid #666; border-radius: 100%; background-color: ${activeColor};`"></span>
    </div>
</template>
<script lang='ts'>
import Vue from 'vue'
import { SelectColor } from '../../tunas'
export default Vue.extend({
  components: { SelectColor },
  data() {
    return {
      activeColor: '#fff',
      // colorList: '',
      colorList: ['#fff', '#00EAEA', '#027EFF', '#0023FF', '#7806F9', '#FF00FD', '#FF53C9', '#FF0180']
    }
  },
  created() {
    this.$nextTick(() => {
    })
  },
  methods: {
    onChange(color) {
      console.error('当前选中的Color：', color)
    }
  }
})
</script>
<style lang="stylus" scoped>
#select-color{
  }
</style>
