24.12.02 Element

2401_879103682024-12-03 6:04
import { createApp } from 'vue'
// 引入elementPlus js库 css库
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//中文语言包
import zhCn from 'element-plus/es/locale/lang/zh-cn'
//图标库
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

import App from './App.vue'
//router单独的配置文件
import router from './router'

//typescript js语法做了类型限制
//对象要先设定类型 使用变量 要标记类型


let myVue = createApp(App)
//vue插件 与vue高度集成
//启动router插件
myVue.use(router)
//启用elementPlus插件
myVue.use(ElementPlus, {
    locale: zhCn,
  })
//把所有图标导入vue全局组件库
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    myVue.component(key, component)
}

myVue.mount('#app')

2elementPlus常用组件

2.2基础组件 按钮

按钮主要是样式 比较简单

<template>
    <!-- 基础组件  -->
    <el-button :loading-icon="Eleme" :loading="loadStauts" >Default</el-button>

    <el-button type="primary" disabled>Primary</el-button>

    <el-button type="success">Success</el-button>

    <el-button type="info" :disabled="btnStatus">{{ username }}</el-button>

    <el-button type="warning" link>Warning</el-button>

    <el-button type="danger" text>Danger</el-button>

    <el-button type="primary" :icon="Edit" circle />
    <el-button type="success" :icon="Check" circle />

    <el-icon><Check /></el-icon>

    <el-button type="primary">
      Upl<el-icon class="el-icon--right"><Upload /></el-icon>oad
    </el-button>

    <el-button-group class="ml-4">
    <el-button type="primary" :icon="Edit" />
    <el-button type="primary" :icon="Share" />
    <el-button type="primary" :icon="Delete" />
  </el-button-group>

  <el-button color="#19a" >Default</el-button>

  
</template>

<script setup>
import {ref,reactive,onMounted} from 'vue'
import {get,post} from '@/myaxios'
import router from '@/router'
import {
  Check,
  Edit,
  Upload,
  Share,
  Delete
} from '@element-plus/icons-vue'

/*
ui库中的自定义标签 基础用法与原生标签/属性一致
                  如果不支持 没有效果


*/ 
const username = ref('jack');
const btnStatus = ref(false)
const loadStauts = ref(false)

</script>

<style scoped>

</style>
2.3边框 颜色等其他基础组件
<template>
  <div class="radius" style="width: 100px;height: 100px; 
  border-radius: var(--el-border-radius-round);
  box-shadow: var(--el-box-shadow-dark);
  background-color: rgb(179, 224.5, 156.5);" >
  
  <el-icon><Lock /></el-icon>

  <el-link href="http://www.baidu.com" type="success">success</el-link>

  <el-text class="mx-1" type="success">Success</el-text>

  </div>

  
</template>

<script setup>
import {ref,reactive,onMounted} from 'vue'
import {get,post} from '@/myaxios'
import router from '@/router'
import {
  Check,
  Edit,
  Upload,
  Share,
  Delete
} from '@element-plus/icons-vue'

/*
ui库中的自定义标签 基础用法与原生标签/属性一致
                  如果不支持 没有效果


*/ 


</script>

<style scoped>

.radius {
  height: 40px;
  width: 70%;
  border: 1px solid var(--el-border-color);
  border-radius: 0;
  margin-top: 20px;
}
</style>
2.4布局组件
<template>
  <!-- 每行默认24分栏 
       如果页面需要分布局时  使用 el-row 搭配el-col使用 

       可以不足24 但是不能超


 vue 响应式变量 (自动变化)


  -->
   <el-row :gutter="20">//会有留白
    <el-col :span="8">11111</el-col>

    <el-col :span="8">11111</el-col>

    <el-col :span="8">
      <el-row >
        <el-col :span="12">11111</el-col>

        <el-col :span="12">11111</el-col>

      </el-row>

    </el-col>

  </el-row>

  <el-row :gutter="20">
    <el-col :offset="2" :span="10">11111</el-col>

    <el-col :span="10">11111</el-col>

  </el-row>

  <el-row justify="space-around">
    <el-col :span="10">11111</el-col>

    <el-col :span="10">11111</el-col>

  </el-row>

<!-- 在不同设备上 显示效果会改变
     

     套壳APP 只能访问特定网站 浏览器功能按钮全砍掉
     pc         html css js
     ios        objcetC
     Android    java 

-->
<el-row >
    <el-col :xs="12" :sm="4" :md="20" :lg="12" >11111</el-col>

    <el-col :xs="12" :sm="20" :md="4" :lg="12" >11111</el-col>

  </el-row>


</template>

