console
var app = Vue.createApp({
data() {
return {
form: {},
dia:false,
}
},
methods:{
del(){
this.$confirm('你确定要删除吗? 删除后将无法恢复！', '提示信息', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
}
}
})
app.use(ElementPlus)
var vm = app.mount('#dcapp')
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
<meta charset="UTF-8">
<meta http-equiv="Cache-Control" content="max-age=7200" />
<meta http-equiv="Expires" content="Mon, 20 Jul 2037 23:00:00 GMT" />
<link rel="icon" href="data:;base64,=">
<meta name=renderer content=webkit>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
<script src="//unpkg.com/vue@next">
</script>
<script src="//unpkg.com/element-plus">
</script>
</head>
<body>
<div id="dcapp" class="hei-100vh pad-15 bg-f2">
<div class="bor-8 bg-white padlr-12 padtb-15">
<div class="fow-8">乡村推荐</div>
<div class="mart-15 flex flex-wrap">
<div class="item bg-f2 wid10-22 padlr-12 padtb-15 mar-4 bor-8" v-for="(vo,i) in 7" :key="i">
<div class="padb-9 slh">洛克菲勒大吃大喝</div>
<img class="wid-100 hei10-14" src="https://scpic2.chinaz.net/Files/pic/pic9/201610/fpic7821_s_w285.jpg">
<div class="text-right fow-8 cup">
<i @click="dia=true" title="编辑" class="cuIcon-edit marl-8"></i>
<i @click="del" class="cuIcon-delete marl-8 foc-red"></i>
</div>
</div>
<div @click="dia=true" class="item bg-f2 wid10-22 hei10-23 padlr-12 padtb-15 mar-4 bor-8 cup">
<div class="fos-56 flex align-center justify-center wid-100 hei-100"><i class="cuIcon-add fos-56"></i></div>
</div>
</div>
</div>
<div class="flex mart-15">
<div class="bor-8 bg-white padlr-12 padtb-15 marr-8 wid0-5">
<div class="fow-8">民宿推荐</div>
<div class="mart-15 flex">
<div class="item bg-f2 wid0-4 padlr-12 padtb-15 mar-4 bor-8" v-for="(vo,i) in 2" :key="i">
<div class="padb-9 slh">洛克菲勒大吃大喝</div>
<img class="wid-100 hei10-14" src="https://scpic2.chinaz.net/Files/pic/pic9/201610/fpic7821_s_w285.jpg">
<div class="text-right fow-8 cup">
<i @click="dia=true" title="编辑" class="cuIcon-edit marl-8"></i>
<i @click="del" class="cuIcon-delete marl-8 foc-red"></i>
</div>
</div>
<div @click="dia=true" class="item bg-f2 wid0-4 hei10-23 padlr-12 padtb-15 mar-4 bor-8 cup">
<div class="fos-56 flex align-center justify-center wid-100 hei-100"><i class="cuIcon-add fos-56"></i></div>
</div>
</div>
</div>
<div class="bor-8 bg-white padlr-12 padtb-15 marl-8 wid0-5">
<div class="fow-8">好景推荐</div>
<div class="mart-15 flex">
<div class="item bg-f2 wid0-4 padlr-12 padtb-15 mar-4 bor-8" v-for="(vo,i) in 2" :key="i">
<div class="padb-9 slh">洛克菲勒大吃大喝</div>
<img class="wid-100 hei10-14" src="https://scpic2.chinaz.net/Files/pic/pic9/201610/fpic7821_s_w285.jpg">
<div class="text-right fow-8 cup">
<i @click="dia=true" title="编辑" class="cuIcon-edit marl-8"></i>
<i @click="del" class="cuIcon-delete marl-8 foc-red"></i>
</div>
</div>
<div @click="dia=true" class="item bg-f2 wid0-4 hei10-23 padlr-12 padtb-15 mar-4 bor-8 cup">
<div class="fos-56 flex align-center justify-center wid-100 hei-100"><i class="cuIcon-add fos-56"></i></div>
</div>
</div>
</div>
</div>
<div class="flex mart-15">
<div class="bor-8 bg-white padlr-12 padtb-15 marr-8 wid0-5">
<div class="fow-8">文化推荐</div>
<div class="mart-15 flex">
<div class="item bg-f2 wid0-4 padlr-12 padtb-15 mar-4 bor-8" v-for="(vo,i) in 2" :key="i">
<div class="padb-9 slh">洛克菲勒大吃大喝</div>
<img class="wid-100 hei10-14" src="https://scpic2.chinaz.net/Files/pic/pic9/201610/fpic7821_s_w285.jpg">
<div class="text-right fow-8 cup">
<i @click="dia=true" title="编辑" class="cuIcon-edit marl-8"></i>
<i @click="del" class="cuIcon-delete marl-8 foc-red"></i>
</div>
</div>
<div @click="dia=true" class="item bg-f2 wid0-4 hei10-23 padlr-12 padtb-15 mar-4 bor-8 cup">
<div class="fos-56 flex align-center justify-center wid-100 hei-100"><i class="cuIcon-add fos-56"></i></div>
</div>
</div>
</div>
<div class="bor-8 bg-white padlr-12 padtb-15 marl-8 wid0-5">
<div class="fow-8">美食推荐</div>
<div class="mart-15 flex">
<div class="item bg-f2 wid0-4 padlr-12 padtb-15 mar-4 bor-8" v-for="(vo,i) in 2" :key="i">
<div class="padb-9 slh">洛克菲勒大吃大喝</div>
<img class="wid-100 hei10-14" src="https://scpic2.chinaz.net/Files/pic/pic9/201610/fpic7821_s_w285.jpg">
<div class="text-right fow-8">
<i @click="dia=true" title="编辑" class="cuIcon-edit marl-8"></i>
<i @click="del" class="cuIcon-delete marl-8 foc-red"></i>
</div>
</div>
<div @click="dia=true" class="item bg-f2 wid0-4 hei10-23 padlr-12 padtb-15 mar-4 bor-8 cup">
<div class="fos-56 flex align-center justify-center wid-100 hei-100"><i class="cuIcon-add fos-56"></i></div>
</div>
</div>
</div>
</div>
<el-drawer
v-model="dia"
title="修改"
size="60%"
direction="rtl"
>
<el-form ref="form" :model="form" label-width="120px">
<el-form-item label="选择乡村" required>
<el-cascader
v-model="form.name"
:options="[]"
placeholder="请选择"
class="wid-100"
></el-cascader>
</el-form-item>
<el-form-item label="乡村图片" required>
<el-upload
action="https://jsonplaceholder.typicode.com/posts/"
:show-file-list="false"
:on-success1="handleAvatarSuccess"
:before-upload1="beforeAvatarUpload"
>
<img v-if="imageUrl" :src="form.imageUrl" class="avatar" />
<div class="dashed wid10-20 hei10-20 flex justify-center align-center fos-48" v-else><i class="cuIcon-add"></i></div>
</el-upload>
</el-form-item>
</el-form>
<div class="hei10-11"></div>
<div class="posa bot-0 rig-0 zin-1 bg-white solid-top wid-100 pad-15">
<el-button type="primary" native-type="submit" @click.prevent="">确 定</el-button>
<el-button @click="dia=false">取 消</el-button>
</div>
</el-drawer>
</div>
</body>
</html>