element组件学习

vite.config.js

点击查看代码

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import ElementPlus from 'unplugin-element-plus/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
    //按需定制主题配置
    ElementPlus({
      useSource: true,
    }),
    AutoImport({
      resolvers: [ElementPlusResolver({ importStyle: 'sass' })],
    }),
    Components({
      resolvers: [ElementPlusResolver({ importStyle: 'sass' })],
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },

  css: {
    preprocessorOptions: {
      scss: {
        //自动导入定制化样式文件进行样式覆盖
        additionalData:
        '@use "@/assets/index.scss" as *;'
        ,
      }
    }
  },
})

index.scss主题色配置

点击查看代码

@forward "element-plus/theme-chalk/src/common/var.scss" with ($colors:(
  "primary": ("base": #0066bc),
  "success": ("base": #39b20b),
  "warning": ("base": #ffad00),
  "danger": ("base": #e52f2f),
  "info": ("base": #a847dc),
));

element组件学习

点击查看代码

<template>
  <div>
    <div style="margin: 20px">
      <!--   必须有v-model才能输入   -->
      <!--   disabled/readonly只显示文本，不可以输入   -->
      <el-input v-model="data.input" style="width: 240px" placeholder="请输入" :prefix-icon="Search"/> {{data.input}}
      <el-input style="width: 240px" :suffix-icon="Calendar"/>
      <!--   type="textarea" 变成多行文本   -->
      <el-input type="textarea" v-model="data.descr" style="width: 240px" placeholder="请输入一段描述"/>

    </div>

    <!--   select选择器   -->
    <div style="margin: 20px">
      <el-select
          v-model="data.value1"
          placeholder="我喜欢"
          size="large"
          style="width: 240px"
      >
        <el-option
            v-for="item in data.options1"
            :key="item"
            :label="item"
            :value="item"
        />
      </el-select> {{data.value1}}
    </div>
    <!--  clearable 清空  -->
    <!--  multiple  多选  -->
    <div style="margin: 20px">
      <el-select
          clearable
          multiple
          value-key="id"
          v-model="data.value2"
          placeholder="我喜欢"
          size="large"
          style="width: 240px"
      >
        <!--  key 唯一  -->
        <el-option
            v-for="item in data.options2"
            :key="item.id"
            :label="item.name"
            :value="item.name"
        />
      </el-select> {{data.value2}}
    </div>

    <!--   radio单选框   -->
    <!--   radio单选按钮组   -->
    <div style="margin: 20px;">
      <el-radio-group v-model="data.sex">
        <el-radio value="男">男</el-radio>
        <el-radio value="女">女</el-radio>
      </el-radio-group>

      <el-radio-group style="margin-left: 100px" v-model="data.tag" size="large">
        <el-radio-button label="我发布的内容" value="1" />
        <el-radio-button label="我点赞的内容" value="2" />
        <el-radio-button label="我收藏的内容" value="3" />
      </el-radio-group>
    </div>

    <!--   checkbox多选框   -->
    <div style="margin: 20px">
      <el-checkbox-group v-model="data.checkList">
        <el-checkbox v-for="item in data.options2" :key="item.id" :value="item.name" :label="item.name" />
      </el-checkbox-group>
      <span style="margin-left: 20px">{{ data.checkList }}</span>
    </div>

    <!--   imag图片   -->
    <div style="margin: 20px">
      <img src="@/assets/logo.svg" alt="" style="width: 100px">
      <el-image :src="img" style="width: 100px; margin-left: 100px" :preview-src-list="[img,'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg','https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg']"/>
    </div>

    <!--   Carousel走马灯   -->
    <div style="margin: 20px">
      <el-carousel height="400px" style="width: 550px">
        <el-carousel-item v-for="item in data.imgs" :key="item">
          <img style="width: 100%" :src="item" alt="">
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script setup>
import {reactive} from "vue";
import {Calendar, Search} from "@element-plus/icons-vue";
//image使用本地图片路径，先导入
import img from '@/assets/logo.svg';
import lun1 from '@/assets/1.jpg';
import lun2 from '@/assets/2.jpg';
import lun3 from '@/assets/3.jpg';
import lun4 from '@/assets/4.jpg';

const data = reactive({
  input: '呵呵',
  descr: '用于输入多行文本信息可缩放的输入框。 添加 type="textarea" 属性来将 input 元素转换为原生的 textarea 元素。用于输入多行文本信息可缩放的输入框。 添加 type="textarea" 属性来将 input 元素转换为原生的 textarea 元素。',
  value1: '',
  value2: '',
  options1: ['唱','跳','rap','篮球'],
  options2: [{id: 1,name: '唱'},{id: 2,name: '跳'},{id: 3,name: 'rap'},{id: 4,name: '篮球'}],
  sex: '',
  tag: '',
  checkList: [],
  imgs: [lun1,lun2,lun3,lun4],

})
</script>