vue前端展示【1】

简介: vue前端展示【1】

代码:

<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
  >
    <el-menu-item index="1">首页</el-menu-item>
    <el-menu-item index="2">发现</el-menu-item>
    <el-menu-item index="3">音乐库</el-menu-item>
  </el-menu>
  <div id="singer">
    <div id="singer_info">
      <img id="singer_pic" src="../../public/demo.png" alt="a">
      <div id="singer_content">
        <p id="singer_name" style="font-size: 30px; font-weight: 600;">{{ singer_name }}</p>
        <p id="singer_introduction" style="font-size: 15px; font-weight: 200;">{{ singer_introduction }}</p>
        <div id="player_button" style="display: flex; position: absolute; bottom: 5px; left: 0px;">
          <el-button id="play" type="primary" :icon="play_icon_map[play_icon_name]" @click="click_play">{{ play_icon_name }}</el-button>
          <el-button id="like" :type="like_type" :icon="Star" @click="click_like"></el-button>
          <el-button id="more" type="default" :icon="MoreFilled" disabled></el-button>
        </div>
      </div>
    </div>
    <div id="singer_list" style="margin-top: 50px;"> 
      <el-table 
      ref="multipleTableRef"
      :data="tableData" 
      tableLayout="fixed" 
      style="width: 80%"
      @row-dblclick="(row, column, event)=>console.log(row)"
      >
      <el-table-column prop="id" label="id" width=50px align="left"/>
      <el-table-column prop="singer" label="singer" align="left"/>
      <el-table-column prop="song" label="song" align="right"/>
      </el-table>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { VideoPlay, VideoPause, Star, MoreFilled } from '@element-plus/icons-vue'
  import { ref } from 'vue'
  const play_icon_map = {
    '播放':VideoPlay,
    '暂停':VideoPause,
  }
  const play_icon_name = ref('播放')
  function click_play(){
    if (play_icon_name.value == '播放'){
      play_icon_name.value = '暂停'
    }else{
      play_icon_name.value = '播放'
    }
  }
  const like_type = ref('info')
  function click_like(){
    if (like_type.value == 'info'){
      like_type.value = 'danger'
    }else{
      like_type.value = 'info'
    }
  }
  const tableData = [
    {
      id: 1,
      singer: 'Tom',
      song: 'No. 189, Grove St, Los Angeles',
    },
    {
      id: 2,
      singer: 'Aom',
      song: 'No. 189, Grove St, Los Angeles',
    },
    {
      id: 3,
      singer: 'Rom',
      song: 'No. 189, Grove St, Los Angeles',
    },
    {
      id: 4,
      singer: 'Wom',
      song: 'No. 189, Grove St, Los Angeles',
    },
  ]
  const activeIndex = ref('1')
  const handleSelect = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
  }
  const singer_name = ref('一颗狼星')
  const singer_introduction = ref('简介:许篮心(一颗狼星),生于 2001年2月16日,中国内地女歌手,国风音乐人,独立制作人。代表作:《无人区玫瑰》《月落的声音》《海市蜃楼》《红马(女版)》《紫》等。毕业于上海戏剧学院戏曲音乐专业,6岁学习钢琴,11岁考入中国戏曲学院附中京剧音乐系学习月琴等乐器,14岁自学作曲、编曲等课程。擅长编曲、作曲、作词、乐器。其演唱非常有个人特色,演唱歌曲在短视频平台传播广泛,是各个短视频平台国风BGM引用度极高的歌手。2020年在短视频平台上发布翻唱视频,因独特的编曲风格和个人嗓音特色,走进观众视野。2021年发布单曲《红马(女版)》;同年发布单曲《紫》;2022年1月发布单曲《海市蜃楼(女版)》; 2022年发布歌曲《月落的声音》及同名作品傈僳语版;2023年1月翻唱《精卫》;同年2月发布单曲《白云喝了人间酒》;同月发布原创单曲《无人区玫瑰》;6月发布单曲《她与蝶》;11月发布原创单曲《宋词之外》。')
  singer_introduction.value = singer_introduction.value.length > 380 ? (singer_introduction.value.slice(0, 380) + '...') : (singer_introduction.value)
</script>
<style>
  .el-menu {  
    justify-content: center;  
  }
  div#singer_info {
    margin-top: 20px;
    margin-left: 100px;
    margin-right: 100px;
    display: flex;
    margin-bottom: 20px;
  }
  div#singer_content{
    position: relative;  
    margin-left: 100px;
  }
  img#singer_pic {
    margin-top: 15px;
    width: 300px;
    height: 300px;
    border-radius: 20px;
    box-shadow: 10px 10px 5px 0px rgba(195, 190, 190, 0.75);
  }
  div#singer_list {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  el-table {
    display: flex;  
    justify-content: center;
    align-items: center;
  }
</style>


目录
相关文章
|
1月前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】React与Vue:前端框架的巅峰对决与选择策略
|
1月前
|
前端开发 JavaScript 数据管理
React与Vue:两大前端框架的较量与选择策略
【10月更文挑战第23天】React与Vue:两大前端框架的较量与选择策略
|
2月前
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
|
2月前
|
前端开发 JavaScript 安全
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
125 4
|
1月前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】 React与Vue:前端框架的巅峰对决与选择策略
|
2月前
|
前端开发 JavaScript API
2025年前端框架是该选vue还是react?有了大模型-例如通义灵码辅助编码,就不用纠结了!vue用的多选react,react用的多选vue
本文比较了Vue和React两大前端框架,从状态管理、数据流、依赖注入、组件管理等方面进行了详细对比。当前版本和下载量数据显示React更为流行,但Vue在国内用户量增长迅速。Vue 3通过组合式API提供了更灵活的状态管理和组件逻辑复用,适合中小型项目;React则更适合大型项目和复杂交互逻辑。文章还给出了选型建议,强调了多框架学习的重要性,认为技术问题已不再是选型的关键,熟悉各框架的最佳实践更为重要。
|
2月前
|
JSON 前端开发 JavaScript
Vue微前端新探:iframe优雅升级,扬长避短,重获新生
Vue微前端新探:iframe优雅升级,扬长避短,重获新生
119 0
|
2月前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
167 0
|
2月前
|
JavaScript 前端开发 应用服务中间件
Vue开发中,在实现单页面应用(SPA)前端路由时的hash模式和history模式的区别及详细介绍
Vue开发中,在实现单页面应用(SPA)前端路由时的hash模式和history模式的区别及详细介绍
32 0
|
2月前
|
JavaScript 前端开发
前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信
前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信