<script setup>
import {ref,reactive,onMounted} from 'vue'
import {get,post} from '@/myaxios'
import router from '@/router'
import {
  Check,
  Edit,
  Upload,
  Share,
  Delete
} from '@element-plus/icons-vue'

/*
ui库中的自定义标签 基础用法与原生标签/属性一致
                  如果不支持 没有效果


*/ 


</script>

<style scoped>

.radius {
  height: 40px;
  width: 70%;
  border: 1px solid var(--el-border-color);
  border-radius: 0;
  margin-top: 20px;
}
</style>
2.5输入框
<template>
<!-- 
插入图标有两种写法
-->
    <el-input v-model="input" style="width: 240px"   type="textarea"  clearable placeholder="Please input" :suffix-icon="Calendar" />
    {{ input }}
    <el-input v-model="input2" style="width: 240px" type="password" show-password placeholder="Please input">
        <template #prefix>
            aaaa<el-icon class="el-input__icon"><calendar /></el-icon>

        </template>

    </el-input>

    <el-input v-model="input2" style="width: 240px" type="password" show-password placeholder="Please input">
        <template #prepend>
            aaaa<el-icon class="el-input__icon"><calendar /></el-icon>

        </template>

    </el-input>

<br>
    <el-input
    v-model="text"
    style="width: 240px"
    maxlength="10"
    placeholder="Please input"
    show-word-limit
    type="text"
  />
</template>

<script setup>
import {ref,reactive,onMounted} from 'vue'
import {get,post} from '@/myaxios'
import router from '@/router'
import {
    Calendar,
} from '@element-plus/icons-vue'

const input = ref('')
const input2 = ref('')
const text = ref('')

</script>

<style scoped>

</style>
2.6数字输入框
<template>
<!-- 
    官网文档是ts代码 
    去掉ts中类型部分 可以成js
    
 -->
 <el-input-number v-model="num" :min="1" :max="10" @change="handleChange" />


</template>

<script setup>
import {ref,reactive,onMounted} from 'vue'
import {get,post} from '@/myaxios'
import router from '@/router'
import {
    Calendar,
} from '@element-plus/icons-vue'



const num = ref(1)



const handleChange = (value) => {
  console.log(value)
}


</script>

<style scoped>

</style>
2.7单选多选开关
<template>

  <el-radio-group v-model="radVal">
      <el-radio value="1" size="large">Option 1</el-radio>

      <el-radio value="2" size="large">Option 2</el-radio>

    </el-radio-group>

    {{ radVal }}

    <el-radio-group v-model="radVal2" size="large">
      <el-radio-button value="1" >New York</el-radio-button>

      <el-radio-button value="2" >Washington</el-radio-button>

      <el-radio-button value="3" >Los Angeles</el-radio-button>

      <el-radio-button value="4" >Chicago</el-radio-button>

    </el-radio-group>

    {{ radVal2 }}

    <hr>
    <el-checkbox-group v-model="checkList">
      <el-checkbox :value="1" >A</el-checkbox>

      <el-checkbox :value="2" >B</el-checkbox>

      <el-checkbox :value="3" >C</el-checkbox>

    </el-checkbox-group>

    {{ checkList }}
    <hr>
    <el-switch
      v-model="switchVal"
      style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
      active-text="是"
      inactive-text="否"
      inline-prompt
    />
    {{ switchVal }}
</template>

<script setup>
import {ref,reactive,onMounted} from 'vue'
import {get,post} from '@/myaxios'
import router from '@/router'
import {
    Calendar,
} from '@element-plus/icons-vue'

const radVal = ref('1')
const radVal2 = ref('1')
// 注意数据类型 如果类型不匹配 无法选中 
const checkList = ref([1,'3'])//不是:value要用字符串类型

const switchVal = ref(true)

</script>

<style scoped>

</style>
2.8下拉列表
<template>
 <el-select
      v-model="selVal"
      placeholder="请选择"
      size="large"
      style="width: 240px"
      clearable
      multiple //可多选、与clearable不可叠加
    >
    <el-option value="001">北京</el-option>

    <el-option value="002" disabled>上海</el-option>

    <el-option value="003">深圳</el-option>

    </el-select>

    {{ selVal }}

<hr/>
<!--  自动根据层级遍历  (有父子关系的数据)
     遍历时的key有默认值   
     label 显示内容 value 选项值 children 子数据

-->
<el-cascader v-model="casVal" 
:options="options.optionList" 
:props="props"/>
{{ casVal }}




</template>

<script setup>
import {ref,reactive,onMounted} from 'vue'
import {get,post} from '@/myaxios'
import router from '@/router'
import areaData from '@/myjs/myData.js'


