vue-8 组件
import Vue from 'vue' //全局部引入 import ElementUI from 'element-ui' // //按需引入 import {Row,Button} from 'element-ui' import 'element-ui/lib/theme-chalk/index.css'; import App from './App.vue' import Global from './components/Global.vue' Vue.config.productionTip = false //注册Element UI Vue.use(ElementUI) // //按需注册 Vue.use(Row) Vue.use(Button) //全局组件注册,前面是组件名 Vue.component("Global",Global) new Vue({ render: h => h(App), }).$mount('#app')
<template> <div id="app"> <!--组件--> <span>-------------------------------------------------------------------------------------------------------</span><br /> <span>【父组件】获取的当前页面组件共{{parentItemCount}}条,每页{{parentPageSize}}条,当前页号{{parentPageIndex}}</span><br /> <span>-------------------------------------------------------------------------------------------------------</span> <pageDemo3 :pageSize="5" :itemCount="82" @demo3-event="myMethod" /> <Global /> //使用全局组件 <!--Element UI--> <element-uI-demo /> </div> </template> <script> import pageDemo3 from "./components/pageDemo3.vue"; import ElementUIDemo from './components/ElementUIDemo.vue' export default { name: 'App', data() { return { parentItemCount: 0, parentPageSize: 0, parentPageIndex: 0, test: 1 } }, components: { pageDemo3, ElementUIDemo }, methods: { myMethod(data) { this.parentItemCount = data.itemCount this.parentPageSize = data.pageSize this.parentPageIndex = data.currentPageIndex } } } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
<template> <div> <span> 共 {{itemCount}} 条 <select v-model="currentPageSize" @change="changePageSize"> <option v-for="item in pageSizes" :key="item" :value="item">{{ item }}条/页</option> </select> <!--【上一页】上一页标签及v-if逻辑--> <a href="javascript:void(0)" class="pageItem" v-if="currentPageIndex > 1" @click="goPage(currentPageIndex-1)"><</a> <span class="pageItem" v-if="currentPageIndex <= 1"><</span> <!--【分页数量】中间页号标签及v-for、v-if逻辑--> <span v-for="page in calPageCount" :key="page"> <span class="pageItem spanItem " v-if="page === currentPageIndex">{{page}}</span> <a href="javascript:void(0)" class="pageItem" v-if="page !== currentPageIndex" @click="goPage(page)" :ref="'lnk_' + page">{{ page }}</a> </span> <!--【下一页】下一页标签及v-if逻辑--> <a href="javascript:void(0)" class="pageItem" v-if="currentPageIndex < calPageCount" @click="toPage(currentPageIndex+1)">></a> <span class="pageItem" v-if="currentPageIndex >= calPageCount">></span>前往第 <input type="text" v-model.number="goToIndex" style="width: 30px" @change="goToPage" onfocus="this.select()"/>页 </span> </div> </template> <script> export default { name: "pageDemo3", props: { pageSize: Number, itemCount: Number }, data() { return { pageSizes: [5, 10, 15, 20], currentPageSize: 5, currentPageIndex: 1, goToIndex:null }; }, created() { this.currentPageSize = this.pageSize; }, computed: { //计算总页数据,计算属性 calPageCount() { return Math.ceil(this.itemCount / this.currentPageSize); } }, methods: { changePageSize() { this.currentPageIndex = 1; }, callback() { let callbackData = { itemCount: this.itemCount, pageSize: this.currentPageSize, currentPageIndex: this.currentPageIndex }; this.$emit("demo3-event", callbackData); }, goPage(num) { this.currentPageIndex = num; //回调父组件事件 this.callback(); this.goToIndex = null }, toPage(num) { this.currentPageIndex = num; //回调父组件事件 this.callback(); this.goToIndex = null }, goToPage(){ if (this.goToIndex < 1) { this.currentPageIndex = 1; this.goToIndex = 1 }else if (this.goToIndex > this.calPageCount) { this.currentPageIndex = this.calPageCount; this.goToIndex = this.calPageCount; }else{ this.currentPageIndex = this.goToIndex } //回调父组件事件 this.callback(); } } }; </script> <style> .pageItem { margin-right: 1px; padding: 5px 5px 5px 5px; } .spanItem { color: blue; } </style>
<template> <div id="global"> <span style="color:red; font-size:30px;">我是一个全局组件。</span> </div> </template> <script> export default { name:'Global' } </script>
<template> <div id="element-ui-demo"> <el-row> <el-button>默认按钮</el-button> <el-button type="primary">主要按钮</el-button> <el-button type="success">成功按钮</el-button> <el-button type="info">信息按钮</el-button> <el-button type="warning">警告按钮</el-button> <el-button type="danger">危险按钮</el-button> </el-row> <el-row> <el-button plain>朴素按钮</el-button> <el-button type="primary" plain>主要按钮</el-button> <el-button type="success" plain>成功按钮</el-button> <el-button type="info" plain>信息按钮</el-button> <el-button type="warning" plain>警告按钮</el-button> <el-button type="danger" plain>危险按钮</el-button> </el-row> </div> </template> <script> export default { name: "ElementUIDemo", data() { return {}; }, }; </script>
创作不易,转摘请标明出处。如果有意一起探讨测试相关技能可加博主QQ 771268289 博主微信:ding17121598
本文来自博客园,作者:怪圣卡杰,转载请注明原文链接:https://www.cnblogs.com/dwdw/p/16787697.html