xixixunplayer Type同步类型选择组件

vue yekong

el-select

/**
* xixixunplayer Type
* @description 节目类型选择
* @tutorial https://www.wanjunshijie.com/note/vue/3000.html
*
* @property {String}      type       类型
* @example
<type :type.sync="type"></type>
*/
<template>
  <div>
    <el-select @change="getType" :value="type" placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>

<script>

export default {
  name: 'type',
  props: {
    type: {
      type: String,
      default () {
        return ''
      }
    }
  },
  data () {
    return {
      options: [{
        value: 'Video',
        label: '视频'
      }, {
        value: 'Image',
        label: '图片'
      }, {
        value: 'AnalogClock',
        label: '模拟时钟'
      }, {
        value: 'Countdown',
        label: '倒计时'
      }, {
        value: 'SingleText',
        label: '单行文本'
      }, {
        value: 'MultiText',
        label: '多行文本'
      }, {
        value: 'Sensor',
        label: '传感器数据'
      }, {
        value: 'Flash',
        label: 'Flash'
      }, {
        value: 'Weather',
        label: '天气预报'
      }, {
        value: 'WebURL',
        label: 'web页面'
      }]
    }
  },
  methods: {
    getType (e) {
      this.$emit('update:type', e)
    }
  }
}
</script>

喜欢