import {
    Calendar,
} from '@element-plus/icons-vue'

const selVal = ref('')
const casVal = ref('')

const props = {
    'label':'name',
    'children':'subArea',
    'value':'code'
}

const options = reactive({optionList:[]})


onMounted(()=>{
  console.log(areaData);
  options.optionList = areaData
})

</script>

<style scoped>

</style>
2.9日期选择

有日期选择 时间选择

<template>

<el-date-picker
        v-model="dataStr"
        type="datetime"
        placeholder="Select date and time"
        value-format="YYYY-MM-DD HH:mm:ss"
      />
 {{ dataStr }}
</template>

<script setup>
import {ref,reactive,onMounted} from 'vue'
import {get,post} from '@/myaxios'
import router from '@/router'
import areaData from '@/myjs/myData.js'

const dataStr = ref('')


</script>

<style scoped>

</style>
2.10table组件

table是数据显示的主要组件 每个页面都要使用

主要作用是显示后端返回的动态数据

<template>
<!-- 单选
 <el-table highlight-current-row 
stripe border 
height="250" 
:data="tableData.dataList" 
style="width: 100%"
@current-change="handleCurrentChange"
>
-->
<el-table 
ref="tableRef"  // 使用ref可用拿到对应的table对象
stripe border 
height="250" 
:data="tableData.dataList" 
style="width: 100%"

>
    <el-table-column type="selection" width="55" />
    <el-table-column fixed  prop="date" label="日期" width="180" />
    <el-table-column prop="name" label="名称" width="180" />
    <el-table-column prop="status" label="状态" width="180" >
      <!--  table遍历数据插槽的基础上  
            通过template标签 可自定义table中的内容  
            自定义每列的内容 美化table
      -->
      <template #default="xxx">
        <el-button type="success" v-if="xxx.row.status ==1" >正常</el-button>

        <el-button type="warning" v-else-if="xxx.row.status ==2" >请假</el-button>

      </template>

    </el-table-column>

    <el-table-column prop="address" label="Address" width="280"/>
    <el-table-column prop="address" label="Address" width="280"/>
    <el-table-column prop="address" label="Address" width="280"/>
    <el-table-column fixed="right" label="操作" width="280">
      <el-button type="warning"  >修改</el-button>

      <el-button type="danger"  >删除</el-button>

    </el-table-column>

  </el-table>

  <el-button @click="myTest">测试</el-button>

</template>

<script setup>
import {ref,reactive,onMounted} from 'vue'
import {get,post} from '@/myaxios'
import router from '@/router'
import areaData from '@/myjs/myData.js'

let currentRow = {};

//文件编译 时会把相同名称的html元素绑定到一起
const tableRef = ref()


const tableData = reactive({dataList:[]})



const myTest = ()=>{
    console.log(tableRef.value);//获得的是全部的

    console.log(tableRef.value.getSelectionRows());//获得的是选中的
    
}

const handleCurrentChange = (val)=>{
    console.log(val);
    currentRow = val;
}

