element安装，以及相关操作，创建vue3组件

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
一、element安装
  • 地址：https://element-plus.gitee.io/zh-CN/guide/design.html
1、安装命令：
  • npm install element-plus —save

二、相关操作1、引入资源
  1. // main.ts
  2. import { createApp } from 'vue'
  3. import ElementPlus from 'element-plus'
  4. import 'element-plus/dist/index.css'
  5. import App from './App.vue'
  7. const app = createApp(App)
  9. app.use(ElementPlus)
  10. app.mount('#app')

2、按钮
  • 单个按钮：<el-button></el-button>
  1.   <el-row class="mb-4">
  2.     <el-button>Default</el-button>
  3.     <el-button type="primary">Primary</el-button>
  4.     <el-button type="success">Success</el-button>
  5.     <el-button type="info">Info</el-button>
  6.     <el-button type="warning">Warning</el-button>
  7.     <el-button type="danger">Danger</el-button>
  8.   </el-row>

  • 组按钮<el-button-group></el-button-group>
  1.     <el-button-group>
  2.       <el-button type="primary">Primary</el-button>
  3.       <el-button type="success">Success</el-button>
  4.       <el-button type="info">Info</el-button>
  5.     </el-button-group>

3、表格
  1. <template>
  2.     <el-table :data="tableData" stripe style="width: 100%">
  3.     <el-table-column prop="id" label="ID" width="180" />
  4.     <el-table-column prop="name" label="姓名" width="180" />
  5.     <el-table-column prop="age" label="年龄" />
  6.   </el-table>
  7. </template>
  9. <script>
  10. export default{
  11.   data(){
  12.     return {
  13.       ouyangke: "欧阳克",
  14.       tableData: [
  15.         {
  16.           id: '1',
  17.           name: 'Tom',
  18.           age: '38岁',
  19.         },
  20.         {
  21.           id: '2',
  22.           name: 'Tom',
  23.           age: '48岁',
  24.         },
  25.         {
  26.           id: '3',
  27.           name: 'Tom',
  28.           age: '18岁',
  29.         },
  30.         {
  31.           id: '4',
  32.           name: 'Tom',
  33.           age: '28岁',
  34.         },
  35.       ]
  36.     }
  37.   },
  38. }
  39. </script>

prop对应下标；label对应表格的标题；

4、分页
  • current-change：改变时触发
  1. <template>
  2.   <el-table :data="tableData" stripe style="width: 100%">
  3.     <el-table-column prop="id" label="ID" width="180" />
  4.     <el-table-column prop="name" label="姓名" width="180" />
  5.     <el-table-column prop="age" label="年龄" />
  6.   </el-table>
  7.   <el-pagination layout="prev, pager, next" :total="50" @current-change="fun()"/>
  8. </template>
  9. <script>
  10. export default{
  11.   data(){
  12.     return {
  13.       ouyangke: "欧阳克",
  14.       tableData: [
  15.         {
  16.           id: '1',
  17.           name: 'Tom',
  18.           age: '38岁',
  19.         },
  20.         {
  21.           id: '2',
  22.           name: 'Tom',
  23.           age: '48岁',
  24.         },
  25.         {
  26.           id: '3',
  27.           name: 'Tom',
  28.           age: '18岁',
  29.         },
  30.         {
  31.           id: '4',
  32.           name: 'Tom',
  33.           age: '28岁',
  34.         },
  35.       ]
  36.     }
  37.   },
  40.   methods : {
  41.     fun(){
  42.       alert('被点击了');
  43.       this.tableData = [
  44.         {
  45.           id: '5',
  46.           name: '小编1',
  47.           age: '38岁',
  48.         },
  49.         {
  50.           id: '6',
  51.           name: '小编2',
  52.           age: '48岁',
  53.         },
  54.         {
  55.           id: '7',
  56.           name: '小编3',
  57.           age: '18岁',
  58.         },
  59.         {
  60.           id: '8',
  61.           name: '小编4',
  62.           age: '28岁',
  63.         },
  64.       ]
  65.     }
  66.   },
  67. }
  69. </script>

5、input输入框
  • Event事件：input 在input值改变时触发：
  1. <template>
  2.   <el-input v-model="ouyangke" placeholder="Please inout" @input="fun()"/>
  3. </template>
  4. <script>
  5. export default{
  6.   methods : {
  7.     fun(){
  8.       console.log('打印input');
  9.       }
  10.     }
  11. }
  12. <script>

  • blur：input失去焦点
  1. <template>
  2.   <el-input v-model="ouyangke" placeholder="Please inout" @blur="fun()"/>
  3. </template>
  4. <script>
  5. export default{
  6.   methods : {
  7.     fun(){
  8.       console.log('打印input');
  9.       }
  10.     }
  11. }
  12. <script>

