写在前面:昨天学习了部分elementPlus元素,今天的首要目标是将剩下的九个常用组件全部学完并掌握,剩下的时间初步学习一些后端消息👾
- 输入框
<script setup>
import { ref } from 'vue'
const name = ref('')
const password = ref('')
const text = ref('')
const selected = ref('')
</script>
<template>
<div>
<!-- clearable 可一键清空 -->
<h3>输入框</h3>
<el-input v-model='name' clearable placeholder='Enter your name'/>
<h3>密码框</h3>
<el-input v-model='password' show-password placeholder='Enter your password'/>
<h3>文本域</h3>
<el-input type='textarea' v-model='text' placeholder='Enter your text'/>
<h3>输入内容长度限制 输入框</h3>
<el-input v-model='name' clearable placeholder='Enter your name' maxlength='10' show-word-limit/>
<h3>前置内容 输入框</h3>
<el-input v-model='name' clearable placeholder='Enter your name'>
<template #prepend>http://</template>
</el-input>
<h3>后置内容 输入框</h3>
<el-input v-model='name' clearable placeholder='Enter your name'>
<template #append>.com</template>
</el-input>
<h3>前置后置搜索框</h3>
<el-input clearable placeholder='Enter your name'>
<template #prepend>
<el-select v-model='selected' placeholder='请选择' style="width: 100px">
<el-option label='Option1' value='1'/>
<el-option label='Option2' value='2'/>
</el-select>
</template>
<template #append>
<el-button>
<el-icon><Search/></el-icon>
</el-button>
</template>
</el-input>
</div>
</template>
- 单选框、复选框
<script setup>
import { ref } from 'vue'
const radio = ref('3')
const radio2 = ref('b')
const checked = ref([])
const change = (val) => {
console.log(val)
}
</script>
<template>
<div>
<h3>单选框</h3>
<el-radio v-model="radio" value="1">备选项1</el-radio>
<el-radio v-model="radio" value="2">备选项2</el-radio>
<el-radio v-model="radio" value="3">备选项3</el-radio>
<h3>单选框 事件绑定</h3>
<el-radio v-model="radio2" value='a' @change="change">备选项1</el-radio>
<el-radio v-model="radio2" value='b' @change="change">备选项2</el-radio>
<el-radio v-model="radio2" value='c' @change="change">备选项3</el-radio>
<h3>复选框</h3>
<el-checkbox-group v-model="checked">
<el-checkbox value="1">前端</el-checkbox>
<el-checkbox value="2">后端</el-checkbox>
<el-checkbox value="3">运维</el-checkbox>
</el-checkbox-group>
</div>
</template>
- 下拉框
<script setup>
import { ref } from 'vue'
const radio = ref('2')
const selected = ref('1')
const selected1 = ref('1')
const selected2 = ref(['1', '2'])
const handleChange = (val) => {
console.log(val)
}
</script>
<template>
<div>
<h3>下拉框</h3>
<el-select v-model="radio">
<el-option label="选项1" value="1"></el-option>
<el-option label="选项2" value="2"></el-option>
<el-option label="选项3" value="3"></el-option>
</el-select>
<h3>动态下拉框</h3>
<el-select v-model="selected">
<el-option v-for="item in 3" :key="item" :label="'选项'+item" :value="item"></el-option>
</el-select>
<h3>下拉框 事件绑定</h3>
<el-select v-model="selected1" @change="handleChange">
<el-option v-for="item1 in 3" :key="item1" :label="'选项'+item1" :value="item1"></el-option>
</el-select>
<h3>下拉框 多选</h3>
<el-select v-model="selected2" multiple>
<el-option v-for="item2 in 3" :key="item2" :label="'选项'+item2" :value="item2"></el-option>
</el-select>
</div>
</template>
- 日期选择器
<script setup>
import { ref } from 'vue'
const date1 = ref('')
const date2 = ref('')
const date3 = ref('')
const dateChange = (val) => {
console.log(val)
}
</script>
<template>
<div>
<h3>日期</h3>
<el-date-picker v-model="date1" placeholder="请选择" />
<h3>日期时间</h3>
<el-date-picker v-model="date2" type="datetime" placeholder="选择日期时间"/>
<h3>事件绑定</h3>
<el-date-picker v-model="date3" type="datetime" placeholder="选择日期时间" @change="dateChange" value-format="YYYY-MM-DD HH:mm:ss"/>
</div>
</template>
想要设定中文,那就要在main.js中导入中文语言包并设置区域语言
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
app.use(ElementPlus, {locale: zhCn})
如果在“检查”中没有返回结果,查看报错:
App.vue:16 [Vue warn]: Property "handleChange" was accessed during render but is not defined on instance. at <App>
一定要认真检查绑定是否正确,确保使用了正确的语法绑定事件,例如
@change="handleChange"
- 表单
<script setup>
import { ref } from 'vue'
const form = ref({
name: '',
date: '',
location: '',
number: '',
cost: '',
content: ''
})
const submitForm = () => {
console.log(form.value)
}
const resetForm = () => {
form.value= {
name: '',
date: '',
location: '',
number: '',
cost: '',
content: ''
}
}
</script>
<template>
<div>
<el-form>
<el-form-item label="活動名稱">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="活動日期">
<el-date-picker
v-model="form.date"
type="date"
placeholder="選擇日期">
</el-date-picker>
</el-form-item>
<el-form-item label="活動地點">
<el-input v-model="form.location"></el-input>
</el-form-item>
<el-form-item label="活動人數">
<el-input v-model="form.number"></el-input>
</el-form-item>
<el-form-item label="活動費用">
<el-input v-model="form.cost"></el-input>
</el-form-item>
<el-form-item label="活動內容">
<el-input v-model="form.content"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
<el-button @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
- 对话框
<script setup>
import { ref } from 'vue'
const form = ref({
name: '',
date: '',
location: '',
number: '',
cost: '',
content: ''
})
const submitForm = () => {
console.log(form.value)
}
const resetForm = () => {
form.value= {
name: '',
date: '',
location: '',
number: '',
cost: '',
content: ''
}
}
const add=()=>{
console.log("新增")
}
const dialog = ref(false)
const dialogFormVisible = ref(false)
const dialogClose = () => {
console.log("关闭")
}
</script>
<template>
<div>
<el-button @click="dialog= true">新增活動</el-button>
<el-dialog v-model="dialog" title="新增活動" draggable @close="dialogClose">
<el-form>
<el-form-item label="活動名稱">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="活動日期">
<el-date-picker
v-model="form.date"
type="date"
placeholder="選擇日期">
</el-date-picker>
</el-form-item>
<el-form-item label="活動地點">
<el-input v-model="form.location"></el-input>
</el-form-item>
<el-form-item label="活動人數">
<el-input v-model="form.number"></el-input>
</el-form-item>
<el-form-item label="活動費用">
<el-input v-model="form.cost"></el-input>
</el-form-item>
<el-form-item label="活動內容">
<el-input v-model="form.content"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
<el-button @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
- 表格、分页
<script setup>
import { ref } from 'vue'
const data=ref({
tableData:[
{id:1,name:'张三',web:'www.baidu.com',date:'2021-10-10'},
{id:2,name:'李四',web:'www.baidu.com',date:'2021-10-10'},
{id:3,name:'王五',web:'www.baidu.com',date:'2021-10-10'},
]
})
let idArr=[]
const selected=(data)=>{
idArr=[]
data.forEach((item)=>{
idArr.push(item.id)
})
console.log(idArr)
}
const del=(index,row)=>{
console.log(index,row)
}
const edit=(index,row)=>{
console.log(index,row)
}
const currentPage=(val)=>{
console.log(val)
}
</script>
<template>
<div>
<el-button type="primary" @click="del">删除</el-button>
<el-table :data="data.tableData" border height:120px style="width: 100%">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="id" label="编号" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="web" label="网站" width="180"></el-table-column>
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column label="操作" width="180">
<template #default="scope">
<el-button type="primary" @click="edit(scope.$index,scope.row)">编辑</el-button>
<el-button type="danger" @click="del(scope.$index,scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination layout="prev, pager, next,jumper,total" :page-size='2' :total="50" @current-change='currentPage'></el-pagination>
</div>
</template>
- 按需导入(大大提高效率,不用再main.js中手动导入啦!)
在终端运行 npm install -D unplugin-vue-components unplugin-auto-import
npm install -D unplugin-icons
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
import Icons from 'unplugin-icons/vite';
import IconsResolver from 'unplugin-icons/resolver';
import path from 'path';
export default defineConfig({
plugins: [
vue(),
AutoImport({
imports: ['vue', 'vue-router'],
resolvers: [
ElementPlusResolver(),
IconsResolver(),
],
}),
Components({
resolvers: [
ElementPlusResolver(),
IconsResolver({
prefix: false,
}),
],
}),
Icons({
autoInstall: true,
}),
],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
});
这是最后修改好的配置文件(尊嘟改了很久,在配置过程中可能会出现各种奇奇怪怪的错误,建议先看清楚是什么原因方便对症下药!)
今天的学习依然看到是邓瑞老师的视频,讲的真的十分细致!
【2024新版】40分钟学会ElementPlus UI框架,Vue3前端视频教程,web快速入门实战课程
写在最后:今天的学习就到这里啦~明天开学习端的学习😇(在外面玩了一整天哈哈哈)