收藏
便签
笔记
消息
创作
登录
应无所住,而生其心
博主信息
排名
3
文章
317
粉丝
22
评论
14
文章类别
最新文章
最新评价
关于我们
ICP备案 ：渝ICP备18016597号-1
网站信息：2018-2025TNBLOG.NET
技术交流：群号656732739
联系我们：contact@tnblog.net
公网安备：50010702506256
欢迎加群
欢迎加群交流技术
原

vue,vue3组件封装，vue组件模板。简单组件模板。基础组件模板。vue引入自定义的组件。vue使用自定义的组件。插槽slot使用。vue封装格子效果，一块一块的grid布局效果

5263人阅读 2020/9/16 10:19 总访问：5416065 评论：0 收藏：0 手机
分类: 前端

vue封装组件的简单模板

贴一个简单模板方便自定义组件的时候直接复制

  1. <template>
  2.     <div class="app-container">
  3.         组件模板
  4.     </div>
  5. </template>
  7. <script>
  8. export default {
  9.     // 组件名字
  10.     name: 'VideoItem',
  11.     // 组件参数
  12.     props: {
  13.       percentage: {
  14.         type: Number,
  15.         default: 0
  16.       },
  17.       title: {
  18.        type: String,
  19.        default: ''
  20.       },
  21.     },
  22.     data() {
  23.         return {
  24.             courseID: '',
  25.             labId: '',
  26.             chapter: {},
  27.         }
  28.     },
  29.     mounted() {
  30.         this.initPic()
  31.     },
  32.     // 组件方法
  33.     methods: {
  34.         initPic() {
  35.         }
  36.     }
  37. }
  38. </script>
  39. <style scoped="scoped" lang="scss">
  41. </style>

vue3简单的页面基础模板

  1. <template>
  2.     <div class="app-container">
  3.         <el-card>
  4.             <div>
  5.                 {{ state.title }}
  6.             </div>
  7.             <div>
  8.                 <el-select v-model="state.schoolID" class="select-level" size="default" placeholder="请选择校区" clearable>
  9.                     <el-option v-for="item in schoolList" :key="item.id" :value="item.id" :label="item.name" />
  10.                 </el-select>
  11.             </div>
  12.         </el-card>
  13.     </div>
  14. </template>
  16. <script setup lang="ts" name="tasks">
  18. import { defineAsyncComponent, reactive, onMounted, toRefs, ref } from 'vue';
  20. const state = reactive({
  21.     title: '更新',
  22.     schoolID:null,
  23.     schoolList: [
  24.         {
  25.             id: 1,
  26.             name: "小"
  27.         },
  28.         {
  29.             id: 2,
  30.             name: "大"
  31.         }
  32.     ],
  33. })
  35. // 这样暴露出来后页面可以直接使用schoolList,而不需要state.schoolList
  36. const { schoolList } = toRefs(state)
  39. onMounted(() => {
  40. })
  42. </script>
  44. <style scoped="scoped" lang="scss">
  45. .app-container {
  46.     padding: 15px
  47. }
  48. </style>

vue引入自定义的组件：

引入组件，@表示src的路径，也可以使用..等相对路径路径来引入

  1. import FeedBack from '@/pages/feedback/feedback.vue'
  2. export default {
  3.   components: {
  4.     FeedBack
  5.   }
  6. }

页面上使用即可

  1. <FeedBack/>

给组件里边传递参数这样就行

  1. <FeedBack title="学习活跃度" style="height:100%" />

完整一点的代码

  1. <template>
  2.   <div class="lab-course">
  3.     <!--引入自定义组件-->
  4.     <FeedBack/>
  5.   </div>
  6. </template>
  8. <script>
  9. //@表示src的路径，也可以使用..等相对路径路径来引入
  10. import FeedBack from '@/pages/feedback/feedback.vue'
  11. export default {
  12.   components: {
  13.     FeedBack
  14.   },
  15.   data() {
  16.     return {
  17.       courseID: ''
  18.     }
  19.   },
  20.   mounted() {
  21.   },
  22.   methods: {
  23.   }
  24. }
  25. </script>
  27. <style  lang="scss">
  28. </style>

封装一个标题高亮格子的组件

效果如下，这样一块一块的格子效果，内容是做的插槽：