6、多选框
  1. <template>
  2.     <el-checkbox v-model="checked1" label="Option 1" size="large" />
  3.     <el-checkbox v-model="checked2" label="Option 2" size="large" />
  4. </template>
  5. <script>
  6. export default{
  7.   data(){
  8.     return {
  9.       checked1:true,
  10.       checked2:false,
  11.     }
  12.   }
  13. },
  14. </script>

7、流程控制
  • for
  1. <template>
  2.   <el-card class="box-card">
  3.     <template #header>
  4.       <div class="card-header">
  5.         <span>Card name</span>
  6.         <el-button class="button" text>Operation button</el-button>
  7.       </div>
  8.     </template>
  9.   <!-- v-for 是vue循环,循环数组 对象 json数据  -->
  10.   <!-- key 是唯一表示,如果没有,会报黄色错误 -->
  11.   <!-- : 是绑定属性,key是属性,里面的值是变量 -->
  12.   <div v-for="v in tableData" :key="o">
  13.     {{ 'List item' + v.id + v.name + v.age }}
  14.   </div>
  15.   </el-card>
  16. </template>
  17. <script>
  18. export default{
  19.   data(){
  20.     return {
  21.       checked1:true,
  22.       checked2:false,
  23.       ouyangke: "欧阳克",
  24.       tableData: [
  25.         {
  26.           id: '1',
  27.           name: 'Tom',
  28.           age: '38岁',
  29.         },
  30.         {
  31.           id: '2',
  32.           name: 'Tom',
  33.           age: '48岁',
  34.         },
  35.         {
  36.           id: '3',
  37.           name: 'Tom',
  38.           age: '18岁',
  39.         },
  40.         {
  41.           id: '4',
  42.           name: 'Tom',
  43.           age: '28岁',
  44.         },
  45.       ]
  46.     }
  47.   },
  48. }
  49. </script>

  • if else
  1.   <!-- foreach($arr as $k=>$v) 跟php是相反的 -->
  2.   <!-- 下标要写在v-for循环里 -->
  3.   <div v-for="(v,item,index) in tableData" :key="o">
  4.     <div v-if="v.status == 1">
  5.       {{ '下标:' + item + ',下标:' + index + ' ,ID:' + v.id + ' ,姓名:' + v.name + ' ,年龄:' + v.age }}
  6.     </div>
  7.     <div v-else="v.status == 0" style="color:red;">
  8.       {{ '下标:' + item + ',下标:' + index + ' ,ID:' + v.id + ' ,姓名:' + v.name + ' ,年龄:' + v.age }}
  9.     </div>
  10.   </div>

  • 循环变量名解释：
  1.   <div v-for="(item,index,key) in arr">
  2.       {{ item + ', ' + index + ',' + key }}
  3.   </div>

<!-- (item,index,key)循环里的3个变量名,是自定义的 --> <!-- item: 循环数据 index: 自定义下标 key: 默认下标 0 1 2 3 4 -->

8、展开下拉框
  1. <template>
  2.   <!-- 展开下拉框 -->
  3.   <select name="name" v-model="name">
  4.       <option value="">-- 请选择 --</option>
  5.       <option value="ouyangke">欧阳克</option>
  6.       <option value="zhutianpeng">朱天蓬</option>
  7.       <option value="miejueshitai">灭绝师太</option>
  8.       <option value="ximendaguanren">西门大官人</option>
  9.   </select>
  10. </template>
  11. <script>
  12. export default{
  13.   data(){
  14.     return {
  15.       name : "ouyangke",
  16.       }
  17.   },
  18. }
  19. </script>

数据的name值 = vlaue值，默认选择展示

三、创建vue3组件1、创建组件
  • a.路径：src/components/
  • b.创建组件文件：驼峰命名方式，OyDiv.vue
  • c.首页输入需要展示的内容
    1. <template>
    2. <div>欧阳克</div>
    3. <oy-div style="color:red;" size="2">欧阳组件</oy-div>
    4. <OyDiv style="color:red;" size="2">欧阳组件</OyDiv>
    5. </template>
  • d.引入组件文件
    1. import OyDiv from "./components/Oydiv.vue";
  • e.加载组件
    1. export default{
    2. // data:数据; methods:js计算属性等; 
    3. // components:组件; 使用组件,传值
    4. components:{
    5.   OyDiv
    6. },
    7. }
【感谢龙石为本站提供数据底座技术支撑http://www.longshidata.com/pages/government.html】
更多阅读