colexiu-project/src/views/muiscDetial/index.tsx

import { defineComponent, toRefs, reactive, onMounted, ref } from 'vue'
import classes from './index.module.less'
import { ElButton, ElOption, ElSelect } from 'element-plus'
import printIcon from './images/printIcon.png'
import colVideo from '@/components/col-video/index'
export default defineComponent({
  name: 'muiscDetial',
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  components:{
    colVideo
  },
  setup(props, conent) {
    const state = reactive({
      title: props.title,
      subjectId: '',
      subjectList:[]
    })
    return () => (
      <>
      <div class={classes.wall}></div>
        <div class={[classes.width1200, classes.musicWrap]}>
          <div class={classes.left}>
            <div class={classes.title}>
              <div class={classes.titleLeft}>
                <p>声部：</p>
                <ElSelect
                  class="w-full subjectChiose"
                  v-model={state.subjectId}
                  placeholder="请选择声部"
                >
                  {state.subjectList.map((item: any) => (
                    <ElOption key={item.id} value={item.id} label={item.name} />
                  ))}
                </ElSelect>
              </div>
              <div class={classes.titleRight}>
                <img src={printIcon} alt="" />
                <p>打印乐谱</p>
              </div>
            </div>
            <div class={classes.musicContent}></div>
            <colVideo src="" styleValue={{
              height:'68px',
              bacground:'#333'
            }} type={'audto'} settings={['captions', 'quality', 'speed', 'loop']} class={classes.audios}></colVideo>
          </div>
          <div class={classes.right}></div>
        </div>
      </>
    )
  }
})