代码：

  1. <template>
  2.     <div>
  3.         <div class="zuxia_grid">
  4.             <div class="title_com">
  5.                 <div class="title_com_tag">
  7.                 </div>
  8.                 <div class="title_com_text">
  9.                     {{title}}
  10.                 </div>
  11.             </div>
  12.             <div class="content">
  13.               <slot name="content"></slot>
  14.             </div>
  15.         </div>
  16.     </div>
  17.   </template>
  19.   <script>
  21.   export default {
  22.     // 组件名字
  23.     name: 'ZuxiaGrid',
  24.     // 组件参数
  25.     props: {
  26.       percentage: {
  27.         type: Number,
  28.         default: 0
  29.       },
  30.       title: {
  31.        type: String,
  32.        default: '默认标题'
  33.       },
  34.     },
  35.     data() {
  36.       return {
  37.       }
  38.     },
  39.     components: {
  40.     },
  41.     mounted() {
  42.     },
  43.     beforeDestroy () {
  44.     },
  45.     methods: {
  46.     }
  47.   }
  48.   </script>
  51. <style lang="scss" scoped>
  53.  .zuxia_grid{
  55.     height: 100%;
  56.     width: 100%;
  57.     background-image: url("../../assets/img/boxbox4.png");
  59.     border: 1px solid #0E466C;
  60.     border-radius: 4px;
  62.     .title_com{
  63.       display: flex;
  64.       padding-top: 22px;
  65.       margin-left: 9px;
  67.       .title_com_tag
  68.       {
  69.         width: 8px;
  70.         height: 19px;
  71.         background: #23FFFC;
  72.         margin-left:10px;
  73.         margin-top: -1px;
  74.       }
  76.       .title_com_text
  77.       {
  78.         margin-left: 10px;
  79.         font-size: 22px;
  80.         // 字体设置成白色会更亮一点
  81.         color:#fff;
  82.         // text-shadow:0px -5px 5px #B4D3F6;
  83.         text-shadow: 0 0 10px #DBE5F0, 0 0 20px #DBE5F0, 0 0 30px #DBE5F0, 0 0 40px #B4D3F6, 0 0 70px #B4D3F6, 0 0 80px #B4D3F6, 0 0 100px #B4D3F6, 0 0 150px #B4D3F6;
  84.         //从白色到B4D3F6这个颜色看着会更亮一点，因为两个颜色间隔更多
  85.         // text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #B4D3F6, 0 0 70px #B4D3F6, 0 0 80px #B4D3F6, 0 0 100px #B4D3F6, 0 0 150px #B4D3F6;        
  86.       }
  87.     }
  89.     .content
  90.     {
  91.       margin-left: 16px;
  92.       margin-right: 16px;
  93.     }
  94.  }
  96. </style>

使用

先引用组件

  1. import ZuxiaGrid from '@/views/component/zuxia_grid.vue'
  3. components: {
  4.     ZuxiaGrid
  5. },

然后在需要的地方引用即可,这里引用了三次

  1. <div class="middle_com">
  2.     <div class="middle_top"> 
  3.     <ZuxiaGrid title="学习活跃度" style="height:100%">
  4.       <template #content>
  5.           11
  6.       </template>
  7.     </ZuxiaGrid>
  8.   </div>
  9.     <div class="middle_bottom"> 
  10.     <ZuxiaGrid title="学习趋势图" style="height:100%">
  11.       <template #content>
  12.           22
  13.       </template>
  14.     </ZuxiaGrid>
  15.   </div>
  16. </div>
  17. <div class="right_com">
  18.     <ZuxiaGrid title="分析趋势" style="height:100%">
  19.       <template #content>
  20.           33
  21.       </template>
  22.     </ZuxiaGrid>
  23. </div>