onMounted(()=>{

  tableData.dataList =  [
  {
    date: '2016-05-03',
    name: 'Tom',
    status:1,
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    status:1,
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    status:1,
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    status:2,
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    status:1,
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]


})

</script>

<style scoped>

</style>

注意:

table是自动遍历的 所以显示每列数据时 通常需要自定义显示的列

需要搭配table的数据插槽使用 主要作用美化界面 提高交互效果

    <el-table-column prop="status" label="状态" width="180" >
      <!--  table遍历数据插槽的基础上  
            通过template标签 可自定义table中的内容  
            自定义每列的内容 美化table
      -->
      <template #default="xxx">
        <el-button type="success" v-if="xxx.row.status ==1" >正常</el-button>

        <el-button type="warning" v-else-if="xxx.row.status ==2" >请假</el-button>

      </template>

    </el-table-column>
2.11分页组件
  <el-pagination
      v-model:current-page="pageInfo.pageData.page"
      v-model:page-size="pageInfo.pageData.pageSize"
      :total="pageInfo.pageData.total"
      :page-sizes="[10, 20, 30]" //依次为10页显示方式  总共50页 共有5页
      layout="total, sizes, prev, pager, next, jumper"
       @current-change="paginationCurrentChange"
       @size-change="paginationSizeChange"
     

    />

// const total = ref(77);
// const page = ref(2);
// const pageSize = ref(10);
const pageInfo = reactive({pageData:{
  page:1,
  pageSize:10,
  total:55,
}})

/*
经常与table的分页功能搭配使用 
用户点击按钮时 重新查询table数据 响应之后 给table赋值刷新数据
*/ 
const paginationCurrentChange = (val)=>{
  console.log(val);
  
}
const paginationSizeChange = (val)=>{
  console.log(val);
}

注意:分页组件通常与table组合使用

2.12tree组件
// tree自动遍历 有默认读取的key
// 可以通过自定义key的对应表 指定解析的数据

//注意:自动的遍历如果没有显示数据 有可能是key每对上(有没有文字的选项)
//对应key的部分多注意 仔细 多复制

//部分代码key没有完全对应
<template>
  <el-tree
    style="max-width: 600px"
    :data="data"
    :props="defaultProps"
  />
</template>

<script setup>
import {ref,reactive,onMounted} from 'vue'
import {get,post} from '@/myaxios'
import router from '@/router'
import areaData from '@/myjs/myData.js'
// tree自动遍历 有默认读取的key
// 可以通过自定义key的对应表 指定解析的数据

//注意:自动的遍历如果没有显示数据 有可能是key每对上(有没有文字的选项)
//对应key的部分多注意 仔细 多复制
const defaultProps = {
  children: 'subData',
  label: 'name',
}

const data = [
  {
    name: 'Level one 1',
    subData: [
      {
        label: 'Level two 1-1',
        children: [
          {
            label: 'Level three 1-1-1',
          },
        ],
      },
    ],
  },
  {
    label: 'Level one 2',
    children: [
      {
        label: 'Level two 2-1',
        children: [
          {
            label: 'Level three 2-1-1',
          },
        ],
      },
      {
        label: 'Level two 2-2',
        children: [
          {
            label: 'Level three 2-2-1',
          },
        ],
      },
    ],
  },
  {
    label: 'Level one 3',
    children: [
      {
        label: 'Level two 3-1',
        children: [
          {
            label: 'Level three 3-1-1',
          },
        ],
      },
      {
        label: 'Level two 3-2',
        children: [
          {
            label: 'Level three 3-2-1',
          },
        ],
      },
    ],
  },
]


</script>

<style scoped>

</style>
2.13菜单组件

菜单一般做动态菜单 由后端加载数据 在前端展示

<template>
  <e-row>
    <el-col :span="6" >
      <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        default-active="2" //与active-text-color="#ffd04b"形成高亮
        text-color="#fff"

      >
<!-- 
    系统管理
        人员管理
        菜单管理
    财务管理
        人员工资
        财务报表          

-->
        <el-sub-menu v-for="menu in menuList.menuData" :index="menu.mid+''">
          <template #title>
            <el-icon><component :is="menu.icon"></component></el-icon>

            <span>{{ menu.mname }}</span>

          </template>

          <el-menu-item v-for="subm in menu.subMen" :index="subm.mid+''">
            <el-icon><component :is="subm.icon"></component></el-icon>

            <span>{{ subm.mname }}</span>

          </el-menu-item>

        </el-sub-menu>


        <!-- <el-sub-menu index="1">
          <template #title>
            <el-icon><Check /></el-icon>

            <span>系统管理</span>

          </template>

          <el-menu-item index="11">
            <el-icon><Edit /></el-icon>

            <span>人员管理</span>

          </el-menu-item>

          <el-menu-item index="12">
            <el-icon><Edit /></el-icon>

            <span>菜单管理</span>

          </el-menu-item>

        </el-sub-menu>

        <el-sub-menu index="2">
          <template #title>
            <el-icon><Share /></el-icon>

            <span>财务管理</span>

          </template>

          <el-menu-item index="21">
            <el-icon><Edit /></el-icon>

            <span>人员工资</span>

          </el-menu-item>

          <el-menu-item index="22">
            <el-icon><Edit /></el-icon>

            <span>财务报表</span>

          </el-menu-item>

        </el-sub-menu> -->

        <!-- <el-sub-menu index="1">
          <template #title>
            <el-icon><location /></el-icon>

            <span>Navigator One</span>

          </template>

          <el-menu-item-group title="Group One">
            <el-menu-item index="1-1">item one</el-menu-item>

            <el-menu-item index="1-2">item two</el-menu-item>

          </el-menu-item-group>

          <el-menu-item-group title="Group Two">
            <el-menu-item index="1-3">item three</el-menu-item>

          </el-menu-item-group>

          <el-sub-menu index="1-4">
            <template #title>item four</template>

            <el-menu-item index="1-4-1">item one</el-menu-item>

          </el-sub-menu>

        </el-sub-menu>

        <el-menu-item index="2">
          <el-icon><icon-menu /></el-icon>

          <span>Navigator Two</span>

        </el-menu-item>

        <el-menu-item index="3" disabled>
          <el-icon><document /></el-icon>

          <span>Navigator Three</span>

        </el-menu-item>

        <el-menu-item index="4">
          <el-icon><setting /></el-icon>

          <span>Navigator Four</span>

        </el-menu-item> -->
      </el-menu>

    </el-col>

  </e-row>

  <!-- 动态标签 <component :is="'input'"></component> -->
  
</template>

<script setup>
import {ref,reactive,onMounted} from 'vue'
import {get,post} from '@/myaxios'
import router from '@/router'
import areaData from '@/myjs/myData.js'
import {
  Check,
  Edit,
  Upload,
  Share,
  Delete
} from '@element-plus/icons-vue'


const menuList = reactive({menuData:[]})


onMounted(()=>{
  //后端取值
  menuList.menuData = [
    {mid:1,mname:"系统管理",icon:'Upload',subMen:[
                    {mid:11,mname:"用户管理",icon:'Delete'},
                    {mid:12,mname:"菜单管理",icon:'Edit'}
                  ]},
    {mid:2,mname:"财务管理",icon:'Share',subMen:[
                    {mid:21,mname:"财务1",icon:'Edit'},
                    {mid:22,mname:"财务2",icon:'Edit'}
                  ]}
  ]
})

</script>

<style scoped>

</style>
2.14反馈组件
<template>
  <el-button :plain="true" @click="myopen">Success</el-button>

  <el-button plain @click="open">Click to open the Message Box</el-button>

  <el-button plain @click="dialogVisible = true">//dialogVisible(刚开始时不显示) = true（点击显示）
    Click to open the Dialog
  </el-button>

  <el-button plain @click="drawerVisible = true">
    Click to open the Drawer 
  </el-button>

<!-- 多功能组合到同一个界面时 使用对话框 -->
  <el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="500"
  >
    <span>可以放表格 表单 或其他界面</span>

  </el-dialog>

  <el-drawer
    v-model="drawerVisible"
    title="I am the title"
    :direction="'btt'"
  >
    <span>这是抽屉</span>

  </el-drawer>

  

</template>

<script setup>
import {ref,reactive,onMounted} from 'vue'
import {get,post} from '@/myaxios'
import router from '@/router'
/*
ElMessage     显示用
ElMessageBox  交互用
*/

import { ElMessage, ElMessageBox } from 'element-plus'

  const myopen = ()=>{
    ElMessage.error('恭喜你操作成功')
  }

  const open = () => {
  ElMessageBox.confirm(
    '确认要继续me?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '不确定',
      type: 'error',
    }
  )
    .then(() => {
      console.log("执行");
      
    })
    .catch(() => {
      console.log("点了取消");
    })
}