封装的组件更新一下增加了事件的传递，以及右边的三个小点小菜单等

  1. <template>
  2.   <div>
  3.     <div class="zuxia_grid">
  4.       <div class="title_com">
  5.         <div class="title_com_tag">
  7.         </div>
  8.         <div class="title_com_text">
  9.           {{ title }}
  10.         </div>
  11.         <!-- 右边的三个小点小菜单 -->
  12.         <div class="title_com_menu" v-if="ShowtitleMenu" @click="$emit('menuclick', '可以传递需要的参数回去')">
  13.           <div class="title_com_menu_dot"></div>
  14.           <div class="title_com_menu_dot"></div>
  15.           <div class="title_com_menu_dot"></div>
  16.         </div>
  17.       </div>
  18.       <div class="content">
  19.         <slot name="content"></slot>
  20.       </div>
  21.     </div>
  22.   </div>
  23. </template>
  25. <script>
  27. export default {
  28.   // 组件名字
  29.   name: 'ZuxiaGrid',
  30.   // 组件参数
  31.   props: {
  32.     percentage: {
  33.       type: Number,
  34.       default: 0
  35.     },
  36.     title: {
  37.       type: String,
  38.       default: '默认标题'
  39.     },
  40.     ShowtitleMenu:
  41.     {
  42.       type: Boolean,
  43.       default: false
  44.     }
  45.   },
  46.   data() {
  47.     return {
  48.     }
  49.   },
  50.   components: {
  51.   },
  52.   mounted() {
  53.   },
  54.   beforeDestroy() {
  55.   },
  56.   methods: {
  57.   }
  58. }
  59. </script>
  62. <style lang="scss" scoped>
  63. .zuxia_grid {
  65.   height: 100%;
  66.   width: 100%;
  67.   background-image: url("../../assets/img/boxbox4.png");
  69.   border: 1px solid #0E466C;
  70.   border-radius: 4px;
  72.   .title_com {
  73.     display: flex;
  74.     padding-top: 22px;
  75.     margin-left: 9px;
  76.     position: relative;
  78.     .title_com_tag {
  79.       width: 8px;
  80.       height: 19px;
  81.       background: #23FFFC;
  82.       margin-left: 10px;
  83.       margin-top: -1px;
  84.     }
  86.     .title_com_text {
  87.       margin-left: 10px;
  88.       font-size: 22px;
  89.       // 字体设置成白色会更亮一点
  90.       color: #fff;
  91.       // text-shadow: 0 0 100px #B4D3F6, 0 0 60px #B4D3F6, 0 0 70px #B4D3F6
  92.       // 然后把数值改大一点就更暗了，数值越大越暗,可以根据需要调整
  93.       text-shadow: 0 0 40px #B4D3F6, 0 0 80px #B4D3F6, 0 0 90px #B4D3F6 // 在把前面的一个删除了，后面的几个删除了，看着就更暗了，感觉就要舒服一些了
  94.         //text-shadow: 0 0 30px #B4D3F6, 0 0 70px #B4D3F6, 0 0 80px #B4D3F6
  95.         //把前面几个删除了看着就要暗一些了也
  96.         //text-shadow: 0 0 30px #DBE5F0, 0 0 40px #B4D3F6, 0 0 70px #B4D3F6, 0 0 80px #B4D3F6, 0 0 100px #B4D3F6, 0 0 150px #B4D3F6;
  97.         // 这个太亮了后面要调暗一点
  98.         //text-shadow: 0 0 10px #DBE5F0, 0 0 20px #DBE5F0, 0 0 30px #DBE5F0, 0 0 40px #B4D3F6, 0 0 70px #B4D3F6, 0 0 80px #B4D3F6, 0 0 100px #B4D3F6, 0 0 150px #B4D3F6;
  99.         //从白色到B4D3F6这个颜色看着会更亮一点，因为两个颜色间隔更多
  100.         // text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #B4D3F6, 0 0 70px #B4D3F6, 0 0 80px #B4D3F6, 0 0 100px #B4D3F6, 0 0 150px #B4D3F6;        
  101.     }
  103.     .title_com_menu {
  104.       display: flex;
  105.       position: absolute;
  106.       right: 16px;
  107.       margin-top: 5px;
  108.       cursor: pointer;
  110.       .title_com_menu_dot {
  111.         width: 5px;
  112.         height: 5px;
  113.         border-radius: 50%;
  114.         background-color: #fff;
  115.         margin-left: 5px;
  116.       }
  117.     }
  118.   }
  120.   .content {
  121.     margin-left: 16px;
  122.     margin-right: 16px;
  123.   }
  124. }
  125. </style>

引用组件的时候可以使用组件里边封装的事件处理menuclick

  1. <ZuxiaGrid style="height:100%" title="教学动态" :ShowtitleMenu="true" @menuclick="menuclick()">

其他参考

https://www.tnblog.net/aojiancc2/article/details/4250


欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739。有需要软件开发，或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价