const dialogVisible = ref(false)//表示刚开始时不显示
const drawerVisible = ref(false)
</script>

<style scoped>

</style>
相关推荐
祈澈菇凉2 小时前
Webpack的基本功能有哪些
前端·javascript·vue.js
小纯洁w2 小时前
Webpack 的 require.context 和 Vite 的 import.meta.glob 的详细介绍和使用
前端·webpack·node.js
想睡好3 小时前
css文本属性
前端·css
qianmoQ3 小时前
第三章：组件开发实战 - 第五节 - Tailwind CSS 响应式导航栏实现
前端·css
zhoupenghui1683 小时前
golang时间相关函数总结
服务器·前端·golang·time
快下雨了L3 小时前
C++面试笔记(持续更新...)
笔记
White graces3 小时前
正则表达式效验邮箱格式, 手机号格式, 密码长度
前端·spring boot·spring·正则表达式·java-ee·maven·intellij-idea
庸俗今天不摸鱼3 小时前
Canvas进阶-4、边界检测（流光，鼠标拖尾）
开发语言·前端·javascript·计算机外设
bubusa~>_<4 小时前
解决npm install 出现error,比如:ERR_SSL_CIPHER_OPERATION_FAILED
前端·npm·node.js
柃歌4 小时前
【UCB CS 61B SP24】Lecture 7 - Lists 4: Arrays and Lists学习笔记
java·数据结构·笔记·学习·算法
热门推荐
01太炸裂了！清华大学deepseek从入门到精通使用手册又出第三版了，《普通人如何抓住DeepSeek红利》（无套路，直接下载）02如何在WPS和Word/Excel中直接使用DeepSeek功能03DeepSeek本地部署详细指南04DeepSeek各版本说明与优缺点分析05本地部署DeepSeek教程（Mac版本）06DeepSeek r1本地安装全指南07本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程08DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具09在Windows下安装Ollama并体验DeepSeek r1大模型10本地部署DeepSeek后的调用与删除全攻略